しんく顔アイコン_小.jpg

No.5:CSSなんて怖くない

どうも、最近作業をするときはもっぱら「かもめ食堂」やら「マザーウォーター」をループ再生させている思考です。気付けばもうすぐファミリゲームフェスティバルです。
他のサークルさんの出展情報も増えてきましたねぇ〜。

ハイボールとビーフカツレツサンドイッチに想いをやや馳せながら(笑)、本題に入る前にお知らせを。

ファミリーゲームフェスティバル2016は、アナログゲームの販売及び体験を行うイベントです。
遊んだ事のあるゲームから初めて見るゲームまで、国内・海外から多くのゲームを集めました。
気になるゲームを体験するも良し、面白かったゲームを購入するも良し。未経験の子どもからコレクターの大人まで、誰もが楽しめるイベントです。
ファミリーゲームフェスティバル2016様Webサイトより引用

公式サイト >> http://www.fgamefestival.com/

居眠りの街 / AHC購入事前予約 >> こちらをクリック!!

5月17日〜6月17日までファミリゲームフェスティバルの購入事前予約を現在受け付け中。

 

はい、では本題。

 

いよいよ登場、CSS

前回、ざっくりと解説させていただいた<div>タグ。今回は、いよいよCSSを合体させていこうと思います。
説明が抜けていましたが、CSSは「Cascading Style Sheets」の略で、HTMLと組み合わせて使うことを前提とした言語です。
HTMLだけでは、ホームページを綺麗に見せるように設定(文字装飾やレイアウト整備、最近だとグラデーションなど)ができないので、CSSでそこを補って行きます。

前回記述したHTMLを再び書いてみることにしましょう。実際にCSSが入っていない状態だと、どういう風に表示されるかと言うと……。

画面表示

cssの無いhtml.png

HTMLコード
<div> 大きな箱(ブログ記事の外側と同じサイズ)
<div> 中くらいの箱(章立て:商品タイトル画像)</div>
<div> 中くらいの箱(章立て:探索者について)
<div> 小箱(探索者カードの紹介)</div>
<div> 小箱(プレイ動画)</div>
<div> 小箱(バックナンバー)</div>
</div>
<div> 中くらいの箱(章立て:当日取扱商品)</div>
</div>

ご覧の通り、<div>タグだけだと画面に表示される際は何の影響も及ぼしません。HTMLはあくまでも文章の構造を定義するものだから、ブラウザを通してもこのようになります。

では、ちゃんと可視できるようにしていきましょう。

HTMLタグには元となる効果(<div>タグの場合はグループ化)の他に、もっと詳細に設定を施すための「属性」というパラメーター群が存在します。例えば、フォントの大きさや背景の色を変更したり……。

属性の詳しい種類は、是非Google先生か書籍でご確認ください。

ゲムマブログで記事を書く&今回のお題であるHTMLとCSSを合体させるのに必要な属性は、ズバリ「style」です。

使い方は至って簡単<div>とタグを書いていたところを<div style=””>と書きます。「””」の中にCSSを書くことで、HTMLとCSSは無事に合体します。

前回の表記を一部、合体した状態で記述してみるとしましょう。

画面表示
大きな箱(ブログ記事の外側と同じサイズ)

HTMLコード
<div style="margin-left:auto;margin-right:auto;width:500px;padding:20px;
border:2px solid #f00;color:#f00;font-size:18px;" > 大きな箱(ブログ記事の外側と同じサイズ)</div>

HTMLコードを見て、後ずさってしまった人がいるかもしれません。落ち着いてください! 深呼吸です!!
………
……

大丈夫ですね? では、これを分解してみましょう。
プログラムと思わずに、英単語を使った命令だと思ってください。そしたら、こんなのまったく怖くありません。
「大きな箱(ブログ記事の外側と同じサイズ)」は以下の6つの命令により成り立ってます。

  1. margin-left:auto;とmargin-right:auto;
  2. width:500px;
  3. padding:20px;
  4. border:2px solid #f00;
  5. color:#f00;
  6. font-size:18px;

順不同になってしまいますが、1つずつCSSを追加しながら解説していきます。

◆ border:2px solid #f00;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)

HTMLコード
<div style="border:2px solid #f00;" > 大きな箱(ブログ記事の外側と同じサイズ)</div>
解説
「2px」の太さで線種「solid」の線を、「#f00」色で<div> タグに沿って表示する。

◆ width:500px;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)

HTMLコード
<div style="width:500px;border:2px solid #f00;" > 大きな箱(ブログ記事の外側と同じサイズ)</div>
解説
<div> タグの幅を「500px」と定義する

◆ padding:20px;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)

HTMLコード
<div style="padding:20px;width:500px;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの内部、上下左右を「20px」空ける

◆ font-size:18px;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)

HTMLコード
<div style="font-size:18px;padding:20px;width:500px;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの内部にある文字の大きさを「18px」にする

◆ color:#f00;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)

HTMLコード
<div style=" color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの内部にある文字の色を「#f00」とする

◆ margin-left:auto;とmargin-right:auto;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)

HTMLコード
<div style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの外側にある左右の空白を「auto」自動調節とし、<div> 要素を中央に表示する

CSSを書く際に優先順序はありません。なので、一番最初に書いた例題と違う順序で書いても効果を再現できます。

解説の「」部分は変更できる箇所です。線種などはブラウザ(Google chromeなど)によっては表現しないものがあります。ひとまずは、Google先生か書物を参考にしてみてください。

HTMLやCSSで指定できるカラーコード

HTMLやCSSではコーデ色を指定します。今回出てきている「#f00」がそれです。これはCSS専用に省略した形となっていて、実際は「#ff0000」となります。どちらの形式で記述しても表示される色は一緒ですので、ご安心を。
このコードはPCでイラストを描く人やオンデマンドなどの印刷サービスを活用されている人なら見覚えなる「RGB形式」と呼ばれるカラーコードです。

R(赤)G(緑)B(青)の色を16進数形式で指定して、3色が混ぜ合わさった色を表現します。

色に関しては、RGBではなく色名(「red」など)を指定することで表現できる色がHTMLの方で140色設定されています。また、どんなディスプレイでも見える色が変わらない「セーフティカラー」というのが216色存在します。

まぁ、まずはそんな事気にせずに試してみるのが良いかと思います。下記のURLは色名が定義されている140色の紹介ページとAdobeがウェブ上で公開しているカラーパレットサービスです。

  • [Web色見本 原色大辞典]http://www.colordic.org/
  • [Adobe Color CC]https://color.adobe.com/ja/create/color-wheel/

さて、今回はここまで。次回も引き続き<div> タグに定義するCSSを中心に書いていこうと思います。