IT~情報と技術

ドットインストールでHTML基礎文法入門とCSS基礎文法入門③【初心者向け】

12/12 追記してこの回を最終回にしました。

「ドットインストール」というオンライン講座でプログラミングの勉強を始めました。

ここではHTML基礎文法入門(全30回)とCSS基礎文法入門(全37回)を紹介します。

長いので3回に分けて紹介してます。今回は最後の3回目です。

ドットインストールでHTMLとCSSの勉強

ドットインストールにある、HTML基礎文法入門(全30回)と、CSS基礎文法入門(全37回)を使って勉強した内容を紹介します。

ドットインストールの教材
このブログで紹介

講座は全部やると全67回と多いように思いますが、1回あたり約3分なので全部見ても200分くらいです。

2時間の授業を2コマ受けるくらいのもんです。これで、HTMLとCSSの基礎文法を一通り体験できるのです!ということで頑張りましょう。

2つの講座今回はこの2講座が対象です。

さて、あいかわらず講師の田口先生の進行スピードが速いです。一時停止を駆使して、がんばってついていきましょう。

CSS基礎文法入門(全37回)

ではCSS基礎文法入門の続きです。

気になったところやメモとして残しておきたいところ

講義は、毎回テーマとなる文法事項があってそれが回ごとに違います。

それぞれが独立している感じで、前後の関連はあまりありません。

#15~#26はボックスモデルの説明が続きます。

CSSのボックスモデル

「#15 ボックスモデルを理解しよう」で出てくるCSSのボックスモデルの説明です。

  • まず、コンテンツのwidthとheightがあります。
  • その周りをpadding(詰め物)で埋めています。
  • その周りにborder(境界)があります。
  • さらにその周りにmargin(余白)があります。

うーん、なかなか面倒くさい仕組みになっています。

講義では、これらをクロームブラウザのディベロッパーツールで確認する方法の紹介があります。

ボックスモデルCSSのボックスモデルの説明
paddingの指定方法

「#18 paddingで内側の余白をつけよう」で紹介があります。

この余白を上下左右につけるのですが、その指定方法の紹介があります。

padding: 10px 20px 30px 40px; 上10 右20 下30 左40
padding: 10px 20px 30px; 上10 右20 下30 左20
padding: 10px 20px; 上10 右20 下10 左20
padding: 10px; 上10 右10 下10 左10

paddingの指定方法padingの指定方法(この絵は4行目の指定をした場合)
コンテンツをセンタリングする方法

「#19 marginで外側の余白をつけよう」で紹介があります。

左右のマージンをautoにすると、コンテンツがブラウザの中でセンタリングされます。

margin-left: auto;
margin-right: auto;

ボックスモデルの種類

「#21 displayプロパティを操作してみよう」で紹介があります。

ボックスがblockか、inlineか、inline-blockかで、並び方が異なります。

そしてh1要素だったらblock、img要素だったらinline等と、あらかじめ決まっています。

ボックスモデルの種類ボックスモデルの種類
複数のclassの指定方法

「#22 positionで要素を位置を変えよう」で、複数のclassを指定する方法を使っていました。

HTMLでbox1, box2, box3というclassを指定しつつ、まとめてboxというclassを指定しています。

HTML

<div class=”box1 box“>Box 1</div>
<div class=”box2 box“>Box 2</div>
<div class=”box3 box“>Box 3</div>

CSSで.boxに対するスタイリングを行うことができます。

CSS

.box {
width: 100px;
height: 100px;
}

その他いろいろなボックスの操作
  • ボックスの中身があふれたときの対処(#16)
  • マージンの相殺(#20)
  • ボックスの配置場所の指定(#22、#23)
  • ボックスが重なった場合の表示順序(#24)
  • 影の付け方(#26)

などなど、いろいろなボックスに対するスタイリングのやり方を、#15~#26にわたって説明があります。

ここでしっかりとボックスモデルに慣れておきましょう!

セレクターを組み合わせる

「#28 セレクターを組み合わせてみよう」でちょっと複雑なセレクタの使い方が出てきます。

  • .main > h1 →mainクラスの直下のh1をスタイリングします。
  • .main h1 →mainクラスの中のすべてのh1をスタイリングします。
  • .main, h1 →mainクラスおよびすべてのh1をスタイリングします。

.main > h1 { border-left: 5px solid skyblue; }
.main h1 { border-left: 5px solid skyblue; }
.main, h1 { border-left: 5px solid skyblue; }

疑似要素と疑似クラス

「#31 疑似要素で整形してみよう」「#32 疑似クラスを使ってみよう」で出てきます。

  • 疑似要素: 要素の特定の部分をスタイリング
  • 疑似クラス: 要素の状態に基づいてスタイリング

疑似要素を使って、h1要素の前に「- 」、後ろに「 -」を付加している例です。

h1::before { content: ‘- ‘; }

h1::after { content: ‘ -‘; }

疑似クラスを使って、openというid要素にマウスカーソルが乗った場合の動きを指定している例です。

#open:hover {
opacity: .8;
cursor: pointer;
}

実際に講座を見て、動きをしっかりと理解しておきましょう。

float

「#37 floatを使ってみよう」というのが最後にあります。

これは、ボックスを通常の配置から外して(floatさせる=浮かせる)、周りの行を回り込ませたりするようなスタイリング方法です。

これも実際に講座を見て、動きをしっかりと理解しておきましょう。

ひとこと

一通りCSSの基本的な内容を網羅して勉強したことになりました。パチパチ。

この後、ドットインストールの他の講座もどんどんやっていけばいいのですが、HTMLやCSSの基礎講座の内容を知っている前提で話が進みます。

  • classやidを使った要素の指定方法
  • ボックスモデルの扱い方
  • 疑似要素や疑似クラスを使ったスタイリング
  • floatを使ったコンテンツの配置

この辺りは頻繁に出てきて、「あれ~コレ何だったけ~?!」みたいになっちゃいます。(経験者です。)

慌てず、そのたびに復習して覚えていけば大丈夫でしょう!