見出し画像
Photo by noouchi

IT未経験アラサーの学習記録～HTML & CSS CSS編～

K

こんにちは。Kです。
前回の記事に引き続き、フロントエンドを学んでいこうと思います。今回はCSSです！

使用教材

progate （オンライン学習サービス）
インターネット環境と PC があれば、ブラウザ上でハンズオン学習ができます。
道場レッスンは非常にやりごたえがありました。仕様書を確認しながら、ボタンの動きなどもつけたWebページを作成する内容です。学習レッスンの内容を忘れてしまっていても、自分で調べながらコードを書く練習になりました。
私の場合は集中して短期間で学習を完了するつもりなので、1か月プランを契約しています。

これから学ぶ HTML & CSS（齊藤 新三 氏著／山田 祥寛 氏監修）
kindle unlimited の対象です。サマーキャンペーンで今なら2か月間の利用料は99円！

学習方法

① progate 学習レッスン初級・中級の実施
② progate 道場レッスン初級・中級の実施
（レスポンシブデザイン・フレックスボックスの内容は割愛）
③書籍（これから学ぶ HTML & CSS）を読む【現在学習中】
④書籍中のコードをハンズオンで確認
⑤ 新しい知識、教科書外で調べた内容をnoteにまとめる。必要があれば、Lucidchartで図を作成する。

学習環境

・Google Chrome
・VSCode
独学エンジニア（山浦 清透 氏運営オンライン学習サービス）
　PART 2 レッスン 2 を参考に、環境を整えています。

記事執筆時筆者ITスキル

AWS CLF-01、AWS SAA-03取得済み。
Web技術・ネットワーク・セキュリティ・クラウドの知識について「イラスト図解式　この一冊で～」シリーズを1周読みました。
Linux 標準教科書実施済み。
progate で HTML & CSS コース初級・中級を学習済み。




HTML

スタイルを変更する

style属性：インラインスタイル　文書の見た目を変更する属性

<p>
  文章の
  <strong style="fontsize: 18pt">ココ</strong>
  だけ強調する
</p>

style="スタイル宣言"
スタイル宣言：スタイルプロパティ: プロパティ値;
複数のスタイル宣言を並べられる
スタイルプロパティ：色・フォント・線・レイアウトなど様々


CSS

Cascading Style Sheets
（カスケード：同じものが複数連なったもののこと）
スタイル宣言を積み重ねて様々なスタイルを適用していく仕組み

CSSルールセット（CSSルール）

HTML文書中に設定したいスタイルをstyle属性とは別の場所に記述しておき、両者を結び付けて表示する仕組み

<head>
  ~
  #CSSルールセットを定義
  <style>
    #スタイル宣言を束ねる{}内を宣言ブロック、適用先タグはセレクタという
    strong {
    font-size: 18pt;
    }
  </style>
</head>
<body>
  <p><strong>フォントサイズが18ptになる</strong></p>
</body>

【書式】
セレクタ {
  プロパティ: プロパティ値;
  ~
}
{}内を宣言ブロックという
セレクタには後述するとおり種類がある

CSSルール外部ファイル化

①cssファイル（.css）にスタイルを記述
②外部cssファイルをhtmlファイルに読み込む

<html ~>
  <head>
    ~
    #外部リソースを取り込む
    <link href="PATH又はURL" rel="stylesheet" type="text/css">
    ~

同じタグに違うプロパティ値を設定した場合、タグに近いものが優先される


コメント

/* cssファイル内にコメントを記述する */


セレクタの種類

①要素セレクタ
タグ名を記述する。タグの全箇所にスタイルが適用される。

p {
  color: red;
}

②idセレクタ
タグにつけたid属性値でスタイルの適用先を指定する。
idはHTML文書内でユニークにつけるもの。

#pageHeader {
  color: red;
}

③クラスセレクタ
タグにつけたclass属性値でスタイルの適用先を指定する。
同じスタイルを適用させたいタグにクラスを記述する。複数指定可能。

#htmlファイル
<p class="redText font25">赤文字、サイズ指定にしたい</p>
/* cssファイル */
.redText {
  color: red;
}

.font25 {
  font-size: 25px;
}

④全称セレクタ

* {
  color: red;
}


セレクタの組み合わせ

子セレクタ
1番目のセレクタタグ直下にある要素セレクタにスタイルを適用する

#pageHeader > p {
  font-size: 18px;
}

子孫セレクタ
1番目のセレクタタグ配下にある指定の要素セレクタ全てにスタイルを適用する

#pageHeader p {
  font-size: 18px;
}

兄弟セレクタ
1番目のセレクタタグの後ろにある指定タグにスタイルを適用する

/* 1番目のセレクタタグの 直後にある指定タグ にスタイルを適用する */
#pageHeader + p {
  font-size: 18px;
}

/* 1番目のセレクタタグ 以降にある指定タグ全て にスタイルを適用する */
#pageHeader ~ p {
  font-size: 18px;
}

複数セレクタ
同じ宣言ブロックを適用する

h1, h2 {
  color: red;
}


疑似セレクタ

疑似クラスセレクタ
タグの特定の状態を表す

/* マウスポインタが乗った状態 */
a:hover {
  background-color: blue;
}

疑似クラスの種類（参考　mdn web docs）

疑似要素セレクタ
セレクタが指定するタグ内の一部分を表す

/* pタグ1文字目を指定 */
p::first-letter {
  color: red;
}

疑似要素の種類（参考　mdn web docs）


属性セレクタ

特定の属性を持つ要素にスタイルを適用する。属性値は省略可能。

input[type="text"] {
  color: blue;
}

属性セレクタの構文一覧（参考　mdn web docs）


リストとテーブルの装飾

リスト
liタグに対して適用する。

ul > li {
  list-style: square;
}

ポジション、タイプなど種類がある（参考　mdn web docs）

テーブル
tableタグとtd・thタグに記述

table {
  boeder-collapse: collapse;
}
td, th {
  border: 2px solid blue
}

列にスタイルを適用したい場合は、htmlファイルのtebleタグ直下に
colgroupタグとcolタグを記述

#htmlファイル
~
<table>
  <colgroup>
    <col class="redCol">
    #span属性で複数列を結合して指定可能
    <col class="10">
  </colgroup>
</table>


ボックスモデル

それぞれの要素は長方形のボックスであるという、CSSレイアウトの基礎的な考え方。入れ子構造。

サイズ指定

/* 横幅 */
width: 80px;

/* 親要素に対する横幅の割合 ブラウザの幅に合わせて変化させられる */
width: 70%;

/* 高さ */
height: 50px;

スタイルを設定するためのhtmlタグ

#スタイルを適用するボックスを作成する
<div class="item">
  <h1>
    #インライン要素にスタイルを適用する
    ここだけ<span class="blueText">青色</span>にする
  </h1>
  ~
</div>

ボックスの余白

/* ボックス境界の外余白のサイズを指定 */
margin: 5px;

/* ボックス境界の内余白のサイズを指定 */
padding: 5px;

プロパティの値を半角スペースで並べるとき
2つ並べる　上下　左右
4つ並べる　上　右　下　左

プロパティの後ろに-top -right -reft -bottomを追記することで、方向を指定できる。

レイアウト

要素をセンタリングする

/* ボックスをセンタリング　ブラウザに適切な余白を設定させる */
margin: 0px auto;

/* インライン要素をセンタリング */
text-align: center;

要素を並べる
セレクタ配下の要素に適用される

display: inline;

プロパティ値参考　mdn web docs

ボックス内に収まらないコンテンツの表示について設定する

overflow: scroll;

プロパティ値参考　mdn web docs

フロートレイアウト

一番オーソドックスなのはfloatプロパティを使ったフロートレイアウト

要素を指定の場所に浮かせる
次の要素はその下に滑り込み、隠れる部分は上の要素に押しのけられて表示される

/* 要素を浮かせる */
float: left 又は right;

/* 下の要素の滑り込みを解除する */
clea: left又はright又はboth;

クリアフィックス
ボックス内の要素を全て浮かせると、ボックスは表示するものが内部にないために、そのボックスは高さを維持できず、見えなくなってしまう。
そこで解決のために生成するサイズ０で不可視のダミーボックスを、慣習的にクリアフィックスと呼ぶ。
floatを指定する要素の親要素タグに対しclassを記述する。

/* ::afterは選択した要素の最後の子要素として擬似要素を生成 */
.clearfix::after {
  content: "";        /* 疑似要素内の文字列指定　空文字 */
  display: block;     /* 疑似要素をブロック要素に指定 */
  visibility: hidden; /* 疑似要素を不可視にする */
  clear: both;        /* 左右の滑り込みを解除 */
}


ボックスの位置を固定する

position: fixed;  /* 要素を指定位置に固定 */
top: 50px;        /* 要素の固定位置を指定　他には right bottom left */

position: sticky; /* ある時点を境にfixedと同じ動きをする */
top: 70px;        /* スクロールして要素が上端から70pxの位置に来た時点 */

固定位置の基準位置を指定する

position: absolute; /* デフォルトはbodyタグが基準 */

position: relative; /* 位置を固定したい要素の親要素に記述 */


レスポンシブレイアウト・フレックスボックスレイアウトは割愛


その他メモ

色の指定方法

・色キーワード
・RGB16進表記：#000000（黒）～#ffffff（白）


複数単語の記法

①キャメル記法
①ー１　アッパーキャメル記法　UCC　パスカル記法
　RedText
①ー２　ローワーキャメル記法　LCC
　redText
②スネーク記法　アンダースコア記法
　red_text
③チェイン記法
　red-text


学習内容一覧

HTML
CSS


progateで一通りのhtml及びcssコードを記述してスタイルの変化を把握したあとに、書籍やWeb検索で仕組みを理解するという学習の流れにしたことで理解が深まりました。
学習を進めていくにしたがって、未知の魔法のように見えていたITツールが、実のところはファイルの集まりなんだと認識できるようになってきました。
世界に対する解像度が上がったようで、嬉しく感じます。

今回もお付き合いいただき、ありがとうございました。

この記事が気に入ったらサポートをしてみませんか？