KAT no.4 CSSとDevelopperツール
大学の後期課題も提出し終わって一安心です。(´▽｀) 大学生の春休みは長いので、何をするか迷いますね。
そして、前回のKATから日にちが大分空いてしまいましたが、今回からCSSの勉強に入りました！
＊CSSとは？
前回まで行っていたHTMLは、ページの中身を作るための作業です。→現場をイメージ
一方、CSSはHTMLに記述されたモノの全体のスタイル、デザインを決めるためのプログラミング言語です。→設計をイメージ
CSSでは、HTMLのコード１つ１つにフォントサイズやカラーなどのデザインを施すより、効率的に、そして統一感を持たせることができます。つまり、CSSがあった方が早くて楽なんですよね。
また、CSSは
p {
color: green;
}
p：どれを（要素＝セレクタ） color：何を（プロパティ）
green：どういう風に（値） という形で記述します。
※ :（コロン）と ;（セミコロン）を忘れない！
＊実践
まずは、HTMLの<head>タグ内に
<link rel="stylesheet" type="text/css" href="./style.css" /> と記入します。
これを記入することで、記入したHTMLファイルにstyle.css（ファイル名）が適用されるようになります。
そして、HTMLファイルの<body>タグ内には下記のように記述！※まとまりがわかるように、要素ごとに分けて記述する。
<div>
<h1>タイトル</h1>
<p>文章</p>
</div>
<div class="main">
<h1>タイトル</h1>
<h2>見出し</h2>
<p>文章</p>
</div>
次に、style.cssには下記のように記述。
h1 {
color: red;
}
h2 {
color: blue;
font-size: 20px;
}
p {
color: green;
}
これにより、h1は赤文字、h2は青文字でフォントサイズが20px、pは緑文字に変化します。
また、同じ要素（セレクタ）でも違うスタイルにしたい場合は、classを指定します。
HTML
<div class="navigation">
<h1>タイトル</h1>
<p>文章</p>
</div>
<div class="main">
<h1>タイトル</h1>
<h2>見出し</h2>
<p>文章</p>
</div>
div.navigation {
text-align: center;
}
div.main {
text-align: right;
}
よって、navigationという名の要素は真ん中に配置、mainという名の要素は右側に配置されます。つまり、classを指定することで、より細かいデザインができるようになります。
＊レイアウト
記述されたコンテンツにはmargin、border、paddingという3つの層があります。CSSではこれらの層を変える、指定することでコンテンツのレイアウトを変更することができます。
私の中では、borderは枠線、marginは枠線の外の余白を変更、paddingは枠線の中の余白を変更、というイメージを持っています。
＊Google Developper ツール
Google Developper ツールを活用して、福岡大学商学部のサイト（商学科 【福岡大学商学部 】）を変更してみました。
＝変更前＝
＝変更後＝
・line-height: 137.5% → 200% ・padding-left: 0px → 50px
・font-weight: bold → normal に変更しました。
＝変更前＝
＝変更後＝
・font-size: 200% → 60px ・margin-bottom: 10px → 100px
・color: #fff → black ・text-aligin: center → right に変更。
少し変更しただけでも、バランスや目立ち方が変わりますね。
？調べたこと？
・inline-block
→インラインブロック要素。インライン要素のように横並びに配置ができて、ブロック要素のように幅や高さ、余白の指定ができる。
・line-height
→行の高さを指定する。テキストの行間を設定するときに使用。
・vertical-align
→行の中で、テキストや画像などの縦方向（垂直方向）の配置を指定する。baseline、top、middleなどがある。
＊感想
CSSを適用させたことで、デザインの自由度が高くなった感じがします。また、どういう意味なのかな、なんか似ているなと思うコードも出てきたので、意味を理解しながら進めていきたいです。
おわり
