みなさん、こんにちは！
ブリュの公式ブログ.netにお越しいただきまして、ありがとうございます。
このサイトでは、ITについて特化したサイトを運営しています。
このページでは、主要なHTMLタグについて、その意味と使い方を一覧にまとめました。
HTML作成時にハンドブック的な用途でお使いください。
目的のタグまでジャンプできる目次を設置しているので、探している情報が一発で見つかると思います。
目次
@media screen
@media screenは、レスポンシブウェブデザインを作成している場合に必要となるものです。
サイトの作成を始めたばかりで、レスポンシブウェブデザインを作成する必要性がまだない場合、この項目は読み飛ばして次のidの説明を読んでください。
@media screenは、表示する端末のサイズによって、読み込むスタイルシートを変更するときに使います。
例えば、今ご覧になっている「ブリュの公式ブログ.net（for IT）」では、パソコンで閲覧しているときには2カラムですが、スマートフォンでアクセスするとシングルカラムになっていますよね。
本家ブリュの公式ブログであるbrionac-yu-yake.comも同じようにパソコンでは２カラム、スマートフォンからはシングルカラムという形でスタイルシートの切り替えを行っています。
@media screenの書き方は、次のようなものです。
|
1 2 3 4 5 6 7 8 9 |
@media screen and (min-width:480px){ 画面サイズが480px「以上」の時に読み込むスタイルシート （スタイルシート1） } @media screen and (max-width:480px){ 画面サイズが480px「未満」の時に読み込むスタイルシート （スタイルシート2） } |
なお、max-widthの場合には「以上」であり、miin-widthの場合には「未満」であることに注意してください。
上記のスタイルシートでは、480pxの時にはスタイルシート1が読み込まれ、479pxの時にはスタイルシート2が読み込まれます。
もし、「以上」と「未満」を知らないで次のように書くとどうなるでしょうか？
|
1 2 3 4 5 6 7 8 9 |
@media screen and (min-width:480px){ 画面サイズが480px「以上」の時に読み込むスタイルシート （スタイルシート1） } @media screen and (max-width:479px){ 画面サイズが480px「未満」の時に読み込むスタイルシート （スタイルシート2） } |
480pxではスタイルシート1が読み込まれ、478pxではスタイルシート2が読み込まれますが、479pxでは、スタイルシート1もスタイルシート2も読み込まれなくなります。
また、@media screenを使用する場合には、HTMLヘッダーの<meta>で、viewportを指定する必要があります。
記述するHTMLコードは次のようなものです（コピペでOKです）。
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
このviewportを設定しないと、@media screenが読み込まれないため、悩むことになります。
私の場合には数時間無駄にしました、
はい・・・
id
HTMLとCSSを関連付けるときに使います。
idのルールは、「HTML上に1回しか登場してはいけない」という特殊ルールです。
2回以上あってもブラウザでは問題なく表示されますが、本来のHTML、CSSとしては正しくない記述です。
HTMLとCSSをidで関連付けると、次のようなコードになります。
まずはHTMLです。
|
1 2 3 |
<div id="sample_block"> この部分の背景色を変化させます。 </div> |
次にCSSです。
|
1 2 3 |
#sample_block{ background-color:#ff0000;/*#ff0000はHTMLカラーコードにおける赤色です。*/ } |
このようにすると、idで指定したdiv要素だけが背景色が変更できます。
上のサンプルのように、HTML上でidで定義した要素は、CSSでは#id名をつけて装飾します。
class
classは、基本的にidと同じです。
ですが、idはHTML上に1回しか存在できないのに対して、classで指定した要素は何個あっても大丈夫です。
具体的な記述は、次のようになります。
・HTML
|
1 2 3 |
<div class="sample_block"> この部分の背景色を変化させます。 </div> |
・CSS
|
1 2 3 |
.sample_block{ background-color:#ff0000;/*#ff0000はHTMLカラーコードにおける赤色です。*/ } |
このようにすると、idの時と同じようにclass指定したdiv要素の背景だけ変わりましたね。
このサンプルのように、HTML上でclassで指定した要素では、CSS上では.class名によって装飾します。
idとは違い、classはHTML上に同じものが何度登場しても大丈夫なので、使いまわしたいHTMLパーツはすべてclassで定義しましょう。
background-color
background-colorは、要素の背景色を設定するときに使います。
その親要素の背景色になります。
何も指定しなければ「透明だ」と覚えておくと便利です。
背景色を全く指定しなかった場合、最終的な親要素は<body>タグになりますが、その場合の背景色は白になります。
background-colorの使い方は、次のコードご覧ください。
※上記idの説明で用いたHTML、CSSと全く同じものです。
・HTML
|
1 2 3 |
<div id="sample_block"> この部分の背景色を変化させます。 </div> |
・CSS
|
1 2 3 |
#sample_block{ background-color:#ff0000;/*#ff0000はHTMLカラーコードにおける赤色です。*/ } |
idで指定した部分だけ背景色が変わりました。
background-img
background-imgは、背景画像を指定します。
使い方は次のようになっています。
|
1 2 3 4 5 6 7 |
body{ background-image:url(./img/sample.jpg); background-position:centercenter; background-repeat:no-repeat; background-attachment:fixed; background-size:cover; } |
手元にあるHTMLで上記のスタイルシートを追加で読み込めば、sample.jpgが背景画像として表示されます。
ここで、付随するコードについても説明しておきます。
background-positionは、画像のどこを基準にするかです。
例えば、次のように使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
body{ /*画像の中心を基準にします。*/ background-position:center center; /*画像の下を基準にします。*/ background-position: center bottom; /*画像の上を基準にします。*/ background-position: cenrter top; /*画像の右側を基準にします。*/ background-position:right center; /*画像の左側を基準にします。*/ background-position:left center; /*画像の右下を基準にします。*/ background-position:right bottom; /*画像の左上を基準にします。*/ background-position:left top; } |
このようにすることで、画像の位置調整が可能になります。
text-align
text-alignは、その要素内での文字の寄せ方を変更できます。
右寄せ、中央寄せ、左寄せが指定できます。
まずは、HTMLコードを見てください（コピペでOKです）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="//brionac-yu-yake.com/javascript.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="description" content="サイトの概要"> <meta name="keywords" content="キーワード1,キーワード2,キーワード3"> <title>サイトのタイトル</title> <link rel=stylesheet href="style.css" type="text/css"> </head> <body> <div> <div id="migi"> <p> この部分は右寄せになります。 </p> </div> <div id="tyuuou"> <p> この部分は中央寄せになります。 </p> </div> <div id="hidari"> <p> この部分は左寄せになります。 </p> </div> </div> </body> </html> |
次に、CSSコードを見てください（コピペOKです）。
|
1 2 3 4 5 6 7 8 9 10 11 |
#migi{ text-align:right; } #tyuuou{ text-align:center; } #hidari{ text-align:left; } |
ファイル名はstyle.cssで保存してください。
ブラウザで表示すれば、右寄せ、中央寄せ、左寄せが実現できます。
line-height
line-heightは、行間を指定するものです。
pxなどで指定できますが、単位なしがおすすめです。
例えば、次のように指定したとします。
|
1 2 3 |
body{ line-height:1.5; } |
この場合、文字の大きさに対して1.5倍の行間という意味になります。
途中で文字サイズを変更しても、このように単位なしで設定を行っていれば、line-heightの浅い設定は不要になりますし、字と字が重なって読めなくなる心配もありません。
font-family
font-familyは、字体を指定します。
例えば、次のように指定します。
|
1 2 3 |
body{ font-family:"MS Gothic",sans-serif; } |
他のサイト様で字体については様々なものが紹介されているので、そちらも併せてご覧ください。
color
colorは、文字の色を指定します。
div要素に対し、idやclassを指定し、スタイルシートにcolorを用いて文字色を指定することができます。
例えば、次のような記述ができるでしょう。
HTMLの<body>～</body>の間に、次のHTMコードを記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div> <div> <p> ここの文字はデフォルトの色です。 </p> </div> <div id="red_color"> <p> ここの文字は赤色になります。 </p> </div> </div> |
次に、スタイルシートに、次のコードを書き足してください。
|
1 2 3 |
#red_color{ color:#FF0000; } |
後半の文字は赤色になりましたでしょうか？
ちなみに、#FF0000は、赤色のHTMLカラーコードです。
width
widthは、要素の横幅を指定するものです。
例えば、次のHTMLを、<body>～<body>の間に貼り付けてください。
|
1 2 3 4 5 6 7 8 |
<div> <div id="big_field"> ここは画面の横幅の80%のサイズです。 </div> <div id="min_field"> ここは画面の横幅の30%のサイズです。 </div> </div> |
次に、スタイルシート（CSS）に、次のコードを追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 |
#big_field{ width:80%; margin:0 auto; background-color:#008080; } #min_field{ width:30%; margin:0 auto; background-color:#00FFFF; } |
これで、上の<div>は、画面サイズの80%の横幅になります。
下の<div>は、画面サイズの30%になります。
なお、スタイルシートの中の、margin:0 auto;はセンター寄せに便利な記述です。
便利なのでぜひ使ってください。
max-width
max-widthは、max-widthで指定したサイズまでの範囲で可能な限り横幅をとるスタイルシートです。
例えば、親要素となる<div>がサイズが可変であったとします。
その中の子要素となる<div>に、max-width:700px;と記入した場合、親要素が700px以上の幅であれば、子要素は700pxになります。
親要素が699px以下になると、子要素もそれに従って幅が小さくなります。
この記述は、レスポンシブウェブデザインを構成するときに多用するもので、現在、簡単に説明する方法が思いつきません、
したがって、sampleコードは書いていませんが、頭の片隅にでも記憶しておいてください。
min-width
min-widthは、最小の幅が決まっていて、何があってもその幅以下には小さくならないものです。
たとえば、min-width:300px;と書くと、その要素は横幅が300px以下には絶対になりません。
逆に、広がる方向には限りなく広がっていきます。
このmin-widthは、max-widthと組み合わせて使うことも可能で、次のように記述します。
|
1 2 3 4 |
#sample_block{ max-with:700px; min-width:300px; } |
この場合、横幅は最小でも300pxは下回らないが、最大でも700pxを上回ることはない。
つまり、300px～700pxの範囲で状況に応じて横幅を変化する要素を作ることができます。
このmin-widthも、レスポンシブウェブデザインで多用される書き方です。
height
heightは、高さ方向を指定するものです。
通常、<div>などの高さは、内部要素によって自動的に変化します。
ですが、固定した高さが欲しいときには、このheightを使うといいでしょう。
HTMLの<body>～</body>の間に、次のコードを記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div> <div id=normal_field> <p> これが標準のdivです。 </p> <p> 要素の大きさに対して、自動で高さが設定されています。 </p> </div> <div id="height_200px"> <p> スタイルシートで高さを設定しました。 </p> <p> 下の余白がかなり大きいです。 </p> </div> </div> |
次に、スタイルシートに次のコードを追加してください。
|
1 2 3 4 5 6 7 8 |
#normal_size{ background-color:#00FFFF; } #eight_200px{ height:200px; background-color:#008000; } |
下のdivが無駄に大きくなれば正常です！
border
borderは、枠線のスタイルを記述するものです。
書き方は次のようになっています。
|
1 |
border: スタイル 幅 色; |
幅はデザインに合うようにpxなどで指定します。
色は、HTMLカラーコードを記述します。
スタイルについては、次の表から選んで記述してください。
多分以上が、一番分かりやすいカラーコード表です。
float
floatは、回り込みを意味します。
イメージ的には、float:right;で右寄せ、float:leftで左寄せといった感じです。
ですが、機械としての処理では、float:rightは右への回り込みを意味します。
すなわち、自分の上にある要素よりも右へ行こうとします。
このサイト作成者と機械処理の感覚のズレが大きな影響を生むことはありませんが、初心者がサイトを作成するうえで大きな登竜門となることは否定できません。
かなり悩む部分だと思うので、しっかりと理解してください。
floatすべての説明は短文では不可能なので、別途記事を投稿して解説をおこないました。
floatに関してしっかり理解したい方は、併せてご覧ください。
なお、当サイトでは、このfloatを利用して、2カラムのサイトをコピーアンドペーストだけで作成できるページを用意しています。
まずは正確に動いているコードを入手し、そこからオリジナルデザインに変更していくと、理解が早まるのではないかと思います。
なお、floatを用いた場合には、float処理の一番下の要素に追加して、clear:both;を記述しましょう。
このあたりも、上記の2カラムサイト作成ページで詳細を書いています。
display:none;
display:none;は、ブラウザには表示しないでくれ！っていうことです。
次のHTMLを、<body>～</body>の間に記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div> <p> ここは表示されてるよ～ </p> </div> <div id="sample"> <p> ここは表示されないよ～ </p> </div> |
次に、スタイルシートに次の内容を追加して下さい。
|
1 2 3 |
#sample{ display:none; } |
2行目が表示されなければOKです！
なお、なんでHTMLに書いたのにブラウザでは表示しないのか？
それだったら初めから書かなければいいじゃん・・・と思うでしょうが、レスポンシブウェブデザインに必要になるコードです。
以前は、ブラウザに表示されないことを悪用し、キーワードを詰め込んでdisplay:none;で非表示にしているサイトがありましたが、現在では検索結果においてペナルティを受けるだけなので、やめてください。
なお、レスポンシブウェブデザインのように、常識的な範囲でdisplay:none;を使用する分には問題ありません。
必ずしも、display:none;は悪役ではなく、必要な時には気にせずに使っていきましょう。
margin
margnは、ある要素に対して内部要素への余白を表します。
また、margin: 0 auto;と記述することで、要素をセンター寄せすることができます。
例です。
HTMLの<body>～</body>の間に、次のコードを記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div> <div id="hutuu"> <p> ここは普通に表示します。 </p> </div> <div id="custom"> <p> ここは真ん中に寄るよ。 </p> </div> </div> |
次に、CSSに次のコードを追加してください。
|
1 2 3 4 5 6 7 8 9 10 |
#hutuu{ background-color:#99FF00: width:50%; } #custom{ margin:0 auto; background-color:#99FFFF; width:50%; } |
2つ目の<div>要素がセンターによればOKです。
なお、<div>の要素をセンター寄せするものであり、文字をセンター寄せするものではありません。
文字のセンター寄せには、text-alignを利用します。
便利なので使ってみてください。
なお、marginを使用するにあたり、次のpaddingとの違いも理解しておいてください。
padding
padding要素は、ある要素の外側の余白を指定します。
paddingでは、widthによって要素のサイズを決め、その外側に余白を作るので、設定を間違えると親要素のサイズをはみ出してしまい、レイアウトが崩れる可能性があるものです。
したがって、サイトの設計時にはmargin以上に慎重に設定する必要があります。
marginとpaddingの関係については、別の記事でまとめます。
font-size
文字サイズの指定に使用します。
使用例としては、次のようになっています。
HTMLの<body>～</body>の間に、次のコードを記述してください。
|
1 2 3 4 5 6 7 8 9 10 |
<div> <div="large"> <p> ここの文字は36pxで表示されます。 </p> </div> </div="min"> ここの文字は12pxで表示されます。 </div> </div> |
次に、スタイルシートに次のコードを追加してください。
|
1 2 3 4 5 6 7 |
#large{ font-size:36px; } #min{ font-size:12px; } |
文字サイズが違っていればOKです！
CSSのコメントアウト
プログラムは、作成した人にしか解読できないといわれることがあります。
多種多様な書き方があり、他の人が書いたコードは自分とは書き方が違うため、動作の理解が難しくなります。
また、開発者自身が、何の動作をしている部分なのかを忘れないために、「コメント」というものが存在します。
CSSのコメントは、/*コメントアウト*/となります。
例を見てみましょう。
まずは、HTMLの<body>～</body>の間に、次のコードを張り付けてください。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div ig="css_normal"> <p> この部分は背景色が変わります。 </p> </div> <div id="css_comment"> <p> この部分は背景色が変わりません。 </p> </div> |
次に、CSSに次のコードを張り付けてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#css_normal{ /*このCSSは反映されます。*/ background-color:#00FFFF; } #css_comment{ /* この部分はコメントアウトされます。 background-color:#00FFFF; */ } /*この部分はコメントアウトされます。 #css_comment{ backfround-color:#00FFFF; } */ |
コメントアウトされた部分はHTMLのブラウザ出力時に反映されません。
また、複数行にわたるコメントアウトが可能です。
まとめ
以上、ここまで主要となるCSSのテクニックについてまとめてきました。
サイト作成時のハンドブックとして利用していただければ幸いです。
また、お気に入り登録もよろしくお願いします。
