今日は職業訓練で、CSSの基礎について学びました。
CSSの設定方法や記述方法、コーディングの手順など、Web制作の基本になる内容です。
その中でも、特に印象に残ったのが「行間」の考え方でした。
私はこれまで、行間とは単純に「行と行の間にあるすき間」のことだと思っていました。
でも、CSSで line-height について学ぶ中で、行間はただの余白ではないと知りました。
この学びによって、これまでWordで文章を作っていたときに感じていた違和感も、少し解消されました。
ユイ行間って、行と行の間のすき間のことじゃないんですか？
ユウト私もそう思っていたんですが、line-heightを学んで、それだけではないと分かりました。
CSS 初心者｜CSSの基本と手順の考え方
まずは、今日の授業で学んだCSSの基本的な考え方を整理します。
CSSは見た目を整えるための言語です
HTMLだけでも、文字や画像を表示することはできます。
ただ、それだけではWebページの見た目を細かく整えることはできません。
文字の大きさを変えたり、色をつけたり、余白を調整したりするにはCSSが必要です。
今回の授業では、CSSを使うことでページの印象が大きく変わることを学びました。
ただ文字を並べるだけではなく、「どう見せるか」を考えることが大切なのだと感じました。
CSSの全称セレクタについては、CSS初心者が「*」の意味を理解した日｜全称セレクタでブラウザの余白をリセットで書きました。
CSSは感覚ではなく、指定して整えるものです
CSSでは、どの部分にどんなデザインを当てるのかを指定します。
見出しの文字を大きくするのか。
本文の色を変えるのか。
余白をどのくらい取るのか。
そうした内容を、一つずつ整理しながら書いていきます。
最初は、どこに何を書けばいいのか迷いました。
でも、基本の形を知ると、少しずつ理解しやすくなります。
CSSは感覚だけで書くものではなく、「どこを」「どう変えるか」を考えながら書くものだと感じました。
コーディングは手順を考えることも大切です
今回の学習では、コーディングの手順についても学びました。
いきなり思いついたところから書き始めるのではなく、まず全体の構成を確認します。
そのうえで、どこにどんな役割を持たせるのかを考えながら進めます。
初心者のうちは、つい目の前の作業だけに集中してしまいます。
でも、先に流れを確認しておくと、途中で迷いにくくなります。
これはWeb制作だけでなく、文章作成や日常の作業にも通じる考え方だと思いました。
CSS 行間｜line-heightで分かった仕組み
ここからは、今回いちばん印象に残った行間の考え方です。
一番難しかったのは「行間」の考え方です
今回、特に難しいと感じたのが「行間」です。
私はこれまで、行間とは「行と行の間の空白」だと思っていました。
でも、実際にはそれだけではありませんでした。
CSSの line-height では、文字そのものの大きさだけでなく、行全体の高さを指定します。
つまり、行間は単なる空白ではなく、文字が入っている行の高さや、次の行との見え方に関わるものです。
この考え方を知ったとき、少し驚きました。
自分が見ていた「行間」は、ただのすき間ではなかったのです。
Wordで感じていた違和感にもつながりました
この行間の考え方を知って、Wordで文章を作っていたときの疑問も少し解消されました。
Wordで行間を設定していると、自分の感覚と表示がずれることがありました。
「もう少し詰めたい」と思って設定しても、思ったように見えないことがあります。
逆に、少ししか変えていないつもりなのに、大きく印象が変わることもありました。
今までは、その理由がよく分かりませんでした。
でも、CSSで行間の仕組みを学んだことで、文字の見え方にはきちんとした考え方があるのだと分かりました。
もちろん、CSSとWordでは設定の仕組みがまったく同じではありません。
それでも、「行間はただの空白ではない」と知ったことで、今まで感じていた違和感の理由が少し見えてきました。
見た目だけで判断するのではなく、その裏にある仕組みを知ることが大切なのだと感じました。
CSS初心者｜我流だけでは気づけないこと
ここでは、感覚だけで進めることの限界と、そこから見えた学び方を紹介します。
我流だけでは気づけないことがあります
今回の学習で感じたのは、我流だけでは理解に時間がかかるということです。
もちろん、自分で手を動かして試すことは大切です。
実際にコードを書いてみないと、分からないこともたくさんあります。
ただ、初心者のうちは、感覚だけで進めると「なぜこうなるのか」が分からないまま作業してしまうことがあります。
CSSも同じです。
コードを写すだけではなく、概念や理論も合わせて学ぶことで、理解が深まります。
今回の行間の学びは、まさにその一つでした。
なんとなく感じていた違和感が、仕組みを知ることで「そういうことだったのか」とつながりました。
CSS初心者は、手を動かしながら仕組みを学ぶと良いです
CSSを学び始めたばかりの人は、最初からすべてを完璧に理解しようとしなくても大丈夫です。
まずは基本の書き方を覚えて、実際にコードを書いてみることが大切です。
そのうえで、分からない部分が出てきたら、答えだけを探すのではなく、「なぜそうなるのか」も一緒に調べると理解しやすくなります。
特に行間や余白のような見た目に関わる部分は、感覚だけでは分かりにくいです。
数字を少しずつ変えながら表示を確認すると、自分の中でイメージしやすくなります。
たとえば、次のように line-height の数値を変えるだけでも、文章の読みやすさは変わります。
p {
line-height: 1.5;
}
このように指定すると、本文の行全体の高さが調整されます。
まずは 1.4、1.5、1.8 など、少しずつ数字を変えて見え方を比べてみると、行間の感覚がつかみやすくなりそうです。
borderやbackground-color、colorの使い方は、CSS初心者が最初に覚えたいborder・background-color・colorの使い方｜ブログ装飾で学んだことにまとめています。
CSS line-height｜今日できるようになったことと次回試したいこと
最後に、今日の学習を振り返ってできるようになったことと、次に試したいことを整理します。
今日できるようになったこと
今日の学習で、CSSの基本的な設定方法や記述方法を少し理解できました。
また、コーディングは思いつきで進めるのではなく、手順を意識することが大切だと分かりました。
そして何より、行間には仕組みがあると知れたことが大きな収穫でした。
次回試したいこと
次回は、実際に line-height の数値を変えながら、文字の見え方がどう変わるのかを確認してみたいです。
ただ説明を聞くだけでなく、自分で試してみることで理解が深まると感じています。
classとidの違いについては、CSS初心者がclassとidの違いを学んで気づいたことに書きました。
CSS line-heightに関するよくある質問
行間についてのよくある疑問です。
- CSSのline-heightとは何ですか
-
line-heightは、文字そのものの大きさだけでなく、行全体の高さを指定するプロパティです。行間は単なる空白ではなく、文字が入っている行の高さや次の行との見え方に関わるものだと分かりました。
まとめ
今日は職業訓練で、CSSの基礎について学びました。
CSSの設定方法や記述方法、コーディングの手順などを学ぶ中で、特に印象に残ったのは行間の考え方です。
これまで行間は、単純に「行と行の間のすき間」だと思っていました。
でも、CSSで line-height について学ぶことで、文字の見え方には仕組みがあると分かりました。
この学びは、Wordで文章を作っていたときに感じていた違和感にもつながりました。
我流で進めることも経験になります。
でも、初心者にとっては、概念や理論を学ぶことで理解が一段深まります。
CSSを学んでいる方は、コードを書く練習だけでなく、「なぜそう見えるのか」という仕組みにも目を向けてみてください。
小さな疑問が解消されると、学習が少し楽しくなります。
職業訓練校で学生に戻って感じたことは、57歳で学生に戻ってみた。職業訓練校で感じた5つのことに書いています。
行間は、ただのすき間ではありませんでした。仕組みを知ることで見え方への理解が深まると実感できたのが、今日いちばんの収穫です。
最後までお読みいただき、ありがとうございました。
コメント
コメント一覧 （2件）
[…] […]
[…] […]