こんにちは！トモです。今日はWeb制作コース初級編3日目の学習内容を備忘録として残していきます。
この記事を見ると次のことが確認できます。
もくじ
１．CSSを書くための基本設定
CSSファイル・画像ファイルの準備
まずはCSSを作成するところから以下の順序で始めます。
style.cssを作成するときは、VS Codeを開いて、左上の「ファイル」⇨「新しいテキストファイル」⇨「名前をつけて保存」⇨ファイル名に「style」を入力、ファイルの種類(Format:)は「CSS」を選択するのがよいです。
2.「img」フォルダを作成する
3.「img」フォルダに何でもいいので好きな画像を入れる
4.画像の名前を「test.png」に変える
フォルダ構成は下記の通りです。
practice
┣ index.html
┣ css
┃ ┗ style.css
┗ img
┗ test.pngCSSファイルを読み込む
ファイルが準備できたら、HTMLからCSSファイルを読み込むための設定を行います。
まずは以下のコードをコピーして、index.htmlに貼り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSの練習</title>
<!-- ここでstyle.cssを読み込みます -->
</head>
<body>
<!-- ここにHTMLを書いていきます -->
</body>
</html>次に作成したCSSファイルを読み込むように、index.htmlの<head>内に以下のコードを追加します。
linkタグは、HTMLファイルと他の文書ファイル（CSSファイルなど）を結びつけるタグです。
<link rel="stylesheet" href="./css/style.css">rel="stylesheet"は、hrefで指定したファイルがスタイルシートであることを宣言し、href="./css/style.css"はファイルの場所を宣言してます。これでHTMLファイルからCSSファイルを読み込む準備ができた状態になります。
絶対パスと相対パスとは？
CSSファイルの指定で使ったhref="./css/style.css"は、正確にはファイルパスを指定しています。
ファイルパスの指定法には「絶対パス」と「相対パス」の2種類があります。
「./css/style.css」は相対パスの書き方になり、「./」は「このファイルが置いてあるのと同じ階層の～」ということを意味します。
「一つ上の階層の～」と指定するときの書き方は「../」になります。
「./css/style.css」と同じファイルを絶対パスで指定すると、例では以下のようになります。
CSSファイルは相対パスで指定するのが一般的のようです。※絶対パスでの指定も可能です。
しかし、絶対パスの場合、作業フォルダを動かしたときやサーバーにアップしたときなどにパスがズレてリンクが切れてしまう為、相対パスの使用が推奨されるようです。
先程のindex.htmlに書いた「href="./css/style.css"」の例では、index.htmlファイルと同じ階層にある、cssフォルダの中の、style.cssというファイルを読み込むということを意味します。
２．CSSの基本ルール①：セレクタ・プロパティ・バリュー
CSSはセレクタ・プロパティ・バリューという三つの要素から成り立ち、これが基本中の基本となります。以下は、実際のCSSファイル書き込み例になります。
h2 { color: red; }記述のそれぞれの意味は以下の通りです。
h2：要素を指定（セレクタ） ※要素とはそのタグで囲まれた範囲を意味します。
color：スタイルの種類（プロパティ）
red：プロパティに実行して欲しい具体的な内容（バリュー）
よって、<h2></h2>で囲まれた範囲の（セレクタ）のcolorを（プロパティ）をredにする（バリュー）」と定義しているのが上のコードの意味となります。
文字の色・大きさを変えてみる
指定した要素の文字の色と大きさを変えていきます。
それぞれを設定するプロパティは下記の通りです。
これを使ってHTMLのh2要素・h3要素の文字の色と大きさを変更してみます。
先ほどコピペしたコードのbody部分に書き込んでいきます。
<h2>これはh2です。</h2>
<h3>これはh3です。</h3>h2 {
color: red;
font-size: 30px;
}
h3 {
color: blue;
font-size: 20px;
}尚、font-sizeの値を指定するときに使用しているpx（ピクセル）は文字フォントの大きさをあらわす単位となります。
３．CSSの基本ルール②：名前（class）で指定する
CSSでは特定の箇所にだけスタイルを適用する方法、classがあります。
特定の箇所だけスタイルを適用する場合は、HTMLのclass属性を利用します。
<h2>赤色のH2</h2>
<h2 class="yellow-font">黄色のH2</h2>/* h2の文字色をまとめて赤に指定 */
h2 {
color: red;
}
/* .yellow-fontがついた要素の文字色を黄色に指定。こちらの方が優先されます */
.yellow-font {
color: yellow;
font-size: 20px;
}ここではclass="yellow-font"の部分でclassを指定しています。
そしてyellow-fontクラスのスタイルを変更するために.yellow-font{ }
という書き方をしています。このように特定の箇所のスタイルを変更する場合はclassを活用します。
class名 important をつけた要素だけ太字にする
ここではclassが”important”となっている要素のフォントを太字にします。他にもh2.importantのようにタグ＋クラス名で指定したり、id属性を使って指定する方法もあります。まずはclassで指定する方法を覚えておけば問題ないとのことなので、セレクタの当て方のパターンは実践の中で学んでいきます。太字にするときは、font-weightプロパティのバリューをboldにします。
<p class="important">タイトル</p>.important {
font-weight: bold;
}４．CSSの基本ルール③：子孫要素を指定する
ここまで要素を指定する二つの方法を見てきました。
- セレクタで要素名を指定する（例：h2）…指定した要素
- セレクタでclass名を指定する（例：.important）…そのclassがついた要素
さらに詳細な指定方法として、子孫要素を指定する方法があります。
子孫要素とは、ある要素の内部に書かれている要素のことです。
実際に見てみます。
<article class="contents">
<p>子孫となるpです。</p>
<p>子孫となるpです。</p>
</article>この場合、article要素の中のp要素が子孫要素になります。
そして子孫要素を指定するセレクタを子孫セレクタと言います。
上のソースでarticle内のp要素を指定するとき、セレクタは下記のように書きます。
.contents p {
font-size: 18px;
}このように、親要素 子要素 { }と、半角スペースを空けて子孫要素を指定していくのが子孫セレクタの書き方になります。
直属の子孫要素だけを指定する
先ほどの書き方ではcontentsクラスの中にある段落の文字の大きさは全て18pxになるのですが、子孫要素の中でも「直属の子孫」だけを指定する書き方もできます。
<div class="contents">
<p>このpの色だけ変えたい</p>
<div>
<p>ここは変えない</p>
<p>ここも変えない</p>
</div>
</div>/* 誤：「.contents p」指定では全てのpタグの色が変わってしまう */
.contents p {
color: red;
}
/* 正：「>」で繋げることで直属の子孫要素のみを指定できます */
.contents > p {
color: red;
}下のパターンで書けばcontentsクラスの中にあるp要素だけが赤字になります。
このように「 >」で繋げて書くことで、直属の子孫要素だけを指定することができます。
５．CSSの基本ルール④：ボックスレイアウトとは
HTML要素（<div>、<span>など）は、それぞれ四角い領域＝ボックスとして存在しています。Webサイトはたくさんのボックス（箱）が敷き詰められて構成されています。
こうしたボックスによって敷き詰められたレイアウトのことをボックスレイアウトといいます。
ボックスが具体的にどんな形をしているのかを以下に記載します。
ボックスは一つの要素に対して四つの区分があります。
それは、コンテンツエリア・padding・border・marginです。
- コンテンツエリア…内容が表示される部分
- padding…要素の中に割り当てられている余白
- border…要素の境界
- margin…隣接する要素との余白
<div>～</div>という一つの要素は、実はこの四つの要素を含んだボックスになっています。
これが少しややこしいところで、余白の中にも種類があります。
表示部分の内部にあるpaddingと、隣接する要素との間にあるmarginです。
どっちがどっちか分からなくなる場合、英語の意味からイメージすると分かりやすいです。
paddingは「詰め物をすること、芯(しん)を入れること、芯、詰め物、(新聞・雑誌などの)埋めくさ、不必要な挿入句」という意味。つまり、詰め物だから内側。
marginは「【商業】 元値と売り値の開き，利ざや，マージン」という意味。余った感じだから外側。
- padding 詰め物＝内側の余白
- margin 利ざや（余り物）＝外側の余白
paddingとmarginは今後もよく使う為、区別できるようにしておきます。
６．主要なCSSプロパティを実際に使ってみる
よく使うCSSプロパティは以下の通りです。
often-use-css-propertiesここからはプロパティの使い方について、動画の説明がありましたので、要約のみ記載致します。(コースのお申込み後に視聴可能な動画には、より詳しい説明がされています)
初級編DAY03_0開発者ツールの使い方
この動画では、CSSプロパティの使い方について説明しています。まず、現在開いているHTMLファイル「index.html」の内容を確認し、シンプルな構造で「Hello World」と表示されていることを説明しています。次に、CSSプロパティの効果を直感的に確認するために、Google Chromeの開発者ツールを使う方法を紹介しています。開発者ツールを使うと、HTMLとCSSの状態を確認しながら、CSSプロパティを編集して即座にその変化を確認できるため、CSSプロパティの動作を理解しやすくなると述べています。
初級編DAY03_1font
この動画では、CSSを使用したウェブデザインの基本について説明が行われました。Unknown Speakerは、フォントサイズ、フォントの太さ、色、フォントファミリーの変更方法について詳細に解説しました。特に、フォントサイズの指定方法として、ピクセル（例：100px）、パーセンテージ（例：200%）、EM（例：2em）の3つの方法が説明されました。また、フォントの太さについては、ノーマルとボールドの2種類が紹介され、色の指定方法としてカラーコードの使用方法も説明されました。最後に、フォントファミリーの指定方法と、ブラウザや環境によるフォントの適用についても言及されました。
★初級編DAY03_2ボックス
この動画では、CSSのボックスプロパティについて詳しく説明されています。具体的には、widthとheightを使って要素の幅と高さを指定する方法、paddingを使って内側の余白を設定する方法、borderを使って枠線を追加する方法、marginを使って外側の余白を設定する方法、そしてbox-sizingプロパティを使ってボックスのサイズをどのように計算するかについて説明されています。各プロパティの使い方と指定方法が丁寧に解説されており、実際にブラウザの開発者ツールを使って確認しながら進められています。
★初級編DAY03_3テキスト
この動画では、CSSのテキストに関連するプロパティについて説明しています。具体的には、行の高さを指定するline-height、テキストの水平位置を調整するtext-align、テキストの垂直位置を調整するvertical-align、テキストの装飾を行うtext-decoration、文字間隔を調整するletter-spacingなどのプロパティについて解説しています。各プロパティの使い方と効果を実際のコード例を用いて詳しく説明しており、CSSでテキストのスタイリングを行う上で重要なポイントが含まれています。
★初級編DAY03_4背景
この動画では、Webページの背景設定について詳しく説明されています。背景色の指定方法、画像を背景に設定する方法、画像の表示サイズや繰り返し表示の設定方法、スクロール時の背景画像の動作設定など、さまざまな背景設定の方法が順を追って説明されています。実際のコード例も示されており、理解を深めるのに役立っています。背景設定は、Webページのデザインにおいて重要な要素の一つであり、この動画はその設定方法を包括的に解説しています。
★初級編DAY03_5横並びfloat
この動画では、HTMLでの横並びの実装方法について説明されました。まず、フロートを使って要素を横に並べる方法が説明されました。次に、フロートを解除するためのクリアプロパティの使い方が示されました。最後に、フレックスボックスなどの新しい手法が紹介され、次の動画でそれらを学ぶことが提案されました。
★初級編DAY03_6自由な位置指定
この動画では、CSSのフレックスボックスレイアウトについて詳しく説明されました。フレックスボックスは要素の配置を自由に指定できるプロパティで、横方向や縦方向の配置、間隔の調整、折り返しの指定など、様々な機能があることが説明されました。フレックスボックスを使うと、レイアウトをより柔軟に制御できるため、CSSを書く際に非常に便利なツールとなることがわかりました。
★初級編DAY03_7その他の位置指定
この動画では、CSSのポジションプロパティについて詳しく説明されています。フィックス、レラティブ、アブソリュートの3つの値の使い方と、それぞれの効果が解説されています。また、z-indexプロパティを使って要素の重なり順を制御する方法についても触れられています。CSSのレイアウト設計において重要な概念が丁寧に説明されており、実践を通じて理解を深めることができます。
以上、Web制作コース初級編3日目の内容はCSSの基本でした。
2.そのフォルダに「css」フォルダを作成する
3.cssフォルダに「style.css」ファイルを作成する