タグ: HTML・CSS

HTML・CSSについて。

HTML

HTMLはマークアップ言語で、Webサイトのページの内容を記述する時に使用する。HTMLタグと呼ばれる<タグ名>のようなマークで、文字や画像などページに使用する項目を定義する。

HTMLのルールに沿って書かれた.htmlの拡張子のついたファイルなどをHTMLファイル、HTMLと略して呼んだりする。

CSS

CSSは記述されているHTMLに対して、色を付けたり大きさを指定したり、アウトを指定するための装飾用のファイル。拡張子は主に.css。

拡張子は.htmlや.cssじゃないといけないのか?

HTMLとCSSは.htmlや.cssで記述されることが多いが、プログラムでルールに沿って記述されたコードを表示させることで、HTML・CSSとして表示させることも可能。サーバーの設定やプログラムでそのように表現することも可能。

HTML・CSSを使ってどういった表現が可能か?

  • 見出し
  • 段落
  • リスト
  • テーブル
  • 画像
  • 動画

など様々な要素がある。基本的には縦に要素が表示されるものだと思っていればシンプルに納得できる(厳密に言うと違うが)。
例えば、縦に並ぶ要素を横に並べたいときはCSSを横に並ぶように記述する。

※ただし、横に並べるには横に並ぶようにHTML側もそのように記述しておかなかければいけない

HTMLタグの組み合わせとCSSの組み合わせは対なので、どちらも矛盾がないように記述する。
プログラム言語ではないため、自分で作成したHTML・CSSファイルはエラーが表示されず処理されて表示される。表示された時に思ったようなレイアウトになっていない場合は、どちらかあるいはどちらも記述内容をチェックする。

レイアウトによく使用するプロパティ

レイアウトは表示が問題なければ、以下のプロパティ以外でも可能。

  • display:flex;
  • display:table;
  • width:***px;
  • width:***vw;

文字の設定に使用するプロパティ

様々な単位がある。

  • font-size:***px;
  • font-size:***vw;
  • font-size:***vw;

文字の色変更に使用するプロパティ

文字の色設定は16進数表記やrgba表記でも可能。

  • color:#******;
  • color:rgba(***,***,***,*);

背景に使用するプロパティ

背景は単色・グラデーションの他、画像を使うことも可能。

  • background:#******;
  • background:url(***.***);

印刷など

CSSは印刷の文書も表現できる。単位はmmなども使用可能。

JavaScript

HTMLやCSSを操作するためにあるスクリプト言語。HTMLやCSSと同じように.jsとすればJavaScriptファイルとして認識される。HTML・CSSと違い、記述方法を間違えるとうまく処理結果が表示されないことがある。
※ブラウザに搭載されている

    レスポンシブWebデザインの概念・メディアクエリのサンプル

    レスポンシブWebデザインはCSSで、デバイス・ブラウザの画面幅によってレイアウトの切り替えを行うメディアクエリ。画像にmax-width:100%;やwidth:100%;を使って、親要素の幅に合わせ、画像が比率を保ったまま拡大・縮小表示されるフルードイメージ。レイアウトを固定幅ではなく、画面幅に合わせて要素を可変にレイアウトするフルードグリッド。 メディアクエリフルードイメージフルードグリッド この3つをすべて使わな...

    HTML+CSSでフローティングバナーを作成する方法

    フローティングバナーは単純。固定するだけと考えたら、邪魔しない場所に設置するだけ。 HTML <div class="fix"> 固定したい内容 </div> CSS .fix{ position:fixed; right:10px; bottom:10px; border:solid 1px #000; background:#fff; } 注意点 注意点としては、重なるコンテンツを邪魔していないかどうか、フッター付近に固定する場合は、フッターのコンテンツとかぶっても余裕があるように、body下...

    HTML+CSSでフッターを固定する方法

    HTML <div class="fix-footer"> 固定フッター </div> CSS body{ margin:0 0 10vw; } .fix-footer{ width: 100%; position: fixed; bottom: 0; background: rgba(255,255,255,1); } 注意 注意点としては、下部に固定するため、固定した文のマージンを計算して取っておいたほうがいい。

    HTML+CSSでヘッダーを固定する方法・アンカー位置を調整する方法

    position:fixedを使う方法 基本的な考え方としては、ヘッダーを固定して、その固定分高さを確保しておくというもの。 注意しなければいけないのはアンカーの位置がずれてしまうので、それを調整しておく必要がある。 HTML <div id="header"></div> CSS #header{ position:fixed; width:100%; }

    HTML+CSSで商品一覧のレイアウトする方法

    HTML <div id="index"> <div class="item-list"> <h2>ランキング</h2> <p>商品一覧で商品名の長さ等で縦揃えがばらばらになってしまうときに、flexを使って揃える。</p> <ul> <li> <a href="#"> <span class="thumb"><img src="images/item-rank1.jpg" alt="1位"></span> <span class="name">商品名商品名商品名商品名商品</span> </a> <span...

    ★HTML+CSS 見出しのデザインサンプル

    h1にスタイルをつけるというサンプルで例を紹介しています。 単色背景 単純に背景に色を付けて、視認性を高めた見出しのサンプルです。パディングなどは全く設定していません。背景が例えば赤いときは白い文字など可読性の高い色を選択する必要があります。黒のままだと滲んでしまい見づらくなります。 h1{ color: rgba(255,255,255,1); background: rgba(255,0,0,1); } 単色下線 単色の下線を引いた見出し。デ...

    CSSのflex・floatを使ったWebサイトのレイアウト例

    flexのみ flexやflex-directionなどは親要素に記載する。最初間違ってしまうのは、小要素に記載してしまったんだけれども...。 今までと同じように親要素、レイアウトしたい小要素で構成する。 <div class="sample"> <ul> <li>AAA</li> <li>AAA</li> <li>AAA</li> </ul> </div> CSSが違う。 .sample ul{ display:flex; } これだけ。ベンダープレフィックス...

    HTML+CSS:リストでナビゲーションを作成

    HTML+CSSでナビゲーションを作る時の自分用メモ。  シンプルなリストナビゲーション 中央揃えのシンプルなテキストナビゲーション。テキストリンクに対して、下線を引いたりあるいはマウスホバーした時に色が変わるように工夫すると良い。 display:inline-block;を使ったレイアウト。 HTML <nav> <ul> <li><a href="#">sample1</a></li> <li><a href="#">sample2&l...

    [IE6のバグ] floatしている要素にマージンを指定すると幅が2倍になる

    IE6の中でももっとも有名で鬱陶しいバグの一つ。floatをしている要素にマージンを指定すると幅が2倍になってしまう。そのため、設計通りに横に並べようとしたときにうまくいかなくなる。 XHTML/HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Ty...

    [IE6のバグ] brにletter-spacingを適用すると解釈がおかしくなる

    たまには、文字と文字の間にスペースを入れて読みやすくするために、「letter-spacing」を入れると思います。そういう時に出くわしちゃった問題がありました。 XHTML/HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Con...