CSSとは
HTMLに対して飾りつけを行うもの。
HTML内でCSSを使う方法
〇方法１_HTML内にcssファイルを外部ファイルとして読み込む方法
一般的にHTML側の<head>タグ内に<link>タグを配置して指定し使う。
HTML
<head>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<p class="group_01">testの文章です。</p>
</body>
CSS
.group_01{
color : red;
}
〇方法２_要素のタグ内でstyle属性を指定し、直接変更する。
そのページのその箇所しか変更しないならいいが、あまり使わない。
<p style="font-size: 20px; color: red;">testの文章</p>
CSSの書き方
〇セレクタ
どこに対して、行うか指定。
<p>といったタグ名を直接指定する事もあるが、これだと該当する<p>全てに適用されてしまうため、基本的には、HTML側でid名やclass名をつけて指定する事で運用する。
〇プロパティ
HTMLにおける属性のようなもの。colorやbackgroud-colorなど、何に関する内容を変化させるか指定する箇所
セレクタ {
プロパティ: 具体的な値;
}
idとclassの違いと指定方法について
class属性は1ページに何度でも使用できるのに対し、id属性は1ページに1度しか使ってはいけない。idを複数回書く事もでき、エラーもないが、文法上の間違いとなるため要注意。
指定時には、id名の前に#、class名の前に.とつける必要がある。何もつけないの基本タグを使う時だけなので実質ない。
〇サンプルコード
HTML
<h1>こんにちは</h1>
<p class="red">私の名前は田中太郎です</p>
<h1>こんにちは</h1>
<p class="blue">私の名前は田中次郎です</p>
<p id="green">よろしくお願いします</p>
CSS
h1 {
color: orange;
}
.red {
color: red;
}
.blue {
color: blue;
}
#green {
color: green;
}
プロパティ
colorやbackground-color
※参考サイト、めちゃくちゃ有用なので要確認
display
「display」というのはプロパティの1つで、要素の表示形式を決める。複数の要素をそれぞれ調整する事で、横一列に並べたり調整できる。各タグにはdisplayの初期値が設定されている。下記以外にも何種類か存在し、別のブラウザの場合など初期値が異なるケースがあるため注意。
・block
要素が横に広がった状態で、縦に並ぶ
デフォルト値
div、p、h1～h6、ul、ol、form、body等
・inline
要素が平べったく横に並ぶ
デフォルト値
a、span、img等
・inline-block
並びはinline的、中身はblock的な動き
デフォルト値
input、textarea、select
・none
非表示となる。レスポンシブデザイン(スマホやPCのような端末によって表示の切り替えができるデザイン)をする際に、PC側では表示してスマホ側では非表示にする時などに使える。
・flex
フレックスボックスはレイアウトを適用させたい子要素の「要素」と、それらをラップする親要素の「コンテナ」から構成される。コンテナに対して display:flex を指定することで、中の要素にレイアウトを適用させることが可能となる。必ず並べた要素の親要素に対してクラス設定をして設定すること。
※参考サイト
レスポンシブデザイン
デバイスの画面サイズに合わせてサイト表示を最適化する手法。HTMLのwidthにはデバイスの横サイズが入っているが、widthのサイズによって表示するデザインを変更する事により、PC・スマホといった端末毎の見た目に変更する感じ。
※参考サイト
font
フォント指定を行うcssで行う場合は可読性の関係上、どこかでひとまとまりで指定すること。