インターン10日目

みなさまこんにちは!ハシバです。

本日もポートフォリョサイトコーディングを行いました。だいぶ形はできてきました!!あとは細かい調整、jQueryを導入して動きをつけていきます。レスポンシブ対応、Wordpress導入などやりたいこともあるのですが、ひとまず完成を目指します。

本日は初心者の方向けにCSSの基礎について書いていきます。

CSS

CSSとは・・Cascading Style Sheets(カスケーディング・スタイル・シート)の略語です。そう言われてもよくわからないですよね、、先日HTMLの説明を少しさせていただきましたが、HTMLと組み合わせて使用する言語です。

役割

CSSの役割はHTMLで作った骨組みを見やすく、見栄えよくすることです。
具体的に言うと文字の色、サイズを変えたりレイアウトをしたりとCSSを使用するとさまざまなことができます。

準備

まずHTMLと別にCSSのファイルを制作します。

HTMLは拡張子が.html
CSSは拡張子.CSS です。

次にHTMLにCSSを適応させます。

<link rel="stylesheet" type="text/css" href="ファイル名.css">

こちらの文をhtmlファイル内の<head></head>の中に記入しましょう。これで適応は完了です。

やってみる

では実際にコードを書いていきましょう!

<body>

<h1>はじめてのCSS</h1>
<p>色が変わります。</p>

</body>

まずHTMLの<body>内に簡単なテキストを入力します。(<h1>は見出し<p>は文という意味です。)

このまま表示してみると・・・・・

次にCSSを書いてHTMLに適応させていきます。CSSの書き方はとてもシンプルです。わかりやすいよう日本語で書いてみました。

何を{どのように:どのくらい}

何をの部分をセレクタ、どのようにの部分をプロパティ、どのくらいの部分をといいます。

プロパティと値は{}で囲まないと適応されないので、忘れなくつける習慣をつけましょう。

これをCSSで書いてみると

h1{ font-size:18px; } 

p{ font-size:36px;
  color:#C00; }

h1(セレクタ)の文字サイズ(プロパティ)を18px(値)となるよう記入しました。

p(セレクタ)の文字サイズ(プロパティ)36px(値)、文字カラー(プロパティ)をC00(値)となるよう記入しました。

CSSの色の指定方法は#と0からFまでの16進数で指定します。

16進数が気になる方はこちらの説明がとてもわかりやすいので、見てみてください。↓↓

16進数のカラーコードより色を推測するメソッド(カラーコードの仕組みについて) 

 

少し脱線しましたが、実際に表示してみましょう!

文字サイズと文字の色が変わりました!色が入るとイメージがらっと変わりますね!!

もし変わらない場合はHTMLにCSSが適応されているか、{}は閉じてあるか、など見直しをしてみてください。

まとめ

今回は簡単な例で説明されていただきました。HTML同様、CSSも覚えることが多いです。まずは基礎をしっかり固めて作りたいサイトにチャレンジしていきましょう!!

ブログバナーのいくつか制作したので、上げときます!!

ベンチャー企業をイメージして制作

ロゴとフォントで遊び心を表現

また制作した作品上げていきます!!