少しずつ、コーディングの基本を実践できてきましたか？
今度は、少し表現の幅を広げてみましょう。
前回作ったファイルを引き続き編集していくことも出来ます。
もちろん、復習をかねてゼロから作っても構いません。
今回は、下記のページを自分自身で再現してみてください。
必要なタグは、次の項目でご説明させて頂きます。
参考にしながら進めてみましょう。
もし、どうしても分からなければ、解答ファイルをダウンロードして中身を確認しましょう。
出来るだけ解答ファイルを見ること無く、MISSION2を再現してみてください。
できたら次に進んでみてください。
■ 解答ファイルのダウンロード
https://base91.net/mission/cording/2/mission2.zip
※ zipファイルって何？ どうやって開くの？
http://base91.net/zip-how-to-open/
今回活用しているHTMLとCSSは下記の通りです。
それぞれ、意味を考えながら、使ってみましょう。
今回必要なHTMLタグ
<img src="img/common/luca-bravo-217276-unsplash.jpg" alt="">
画像を表示させることができます。
ダブルクオーテーション( ” ” )の中は「パス」と言い、画像の位置を示します。
CSSファイルの呼び出し方と一緒です。
位置の意味は、今の「htmlファイルから見て」どこに画像があるかです。
index.htmlと同じ階層から見て、どこに画像があるかを指し示します。
例えば「 img/common/unsplash.jpg 」について考えてみましょう。
まず、htmlファイルと同じ階層にimgフォルダがあります。
imgフォルダの中には、commonフォルダがあります。
そのcommonフォルダの中にあるunsplash.jpgを呼びだす、という意味です。
実際にフォルダ構造は下記のようになります。
imgやcommonはフォルダ名を意味します。
間に / がありますが、/ を挟むことで1つ下の階層に下がります。
1つ上の「親」の階層を示したい場合は ../ となります。
理解しにくい部分かと思いますので、説明動画をご用意いたしました。
何度も出てくる使い方ですので、しっかり覚えておいてください。
<figure></figure>
画像の要素を囲んで「ここは画像ですよ」と意味付けします。
<ol>
<li></li>
<li></li>
<ol>
連番のリストを意味します。
箇条書きに、数字をつけたい時ってありますよね。
リストの頭に1,2,3,4と順番に数字がつきます。
olの中にliが入り、liがそれぞれのナンバーをもった行を意味します。
liは何個でも置くことができます。
各タグにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/html/
今回必要なCSSプロパティ
width:900px;
横幅を設定できます。※ 値は仮のものです。
margin-left:auto;
margin-right:auto;
横幅(width)を指定した上で、margin左右をautoにすると、要素自体が中央に寄ります。
なお、本来marginとは、隣接する要素との間に隙間を空けるためのものです。
今回は隙間を空ける効果としてではなく、中央寄せの効果として使います。
border:1px solid #000;
線をつけます。
値は左から「線の太さ(1px)」「線の形(solid)」「線の色(#000)」となります。
また、border-rightというように方向をつけることで、片面だけに線をつけられます。
※ 値は仮のものです。
box-sizing:border-box;
例えば900px横幅を指定したとします。
そこにpaddingで周囲30px余白をつけたとします。
すると、横幅は960pxになります。
ただ、横幅900px固定のまま、30pxの余白を内側に空けたいときありますね。
box-sizingを使えば、padding分は計算されず、合計横幅900pxのまま余白があけられます。
※ 値は仮のものです。
各プロパティにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/style/
CSSの詳細度について
またcssの書き方として、もう1つ学ぶべきことがあります。
例えば、下記のようなhtmlがあったとします。
<section class="main">
<div class="sub">
今日はいい天気だなあ。
</div>
</section>
上記内容において、.mainの中に書いた.subをCSSで指定したい時。
実はこの2つを繋げて書くことができるのです。
.main .sub{ 〜〜〜 }
こうして繋げて書くことができます。
上記の場合は、.subに対してcssで指定した効果が適応されます。
ただ、それだったら「.sub単体で書けばいいじゃん」と思うかもしれません。
単体で書いた時と、繋げて書いた時の大きな違いは「優先度」です。
.sub単体で書いたcssと .main .sub と親要素から書いたcssが重なった場合。
親要素(.main)から書くCSSが優先されます。
.sub{
color:#000;
}
.main .sub{
color:#fff;
}
上記の場合、.main .subで書いた#fff(白)が優先されます。
ぜひ、試してみてください。