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で行う場合は可読性の関係上、どこかでひとまとまりで指定すること。