【プログラミング教育ナビ】は、プログラミング初心者が自分に合った勉強法や教室を見つけられたり、プログラミングに特化した求人が検索できたり、SaaSの比較ができるサイトです。人気講座のある入門スクールや独学できる学習サイトを、口コミ・評判で比較してランキング形式でご紹介しています。言語から探す場所から探す条件から探すrsstwitterfacebook案件獲得できなかったら全額返金!未経験からプロのエンジニアスキルを身につけ、フリーエンジニアとして稼げるまで徹底サポート。プログラミング初心者向け技術系ノウハウ・まとめTweetPocketプログラミング入門講座の第4回です。CSSの基礎知識をつけたい方は、まずプログラミング入門講座3「CSSとは〜HTMLとCSSを紐づける方法〜」をご覧ください。あなたはHTMLとCSSを紐付けられるようになりました。・・・といきたいところですが、先に覚えておくべき情報があります。CSSでの書き方<div>タグと<span>タグプログラミング入門講座1「HTMLとは〜概要と基本構造〜」では、マークアップとは文章に意味づけをするものだとお伝えしました。CSSを組み合わせてサイトの見栄えも調整しようとすると、どうしても意味づけとは関係なく、単純に要素をひとくくりにまとめる必要があるシーンに出くわします。いった場合に使用する、意味を持たないタグが<div>(ディブ)と<span>(スパン)です。<div>タグたとえば、サイトのヘッダー、サイドバー、本体、フッターをそれぞれ分けて纏めたいとき。HTML4、XHTMLではそれらに該当する意味を持ったタグはありません。そこで代わりに使われるのが<div>です。id=”footer”><p>著作権表記</p></div>このように、主にCSSと紐づけるためのくくりとして使用します。<span>タグこちらはdivよりもより小さなくくりで使用されます。文中の特定のワードにだけ色を付けたい場合などです。class=”red”>赤色</span>にするよ!</p><div>と<span>の違いどちらも意味を持たない<div>と<span>ですが、両者には明確な違いがあります。<div>はブロックレベル要素、<span>はインライン要素という分類にそれぞれ含まれています。両要素については後で詳しく説明しますが、インライン要素はブロック要素を外からくくることができません。※一部例外を除く(ブロックレベル要素・インライン要素とは)<span>は<div>よりも内側をくくることになります。div、spanに限らず、body内で使うHTMLタグはインライン要素かブロック要素に分類されます。※一部両方の性質をもったタグや分類に含まないタグも存在します。タグの入れ子(ネスト)ここまで、説明なく進んできましたが、HTMLは、あるタグでくくった要素の中に、別のタグでくくった要素を含めることができます。これをタグの入れ子(ネスト)と呼びます。<p>htmlとbodyとpタグが入れ子構造になっています。</html>12345<html><body><p>htmlとbodyとpタグが入れ子構造になっています。</p></body></html>タグの種類によって内側に入れ子にできる要素は決まっています。(内包可能要素)特殊な例として、前述のdivとspanはdivの中にdivを、spanの中にspanを入れ子にすることができます。</span>になっています。</div>1234567891011<div><div><div><p>divが<span><span>3段</span>入れ子</span>になっています。</p></div></div></div>上記の例のタグの列にもありますが、HTMLでは入れ子にしたタグをインデントすることは必須ではありません。よって次のように書くことも可能です。<記述例><div><div><div><p>divが<span><span>3段</span>入れ子</span>になっています。</p></div></div></div>1<div><div><div><p>divが<span><span>3段</span>入れ子</span>になっています。</p></div></div></div>これでは目で見て読みづらいため、多くの場合インデントをしています。タグの入れ子は、構造が崩れるとブラウザに混乱を招き、表示の崩れやにつながりますので、深い入れ子構造では注意が必要です。</span>になっています。</div>12345678910<div><div><div><p>divが<span><span>3段</span>入れ子</span>になっています。開始タグと終了タグが対になる必要があります。<悪い例2>(<span>と<a>が互い違いになってしまっている。前述のとおり内で使われるHTMLタグはすべて下記の2種類に分類されます。※一部両方の性質をもった要素あり。ブロックレベル要素は主としてページのレイアウトにかかわる性質をもったタグが含まれ、インライン要素は主に文章の内部部分、その名の通りインライン(=横書き)で行中に横並びに表示される要素が含まれます。大雑把な理解として、下記をおさえておきましょう。ブロックレベル要素は縦並びになるものインライン用は横並びになるものただし、CSSを使用する上では縦並び横並び以外にも大きな差がありますので、注意が必要です。ブロックレベル要素ブロックレベル要素は高さ(height)と幅(width)を持つ要素で、その名からイメージできるようにブラウザの表示上、区画・塊になります。ブロックレベル要素は、内包する要素一杯の幅と高さをもつ矩形だとイメージできます。widthが未設定の場合、幅は親要素の幅と同一(親要素がない場合の幅ブラウザ一杯)、heightが未設定の場合高さは内包する要素の高さに自動で調整されます。)※すべてのタグは上記サイトから確認してください。インライン要素インライン要素は高さと幅を持たない要素で、その名の通りインライン(=横書き)で行中に横並びに表示される要素が含まれます。インライン要素は、横幅が親要素(一つ上の要素)の幅に達すると、途中で改行され、すぐ下の行に続く性質があります。Webサイト)※すべてのタグは上記サイトから確認してください。具体例として、pタグ(ブロックレベル要素)とspanタグ(インライン要素)を使って表示の差を比較してみます。(サンプルコード:css_example2)※わかりやすくするため色分け・枠つけします。</p>123456<p>ブロック1ブロック1ブロック1<span>インライン1インライン1インライン1インライン1</span>ブロック1ブロック1ブロック1</p><p>ブロック2ブロック2ブロック2<span>インライン2インライン2インライン2インライン2</span>ブロック2ブロック2ブロック2</p>これらの例は幅400pxのdivの中にそれぞれの事例を詰め込んだものです。ブロックレベル要素が矩形、インライン要素が行というイメージがなんとなくつかめたかと思います。置換インライン要素(インラインブロック要素)ここに該当する要素は大分類としてはインライン要素ですが、幅(width)と高さ(height)を持つ特殊なものです。※インライン要素に含まれる頻出タグimg、input、button、iframe、input、select、textareaこれらはインライン要素同様横並びに配置されますが、width、heightを属性・CSSで指定することができます。ブロックレベル要素、インライン要素についてより詳しい情報は下記サイトを参照してください。(参照:適用要素|前提知識|CSS2.1)内包可能要素HTMLのタグごとに内側に入れ子にできるタグの種類が決まっています。以下の三つが基本のルールです。※一部例外ありブロックレベル要素は、中にブロックレベル要素とインライン要素どちらも入れられるものと、インライン要素だけが入れられるものがあるインライン要素の中にはインライン要素だけが入れられるリスト系のタグは直下の子要素に使えるタグが決まっているブロックレベル要素の種類ブロックレベル要素は大きく見て、中にブロックレベル要素とインライン要素どちらも入れられるものと、インライン要素だけが入れられるものに分かれます。※一部例外ありブロックレベル要素・インライン要素をどちらも内包できるものdiv、fieldset等インライン要素を内包できるものh1~h6、p、pre等これらは内側に直接テキストを入れても、インライン要素を入れても大丈夫です。ブロックレベル要素・インライン要素をどちらも内包できるものでは、ブロックレベル要素同士の入れ子も問題ありません。※ただし、リストに関するタグ(下記)は制約があります。ul、ol、dl、tableインライン要素の中にはインライン要素だけが入れられるインライン要素の中にはブロック要素を入れられません。※一部例外あり中にはインライン要素又はテキストが入ります。インライン要素同士の入れ子は許可されています。リスト系のタグは直下の子要素に使えるタグが決まっているリストに関するタグはリスト全体をくくるタグ(例:ul)の直下に使える子要素が決まっています。/></ul>リストを複数入れ子にする場合はこのようになります。</ul>1234567891011121314<ul><li><ul><li>リストアイテム</li><li>リストアイテム</li></ul></li><li><ul><li>リストアイテム</li><li>リストアイテム</li></ul></li></ul>※liの中であればブロックレベル要素を入れられるため、ulを設置できています。(参照:ブロックレベル要素一覧表、インライン要素一覧表、ブロックレベル要素の内包できる?できない?)HTMLタグからCSSへの移行CSSはHTMLを読みやすく・管理しやすくするために、枝分かれして生まれたものです。HTMLタグにもウェブページの見栄えを調整するためのタグがありました。ここでは文字のスタイルを例としてCSSに至る過渡期の記述を紹介します。HTMLタグでの書き方style属性での書き方style要素にまとめた書き方CSSでの書き方ブラウザで下記の表示になるように、それぞれの書き方でコードを書いてみます。どの表示結果も同じになります。color=”#FF0000′′><b>文字のスタイルを調整!</b></font></p>HTMLではかつて、見た目を調整する専用のタグが使用されていました。<font>・・・フォントタグ。フォントの種類、大きさ、色を調整するタグで、ここではsize属性で大きさを、color属性で色を設定しています<b>・・・ボールドタグ。文字を太字にする専用タグこれらは見栄えを変更するだけで、文章の意味には関与しないものでした。HTML全体にこういったタグが設置されると、コードが読みづらくなるばかりでした。XHTMLではこの書き方は非推奨となっています。style=”font-size:150%;font-weight:bold;color:#FF0000;”>文字のスタイルを調整!</p>見栄えを整えるタグを廃止するため、その代替としてstyle属性によって見た目を変更できるようになりました。この例では<b>タグ<font>タグがなく、<p>タグだけになりマークアップが単純になります。style属性の中身は、CSSでの宣言を一列にまとめたもので、同様の動作をします。class=”text1′′>文字のスタイルを調整!</p>さらに、内容と見た目を分離できるようになりました。<style>タグは、中にスタイルを記述する専用タグで、HTMLの中にCSSと同一の書式でスタイルを用意できます。HTMLは上から順に描画されるため、スタイルを使用する箇所よりも前に、<style>タグでスタイルをまとめて用意し、セレクタで紐づけて使用します。–>はコメントアウトと呼び、HTMLの中に、ブラウザには表示させない注釈文を差し込む書式です。ここでは、<style>タグに対応していないブラウザに、内容を表示させないために書かれています。CSSでの書き方これで完全にコンテンツと見た目の分離が完了しました。àを使用する必要はありません。}12345.text2{font-size:150%;font-weight:bold;color:#FF0000;}これで完全にコンテンツと見た目の分離が完了しました。→を使用する必要はありません。投稿者:プログラミング教育ナビ編集部tweetプログラミングで挫折しそうなら、現役エンジニアにマンツーマンで相談してみませんか?オンラインのプログラミングスクール「TechAcademy」のメンターが対応。人気の記事まだデータがありません。【プログラミング教育ナビ】は、プログラミング初心者が自分に合った勉強法や教室を見つけられたり、プログラミングに特化した求人が検索できたり、SaaSの比較ができるサイトです。人気講座のある入門スクールや独学できる学習サイトを、口コミ・評判で比較してランキング形式でご紹介しています。