では、今回からミッション形式に入っていきます。
毎回「これを作ってみましょう！」というミッションを出題します。
サンプルを再現できるようにコーディングしてみてください。
提供されるのは「必要なHTMLタグ」と「CSSプロパティ」です。
ミッションを達成するために、必要な情報をご提供いたします。
その情報を使って、ミッションを再現してみてください。
では、少しずつ、コーディングを実践していきましょう。
まずは下記の例通りに、コーディングしてみてください。
今回、必要なタグは、次の項目でご説明させて頂きます。
そちらを参考にしながら進めてみましょう。
もし、どうしても分からなければ、解答ファイルをダウンロードして中身を確認しましょう。
できるだけ回答を見ないように、MISSION1を再現できたら次に進んでみてください。
■ 解答ファイルのダウンロード
https://base91.net/mission/cording/1/mission1.zip
※ zipファイルって何？ どうやって開くの？
http://base91.net/zip-how-to-open/
今回活用しているHTMLとCSSは下記の通りです。
それぞれ、意味を考えながら、使ってみましょう。
今回必要なHTMLタグ
<header></header>
ヘッダー要素を意味します。
<h1></h1>
大見出しを意味します。
<h2></h2>
サブタイトルや各セクションごとのタイトルを作る時に使います。
なお、hタグはh6まで存在します。
hタグの使い方は「本のタイトル」や「小説の章ごとのタイトル」をイメージしてください。
本のメインタイトルがh1だとすれば、その中にある章ごとのタイトルがh2。
さらに章の中が項目ごとに分かれるのであれば、h3を使うイメージです。
どんどん中に入るほどhタグの数字が連番で増えます。
<section></section>
各セクションやブロックを意味します。
<div></div>
特に意味は固定されず「囲い」に使えます。
ただ、ブロック要素なのでインライン要素としては使えません。
インライン要素の中以外であれば、どこでも使えます。
HTMLにはインライン要素とブロック要素、2種類の型が存在します。
インライン要素とブロック要素の違いについてはこちらをご覧ください。
<p></p>
文章の段落を意味します。
<footer></footer>
フッターを意味します。
各タグにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/html/
インデント
なお、エディタでコードの先頭に余白をつけることがあります。
ソースコードを見やすくするための余白ですね。
これを、インデントと呼びます。
この余白は、スペースキーで開けているわけではありません。
大抵の場合「tabキー」で開けることができます。
ソースコードを見やすく整理したい時は、タブキーを押し、インデントを開けてみてください。
今回必要なCSSプロパティ
margin:10px;
要素の「外側」に余白を開けます。
※ 値は仮のものです。
background:#000;
背景に色をつけます。
※ 値は仮のものです。
text-align:center;
インライン要素を左右中央に寄せます。
※ 値は仮のものです。
padding-top:20px;
padding-bottom:20px;
要素の内側に余白を開けます。bottomやtopで方向を指定して余白を開けることができます。
横に余白を開けたいときはleftやrightを使います。
方向をつけない場合は、全方向に指定した値の数だけ余白が空きます。
※ 値は仮のものです。
color:#fff;
文字の色を変えます。
※ 値は仮のものです。
各プロパティにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/style/
デベロッパーツールを使おう
ブラウザには、それぞれ、表示したウェブサイトの「コード」を見るツールがあります。
さらに、パーツを指定して、その部分のCSSがどうなっているか確認したり出来ます。
基本的にデベロッパーツール、もしくは検証ツールと呼んだりします。
例えば、MISSION1のお手本について「paddingやmarginの大きさを調べたい」場合に使えます。
他のサイトを見て「どう作ってるんだろ？」と思った時も使えます。
自分が実現したいレイアウトに近いものを見つけて、参考にすることも出来ます。
さらに、デベロッパーツールには、様々なデバイスで確認できる機能もついています。
スマートフォンやタブレットでの表示で確認も可能です。
たとえ、たくさんデバイスを持っていなくても、レイアウトの崩れ等を確認できます。
詳しい使い方については、それぞれのブラウザで異なります。
お使いのブラウザのツールについて、Googleで検索してみてください。