ドットインストール「詳解CSS 基礎文法編」-1 【文章を効果的にみせる文字のスタイリングを知ろう】

ドットインストールまとめ記事、今回から「詳解CSS 基礎文法編」を扱います。

全3回で完結。

↓先に下記の記事でHTMLの復習をされることをおすすめします↓

togo-blog.hatenablog.jp

【この記事はこんな方におすすめ】

以下のような方に向けてかいてます。

• プログラミングをこれからやろうと思っているが難しそうで手が出ないと感じている方
• プログラミングの基礎学習を始めて数週間~1ヶ月の方
• ドットインストールを使ってプログラミング学習をしている方

→復習用に本記事をご活用ください！レッスン項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！

また、基礎文法編のまとめが完結したら記事内に登場する技術を使ったWEBサイトを作って公開します。

そういった情報を見逃したくない方はぜひ読者登録してお待ちください！

【CSSとは】

Cascading Style Sheetsの略
Cascading=cascade+ing
cascadeは名詞で(waterfallより)「小さな滝」
それが動詞になって「滝のように流れる」
という意味。

つまりCSSとは「親要素から子要素にstyleが滝のように流れるシートの組」を意味する。

こんな感じでスタイルが親要素(河口)から子要素(滝壺)へ流れていくわけです

ejje.weblio.jp

【CSSによるスタイルの指定方法】

①head内にstyleタグを用意して書く
②要素にstyle属性を書き直接指定
③linkタグhref属性でcssにリンクを飛ばす
※cssの指定の結果は④
※VSCodeでは書いたリンクに該当するファイルがない場合Command+クリックでフォルダおよびファイルを作成できる。めっちゃ便利です。

htmlにリンクするcssを指定。これでスタイルはcssに、WEBページの枠組みはhtmlにまとめられるのでスッキリする。②のようにhtmlの要素にstyle属性を付ければスタイリングできるのだけどこれでは煩雑。またstyle属性では指定できないスタイルもある。

②はstyle属性で、④はcssのcolorプロパティで文字色を指定。それぞれ結果は同じようになる。

【cssの宣言】

・css内で①のように{}の外にある、スタイルを指定する要素のことをセレクター、{}の中身を宣言という(②)宣言の後は;をつける
・font-size …③
文字サイズを指定
・同じ宣言を複数すると後に書いたものが優先される…④

h1に文字色水色が一度指定されているがその後再度文字色について赤色と指定したので赤色が優先されている。フォントの大きさ12pxはpタグより小さくなる。

【スタイルの継承】

①親要素にcssを指定すると含まれる子要素すべてにスタイルcolorが適用される。これをスタイの継承という
②border
pxで線の太さ、solidは線の種類色を指定して境界線を引く。colorと違い継承されない

文字色は親要素(body)から子要素(h1,p)に継承されている。一方borderは継承されていない。

【CSSの継承】

①inherit
継承できない宣言につけることで無理やり継承できる

borderを無理やり継承。枠の中に枠ができた。

補足
CSSの継承の有無はMDNでプロパティを調べてあげるとわかる

colorプロパティ。先ほど実際に確認したように継承されます。

【ディベロッパーツール】

・Elementタグ
要素を選択または要素上で「右クリック→検証」で調べる…①
・Stylesタブ
スタイルの場所…②
スタイルの継承…③
ブラウザが標準でもつスタイル…④
・Computedタブ
設定されたプロパティの一覧を見られる…⑤

模写コーディング(既にあるサイトの写経)の際はディベロッパーツールを用いてどの要素にどのスタイルが適用されているのか調べるとよい

設定されているスタイルの一覧。こんなスタイルが設定されているんだなという感じで見てもらえればOK

【文字の装飾】

①font-size
文字のサイズ。単位px(ピクセル)で指定
②text-aling
テキストの配置。centerで中央揃え
③font-weight
テキストの太さ。太さはbold>normal
④text-decoration
lint-through：打ち消し線
underline：下線
none：装飾なし

h1のように中央揃えにするだけで一気にページタイトル感が増します。ここまでの内容で文字だけのサイトなら十分な仕上がりになるはず！

【フォントの指定】

①文字コードの指定。文字化けを防ぐ
②フォントの指定
③指定したいフォントを”,”で区切って表示優先度順に記述。機器の都合でフォントがない場合2番目以降のフォントが使われる
④ゴシック体系のフォントをまとめて指定

文字コードの指定は欠かせません

補足：総称フォントファミリー
serif：明朝体系
cursive：筆記体
fantasy：装飾書体
monospace：等幅文字

これらをfont-familyプロパティの最後に指定しておくことで、万一指定したいフォントがすべてない場合に対応できる。

参考

t.co

【行の高さを指定】

・line-heightで行の高さを指定(②)その際テキスト(16px,①)は上下の中央に配置されるので画像のケースでは(48-16)/2=16pxずつ上下に余白ができる
・行幅をテキストに対して3倍に指定。単位はem…③

横並びに複数の要素を配置したい場合などに知っておくとよいです。詳しくは後のレッスンでやります

【line-heightの単位の有無】

・単位あり
親要素の行幅の”数値”(ここでは64px)が継承される…①
・単位なし
親要素の行幅の”設定”(ここでは文字サイズの2倍)が継承される。自然な仕上がりになるのでこちらの方がよく用いられる…②

文字サイズの比率などをそのままデザインに反映する場合は②を使うとよいです

【復習】

今回は「詳解CSS 基礎文法編」の#1~#11を扱いました。

• linkタグでrel属性をstylesheet、href属性でファイル名を指定し、htmlとcssを紐づける
• 要素名などを指定して{}内にスタイルを記述
• 親要素から子要素にスタイルが継承されるものとそうでないものがある。inheritで無理やり継承可能。継承の有無はMDNで調べる
• ディベロッパーツールでスタイルがどう適用されているのか調べよう
• 文字、行の高さに関するプロパティを使えるようになろう

普段はTwitterでプログラミング・読書・受験勉強等について発信しています。

この記事が参考になった方はぜひフォローよろしくお願いします！

twitter.com