CSS入門続き

アジェンダ

  • 復習(HTMLとフォルダのつくり方)
  • CSS入門リベンジ

復習

やること

HTMLのフォルダを作って、画像を表示するところまで

復習できること

  • フォルダについて
  • リンクについて
  • Atomについて

演習

次のスクリーンショットのようなフォルダを作成し、画像を表示してみてください。 なお、フォルダ名はスクリーンショットに従ってください。 また、どんな画像でもいいので、最低1枚はimagesフォルダに入れてください。

f:id:dorak:20160920181905p:plain

※リンクについて復習

基準となるファイルから見て、表示したい(読み込みたい)ファイルがどこにあるかを機械に教えるためのもの。

参考図: f:id:dorak:20160920182832j:plain

この参考図みたいな感じです。 で、復習ですが、 下に下がるのはスラッシュ(/)、上に上がるのは(../)でしたね。 では、ぷち演習します。存分に上の参考図を参考にしてください。

  • index.htmlからassetsまでのリンクを書いてください。
  • index.htmlから画像までのリンクを書いてください。
  • index.htmlからapp.cssまでのリンクを書いてください。
  • app.cssから画像までのリンクを書いてください。

書いたら、上記3点の答えをsy_tanaka@vivivit.co.jp宛に送ってください。 答えを記載して送ります。件名とか本文とかはなくても大丈夫です。 ヒント: 2つ目の答えはassets/images/名前.jpgです。

CSSとは

Cascading Style Sheetの略。 HTMLで作られた文章を装飾するためのもの。

CSSの書き方

color: red;

つまり

何を: どのように変えるか;

と書きます。 上記は、color(文字色を): red(赤く); という意味です。

覚える必要があるのは、この「何を」の部分です。

さて、それでは、論より証拠で実際にCSSとHTMLを使ってボタンを作ってみましょう。 完成形はこちら。

f:id:dorak:20160920185250p:plain

さて、これをどうやって実現していけばいいでしょうか。 まず分解してみましょう。 このボタンは、「ボタン」という1つのテキストから出来ています。 それをCSSでデザインするだけです。

では、分解開始します。 1. 「ボタン」の背景色を赤くする 2. 文字の色を白にする 3. ボタンの幅を指定する 4. 角を丸くする 5. 文字を中央寄せにする 6. 文字と背景の上下に余白を入れる

概ね、この6ステップで完了します。 では、実際に書いていきましょう。

  • 「ボタン」の背景色を赤くする <p style="background: red;"></p>

赤くなりましたか?

  • 文字の色を白にする 背景が赤だと、文字が黒では見にくいです。文字を白にしましょう。 <p style="background: red; color: white;">ボタン</p>

  • ボタンの幅を指定する さて、ここまでやったところで背景に色がついて文字は白くなりましたが、背景がビヨーンと伸びてボタンっぽくありません。 ボタンっぽくするには、ボタンっぽい幅にしてあげる必要があります。 <p style="background: red; color: white; width: 100px;">ボタン</p>

どうでしょう、ちょっとボタンっぽくなってきたのではないでしょうか。一応おさらいしておくと、backgroundが背景、colorが文字色、widthが幅です。英語辞書で調べるとそのままの意味が出てきます。

  • 角を丸くする ボタンっぽくなってきましたが、まだカクカクしてますね。 いわゆる角丸を適応しましょう。 <p style="background: red; color: white; width: 100px; border-radius: 8px;">ボタン</p>

はい、結構ボタンっぽくなりました。border-radiusは角丸を達成するための命令で、角の半径を入力すればいい感じに角丸になります。ここでは8pxとしていますが、好みの角丸で大丈夫です。

  • 文字を中央寄せにする 文字が中央によってないので変な感じですね。これは一発で解消出来ます。 <p style="background: red; color: white; width: 100px; border-radius: 8px; text-align: center;">ボタン</p> です。 text-alignは文字の揃えを指定するための命令です。テキストアラインと読みましょう。centerは中央です。 Photoshopとかで言うとコレですね。

f:id:dorak:20160512133211p:plain

  • 文字と背景の上下に余白を入れる もうだいぶいい感じですが、デザイン的に追い込んでみましょう。 ボタンの余白を設定します。 <p style="background: red; color: white; width: 100px; border-radius: 8px; text-align: center; padding: 8px 0 8px 0;">ボタン</p>

上下に余白を足しました。 paddingが余白命令です。書き方として、8px 0 8px 0となってますが、paddingは上下左右に余白を設定できます。指定方法は、時計回りです。上、右、下、左です。↑、→、↓、←です。つまり、8px 0 8px 0だと、↑8px, →0px, ↓8px, ←0px という意味です。

はい、いい感じですね。

広告を非表示にする