注意事項
かならず読んでください
メニューからも確認できます
さて今回からデザインのお勉強
CSSに関しましてはやり込むと切りがないので重要なことと「Bootstrap」という超便利にデザインが出来てしまうツールの基礎をやります
まずは普通にCSSから
事前準備をする
lessonフォルダに「style.css」を追加してください
ここにCSSを記述していきます
そしてheadタグにこちらを記述
新しくhtmlファイルを作ってみましょう
ファイル名は何でもいいですが僕は「lesson_css.html」とします
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" >
<title>CSSを使う</title>
</head>
<body>
</body>
</html><link rel="stylesheet" href="style.css" >
これはstyle.cssを使います！という宣言
まずはHTMLを記述する
今回のコードはこんな感じ
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" >
<title>CSSを使う</title>
</head>
<body>
<h1>HeaderText</h1>
<p>ここは黒い文字だけど<span class='textRed'>ここは赤い文字にした</span></p>
<div class='textGreen'>
<p>ここはすべてが緑の文字</p>
<p>もちろんここも</p>
</div>
</body>
</html>さて新しいものが出てきましたね
class=’ ’について学びましょう
classとはそのタグにつける目印みたいなものです
その目印を対象としてデザインを指示していきます
classを使わなくても<h1>の文字色を青にして！って指示も出来ますがすべての<h1>の色が変わってしまいます
この部分の<h1>だけを変えたい！などど感じたときは対象の<h1>にクラスをつけてあげてください
CSSを書いていく
とりあえず書きます
先程作ったstyle.cssに記述します
body{
background-color: gray;
}
h1 {
color: blue;
}
.textRed{
color: red;
}
.textGreen {
color: green;
}さて保存して実行してください
このように成りましたか？
さて解説
まず
h1{ }と.textRed{ }の違いですが
タグそのものを指定する場合はタグ名をいきなり書きます
クラスを指定する場合は「.クラス名」になります
CSSの記述は{ }の中に書いていきます
何を: どうするか;
という風に書いていきます
.textRedを見てください
color: red;
これは「色を: 赤色にする;」
という感じ
background-colorは背景色ですね
他に代表的なものを体験しましょう
.textRedにこちらを追加
.textRed{
color: red;
font-size: 50px;
text-align: center;
}保存して実行してみましょう
クラスはまとめて変更できる便利な存在
さてCSSに触れて見ましたが今度はHTMLのclassにも着目しましょう
classとCSSはズブズブの癒着関係にありますのでしっかりポイントを抑えます
HTMLのファイルを見たらclass=”textGreen”という部分がありますよね？
ここをclass=”textRed”に変えて実行してみてください
すると先程の緑色の文字は消えtextRedのCSSが反映されています
Classは同じCSSをしたいものを同じ名前で登録してあげると便利です
例えば下記のような文面があったとしましょう
ここではイメージを掴むためなので書かなくてもOKです
<p>プログラマは姿勢が命</p>
<p>どれだけ技術があっても腰を潰せばそれで終わり</p>
<p>腰に優しい椅子や３０分に１回休憩を挟んで体を動かしましょう！</p>重要な部分だけを赤文字にしようと思った時に
<p>プログラマは<span class='warning'>姿勢</span>が命</p>
<p>どれだけ技術があっても<span class='warning'>腰を潰せばそれで終わり</span></p>
<p>腰に優しい椅子や<span class='warning'>３０分に１回休憩</span>を挟んで体を動かしましょう！</p>こうしてCSSを
.warning{
color: red;
}こうすればclass=’warning’の部分がすべて赤文字になります
このような感じでCSSを扱って行きましょう
領域の余白を確保する
要素との余白、または要素内の余白について学びます
そこで出てくるのが
- margin
- padding
の２つです
まずはこういうコードを書いてみましょう
<body>
<span class="red">Sampletext</span>
<span class="green">Sampletext</span>
<span class="blue">Sampletext</span>
</body>.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}さて実行してみてください
各span要素に色をもたせました
ここに余白を設定してみましょう
.greenに下記のコードを
.green{
background-color: green;
margin: 20px;
}
実行してください
緑の要素が両端の要素に対して余白を持ったのがわかりましたか？
marginは要素に余白をもたせる効果があります
続いてmarginを消してこのコードを追記
.green{
background-color: green;
padding: 20px;
}
実行してください
今度は要素に余白ではなく、「要素内」に余白をもたせました
この２つはデザインする時に割と使います
もしも何も変更がかからなかったら一度ソースコードを見直してください
それでもおかしいときはコメントをください
CSSの優先順位
実は優先順位があります
例えば
h1{
color: red;
}
h1{
color: blue;
}こう書いたとしましょう
すると反映されるのは下に書いた方です
上から順に処理を行うので最後に書いた処理で上書きされてしまいます
でもこうすると
h1{
color: red !important;
}
h1{
color: blue;
}
上が反映されます
!importantは最優先で反映させてくれます
最後に
CSSをのチートシートはこちらを参照
https://www.tagindex.com/stylesheet/properties/
ちなみにcolor: red;はカラーコードでも指定出来ます
redの部分を#ff69b4にしてみてください
カラーコードはこちらから確認できます