CSSファイルの作り方
受講日：2025年03月31日
ファイルの作成手順
- Terapadを起動
- 文字コードをUTF8に設定：ファイル＞文字/改行コード指定保存＞UTF8N
- 名前をつけて保存：ファイル名に「style.css」と入力して保存。
リセットCSSの場合は「reset.css」
HTMLとCSSファイルの紐づけ
紐づけの3パターン
- HTMLファイルとは別に記述
別でCSSファイルを作って紐づける。これが1番メジャーな方法。
- HTMLファイル内に記述
文章とデザインデータは分けて書く事が推奨されるので、あまりおススメされていない。
- HTMLファイルのタグの中にインラインで記述
style属性で記述する。HTMLとCSSのゴチャつくので推奨されない。
ただ現場では応急処置的に使われている事がよくあるので、対面した時に分かるように、文法を理解しておく。
HTML ファイルとは別で記述する方法
<head>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
- link 要素
外部スタイルシートのスタイルシートファイルを表示する。
- href 属性=”ファイルパス“
相対パスで指定。ファイルの階層を指定する時は、「/」を指定する。
- rel 属性=”stylesheet“
外部スタイルシートファイルを指定。
index.htmlの<head>部分にCSSファイルとHTMLファイルを紐づけるコードを記入。
reset.cssは必ずstyle.cssより上に記述する。
紐づけができているかの確認方法
- chromeで検証ツールを使用する。
- headの中のstyle.cssを右クリックして、open in new tabをクリック。
- CSSのタブを開く事が出来ればOK。
CSSファイルの基本構造
1. 1行目で文字コードを指定する。
@charset "UTF-8";
2. リセットCSSを記述する。
自分なりのリセットCSSを持つようにする。リセットCSSは正解はなく、流行り廃りがあるので、いろんな形式がある。他人のCSSをコピペする手もあるが、自分で意味が分からないとリスクが生まれるので、自分なりのテンプレートを作る。
3. 2行目以降にスタイル指定を記述していく。
スタイル指定の記述方法
- まず最初に、必要なセレクタをすべて書き出してから、プロパティと値を記述する。
- デベロッパーツールでセレクタにプロパティや値をコピペしてプレビューしながらコーディング。
※単語は頭2文字だけ覚えておき、入力すると変換候補がでて来るので参考にする。
- デベロッパーツールで記入して、コピーしてhtmlファイルに上書き保存するというやり方もある。
セレクタ{
プロパティ:値;
}
例）pタグで囲ったコンテンツの文字の色を赤にしたい
上記だと、サイト上全部のpタグ箇所の文字が赤くなる。pタグの中でも、文字を赤くしたい部分と、そうじゃない部分がある場合、id属性とclass属性を利用する。idとclassはHTMLファイルに記述する。
p{
color:red;
}
CSSとHTMLファイルを紐づけるための属性
- CSSとHTMLを紐づけるための属性は、HTMLで指定する。
- 主にidとclassで指定する。
- CSSによるデザインにclass、スタイルには絡まないただの目印にidを使う。
| 属性 | 役割 |
|---|
| id=”” | HTML要素に一意な識別子を付与するために使用され、ページ内で一度だけ使用できる。主にJavaScriptで要素を操作する際やアンカーリンクの作成に利用される。 |
| class=”” | HTML要素に共通のスタイルや振る舞いを適用するために使用され、複数の要素に同じclass名を設定することができる。主にCSSでスタイルを適用する際に利用される |
クラス名の命名に出てくる単語
| クラス名 | 役割 |
|---|
| wrapper | メインコンテンツ等、全体の幅を揃えたい時に使う。 |
| container | wrapperはレイアウト的に囲い、containerは意味的に囲う。 |
| innner | sectionタグの1つ下の階層に入れる。max-widthやmargin・padding等を指定する事が多い。 |
CSS ボックスモデル
レイアウト系プロパティ
HTMLのブロックに対して、 余白や枠線などのレイアウトを設定するためのプロパティ。
- レイアウト系プロパティでは、キレイに隙間を作ってあげる。
- 文字・隙間・枠線・マージンの組み合わせでレイアウトを作る。
- 親子ごとにボックスができるので、両方を組み合わせて帳尻を合わせていく。
- 1個あればいい時はpaddingを使う。
- marginは相殺・中央配置など、使うときにクセがあって一工夫必要になる。
| プロパティ | 役割 |
|---|
| content | HTML要素の内容 |
| padding | HTMLの内容と枠線(ボーダ)の間の余白 |
| border | 枠線(表示・非表示に関わらず設定)大体1～2px |
| margin | ボーダと他のHTML要素との間の余白 |
marginの使い方
- マイナスマージンは、文字と画像を重ねたい時等に使用する。
- margin 0 auto：ボックスを中央配置したい時に使う。
レイアウト系プロパティのサイズ設定
| |
|---|
| position | 配置方法; |
| top: | 上からの位置; |
| bottom: | 下からの位置; |
| left: | 左からの位置; |
| right: | 右からの位置; |
- minとmaxはほとんど使わない。
- width-minは、コーポレートサイトのロゴとかを小さくしすぎないようにつかう事がある。
- max-heightは企業のお知らせを幅をする時に使用する。
プロパティ box-sizing
- 昔のサイトは、contentでサイズ・高さが指定されている。
- 現在はデフォルトでborder基準になっている。
- 昔はfloat、clearで幅を制御していたが、現在はflexboxを活用している。
- 古いサイト改修を請け負った時のために覚えておく。
CSS セレクタの記載方法
- 「どこに」場所の指定。
- ,(カンマ)で区切ってセレクタを指定すると、まとめて指定できる。
- CSS セレクタ チートシート
| セレクタ | 記述方法 | 役割 |
|---|
| 全称セレクタ | *{ プロパティ: 値; } | アスタリスク(*)で指定。すべての要素に適用するスタイルを指定できる。 |
| 型セレクタ | 要素名 { プロパティ: 値; } | HTMLの要素名(h1・pなど)で指定。要素名に合致する要素に適用するスタイルを指定できる。 |
| id セレクタ | id名 { プロパティ: 値; } | ハッシュ(#)を付けてid名を指定。id名に合致する要素に適用するスタイルを指定できる。 |
| class セレクタ | .class名 { プロパティ: 値; } | ピリオド(.)でclass名指定。class名に合致する要素に適用するスタイルを指定できる。 |
| 子孫結合子セレクタ | セレクタ セレクタ { プロパティ: 値; } | 複数のセレクタを区切りスペースで指定。指定要素の配下の要素にスタイルを指定できる。 |
| 子結合子セレクタ（>） | セレクタ > セレクタ { プロパティ: 値; } | 大なり(>)で区切って指定。指定要素の直下にある要素にスタイルを指定できる。 |
| 隣接兄弟結合子セレクタ（+） | セレクタ + セレクタ { プロパティ: 値; } | セレクタをプラス(+)で区切って指定。指定要素に隣接している要素にスタイルを指定できる。 |
| 一般兄弟結合子セレクタ（~） | セレクタ ~ セレクタ { プロパティ: 値; } | セレクタにチルダ(~)で区切って指定。指定要素に後続している要素にスタイルを指定できる。 |
CSS 得点計算
セレクタの種類と点数
- セレクタには得点計算があり、合計点数が高いものから優先的に適用される。
- 全称セレクタ(*)：得点が低いので、1番最初に記述する。
- style属性：特典が高すぎるので乱用禁止。1回しか使わない、納期が間に合わない時などの最終手段で使う。
- !important：style属性よりも使っちゃダメ。本当に最終手段。作ったサイトが!importantだらけだと、クライアントや同業者から信用してもらえないかも。
| セレクタの種類 | 記述例 | 点数 |
|---|
| 全般セレクタ | すべての要素に適用 | 0点 |
| 要素名 | h1 p div span table など | 1点 |
| 疑似要素 | ::before ::after など | 1点 |
| 疑似クラス | :hover :nth-child(1) など | 10点 |
| class | .main-text .box など | 10点 |
| id | #title #sub など | 100点 |
| style属性 | <div style=”font-size:140%;”> | 1000点 |
| !important | font-size: 140%!important; | 無敵 |
| セレクタの例 | 計算 | 合計点 |
|---|
| div#main p | 1(要素)+100(id)+1(要素) | 102点 |
| #main p.main-text | 100(id)+1(要素)+10(class) | 111点 |
| div#main p.main-text | 1(要素)+100(id)+1(要素)+10(class) | 112点 |
| div#main main p.main-text | 1(要素)+100(id)+1(要素)+1(要素)+10(class) | 113点 |
| table tr td.text | 1(要素)+1(要素)+1(要素)+10(class) | 13点 |
| h1 div span | 1(要素)+1(要素)+1(要素) | 3点 |
CSS 装飾
- px（ピクセル値）
- %（要素の割合（百分率））
- em（要素の割合）
- rem（ルート要素の割合）
- vw（画面の表示幅の割合）
- vh（画面の高さの割合）
- calc 関数（値の計算）
- カラーネーム
- #rgb（ハッシュ（#）で始まる 16 進数 3 桁）
- #rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
- #rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
- rgb(r,g,b)（rgb 関数）
- rgba(r,g,b,a)（rgba 関数）
- hsl(h,s,l)（hsl関数）
- hsla(h,s,l,a)（hsla関数）
- 線形グラデーション（linear-gradient 関数）
- 放射グラデーション（radial-gradient 関数）
グラデーションの位置は％で指定する。
16進数で色が作られるという仕組みだけ理解しておき、実際の配色は、欲しい色をカラーピッカーで取得したり、カラーリングはアドビカラーで組んでもらうなどして、カラーコードを張り付けるとスムーズ。クロームのデベロッパーツールで色の反映を簡易テストできるけど、元のファイルに書かなければ色を反映した事にならないので、間違えてファイルに書かないうちにクロームをリフレッシュしたりしないようにする。
CSS 装飾系プロパティ
とりあえず指定してどんな不風に反映されるか見ながら勉強していく。
| プロパティ | 役割 |
|---|
| background-color: 背景色; | 背景色を指定。 |
| background-attachment: 背景画像の位置; | 背景画像をスクロールするかどうかを指定。 |
| background-image: 背景画像ファイル; | 背景画像を指定。 |
| background-repeat: 背景画像の繰り返し; | 背景画像の繰り返しの仕方を指定。no-repeat
背景画像は1回だけの表示。 |
| background-size: 背景画像のサイズ; | 背景画像のサイズを指定。 |
| background-position: 背景画像の表示開始位置; | 背景画像の表示開始位置を指定。 |
一括指定もあるけど、他のサイズの個別指定が全て上書きされてしまうので、基本的に使わない。
| 種類 | 役割 |
|---|
| text | 文字 |
| text-decoration | 文字のライン |
| プロパティ | 役割 |
|---|
| color: 文字色; | 文字色を指定 |
| opacity: 透明度; | 要素の透明度を指定 |
| text-align: 配置位置; | ブロック要素内文字の配置位置や均等割付を指定 |
| text-shadow: （文字の影値）; | 文字に対して 1 つまたは複数の影を指定 |
フォントサイズは縦を指定する。line-heightで改行幅を指定できる。
| プロパティ | 役割 |
|---|
| font-family: フォントファミリー; | フォントの種類を指定。代替フォント指定も可能 |
| font-size: フォントサイズ; | フォントのサイズを指定 |
| font-weight: フォントの太さ; | フォントの太さを指定 |
| foline-height: 行の高さ; | 行の高さを指定 |
| white-space: 空白・改行の表示方法; | ソース中のホワイトスペース（連続する半角スペース・タブ）・改行の表示方法を指定。 |
- 絶対にフォントを固定したい場合は、「WEBフォント」を利用する。
- ただし、サイトの表示速度は重くなる可能性が高い。フォントの提供サイトで情報を読みに行ってから自分のサイトを表示するため。
- 「Google Fonts」が無料で使えるので推奨。フォント揺れがないので、クライアントに納品する時は、Google Fontsを使う方が間違いがない。大浜先生も最近はGoogle Fontsで納品している！
- 有料フォントはクライアントにもライセンスを購入してもらう必要がある。
- 高さは初期値のままが推奨。閲覧環境によって、テキストを1行で表示できるか、2行に及ぶのか異なる場合があるので、表示し切れない可能性がある。
- ボックスからあふれた内容の処理方法
- overflowを使うときは、overflow:autoを使用する。
実習日の課題 4月3日
受講日：2025年04月03日
【38日目】実習 4月3日にやった事
- リセットCSSファイルとHTMLファイルを紐づけした。
- CSSファイルにスタイルを記述した。
授業の感想
- 上手く反映されない箇所があり確認したら、半角スペースがない箇所と、間違えて改行している部分があった。2か所のミスで全体がメチャメチャになってしまったので、とんでもなく大変な世界だなと思った。
- HTMLで間違い探しをしている時は、HTMLファイルだけ確認すれば良いが、CSSファイルを書いてる時に間違い探しをする事になった場合、HTMLとCSSのどっちに間違いがあるかわからず、両方確認しなくてはならないので、より大変に感じた。
- CSSファイルの文字コードがUTF-8Nになっておらず、フォント指定が反映されていなかったので気を付ける。
実習日の課題 4月5日
受講日：2025年04月05日
【40日目】実習 4月5日にやった事
- 教わった内容が部分的な概念としてしか理解できておらず、頭の中で線にして繋げる事が出来なくなったきたので、一旦先に進めるのをやめて、今日は今まで習った内容を1からおさらいする事にした。
- 今日の実習では、HTMLファイルの作成～CSSファイルのセレクタの記入までを完了した。
- 今日はHTML全体の構成と、タグと属性の役割を改めて復習したので、続きからはCSSで、各構造にどんな装飾(色や余白の設定)を記載していくのかをおさらいする。
- ただ教科書を書き写すだけでなく、全体の構造と自分の現在位置、タグや属性の意味を把握しながら学習に取り組んでいきたい。
4月6日自習
- 4月5日の続きで今まで習った事のおさらい。
リセットCSSの作成～CSSのmainエリアまでの記述。(2時間)
- 教科書サイトでは、idはアンカーリンクの作成に使う(＝デザインには使わない)ので、セレクタとして書き出さない。
- セレクタの書き出しパターン：「class」「class 要素」「親class 子class 要素」。
- wrapperとかinnnerとかクラス名の命名ルールがいまいちよく分かっていなかったので、改めて確認できて良かった。
4月7日自習
- 4月6日の続きで今まで習った事のおさらい。CSSのファイル完成まで。（1時間半）
- 昨日上手く反映されず、確認しても原因がわからなかった箇所があったが、今日最初に確認したらすぐに原因が分かった。（前の行のプロパティのセミコロン忘れだった）行き詰った時は一旦休憩を挟み、切り替える事の大切を実感した。
- プロパティの意味は何とか理解できそうだが、paddingやmarginの指定サイズについて、初心者には、デザインカンプの時点で数値の検討をつけておくのが難しそうだと思った。慣れるまでは検証ツールで位置を確認しながら調整しないと厳しそうに思う。まずは画像データやアイコンのサイズ感を調整した後、文字調整、最後に余白の調整をする感じになるかと思った。
