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