【プログラミング独学8日目】打ち消し線・下線・フォント指定・行間調整とスタイルの継承

FREELANCE,WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。無事8日目に突入しました。

なお私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。

そして今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。

  • プログラミング案件も受注できるようになりたい
  • 歯科衛生士エンジニアを目指したい
  • コーディングもライティングもできる歯科衛生士

【プログラミング独学8日目】学んだこと

今日はCSSの途中まで学びました。今日は早起きできず、午前中の仕事前にプログラミング学習ができませんでした。日中は企業とのミーティングや他の仕事もあり、夜子どもを寝かしつけてからやっとプログラミングに着手できました。ただ集中力的にも、予定的にも1時間ほどしか確保できず・・・。まあこんな日もあります。頑張りすぎると続かないので、無理しすぎず頑張っていこうと思います。

大学病院の歯科衛生士をやめて、知識ゼロのままWEBの世界に入り、誰に教わるでもなく独学で突き進んできました。そこで学んだのは継続の大切さです。大学入試のために受験勉強をしていたときも、「継続は力なり」なんて言葉を散々聞かされました。ただ当時はまだ継続したことによる成功体験が無かったので、意味を理解しきれていませんでしたね。今ならその言葉の真意がわかりますし、継続することの難しさもわかっています。もちろん目標はプログラミングを習得したその先にありますが、まずは継続することを目標の1つにしても良いかなと思っているぐらいです。自分と向き合いながら進めていきたいと思っています。

①打ち消し線

文字に打ち消し線を入れたいときは以下のようなCSSになります。例えばh1の見出しに打ち消し線を入れたい場合です。

h1 {
text-decoration : line-through ;
}

②下線

文字に下線を入れたいときは以下のようなCSSになります。例えばh1の見出しに下線を入れたい場合です。

h1 {
text-decoration : underline ;
}

③リンクの下線を消す

リンクを設定すると、初期設定で下線が表示されますよね。その下線もCSSによって消すことができます。

a {
text-decoration : none ;
}

初期設定として下線が設定されているので、その設定を無しにするという「none」を記述すればOKです。

④フォントの設定

文字のフォントは「font-family」プロパティで指定します。ユーザーのパソコン画面にフォントを反映させるには、こちらが指定したフォントがユーザーのパソコンにも存在していなければいけません。例えばこちらで「フォントAで表示」と指定しても、ユーザーのパソコンにフォントAが無ければフォントAで表示させることができません。

そのためCSSでは、「このフォントがユーザーのパソコンに無ければこのフォントで表示してほしい。それも無ければこのフォントで・・・」というように、複数の選択肢を設けながらフォントを指定します。

h1 {
font-family : Verdana , "Arial Black" , メイリオ , sans-serif ;
}

例えば上のようなCSSの場合、以下のような流れになります。

①フォントはVerdanaで表示してね

②ユーザーのパソコンにVerdanaが無ければArial Blackで表示してね

③ユーザーのパソコンにVerdanaもArial Blackも無ければメイリオで表示してね

④VerdanaもArial Blackもメイリオも無ければsans-serifのどれかで表示してね

「sans-serif」は特定のフォントではなくフォントのカテゴリー名で、ゴシック体フォントのカテゴリーを意味します。前に書いたVerdanaやArial Black、メイリオなど全てのフォントがユーザーのパソコンに無かったときに、ゴシック体フォントのうちユーザーのパソコンにあるもので表示してくれます。そのためフォント指定のときには最後に必ず書いておきましょう。

なおsans-serifはゴシック体フォントのカテゴリー名ですが、明朝体フォントのどれかで表示してほしければ「serif」、筆記体フォントのどれかで表示してほしければ「cursive」、等幅フォントのどれかで表示してほしければ「monospace」と記述します。

また今回で言うメイリオのように、日本語用フォントを先に指定すると英字にも日本語用フォントが適用されてしまいます。見た目上これを避けたい場合は、先に英字用フォントを記述しましょう。

⑤フォント名に空白が含まれるとき

今回で言う「Arial Black」など、フォント名に空白が含まれることは多くあります。CSSで空白の含まれるフォント名を指定するときは「 ' 」あるいは「 " 」で囲います。個人的には他の部分でも使うことの多い「 " 」が覚えやすくて良いかなと思いました。

⑥CSSで日本語を記述するとき

CSSは基本的に英数字で行いますが、今回の「メイリオ」のようにCSSの記述の中に日本語が含まれることもあります。そのような場合、ブラウザによっては文字化けが起こってしまうことも。それを防ぐためには、CSSファイルの先頭に以下のように記述しておきましょう。

@charset "utf-8" ;

⑦行間を調整

テキストの行間は;ine-heightを使って調整します。サイトにテキストが表示されるとき、行ごとに「行ボックス」と呼ばれる四角い領域が設定されています。行ボックスの縦幅はline-herghtによって指定され、その中の文字サイズにより上下の空白が決定します。

line-heightは以下のように指定します。

p {
　font-size : 16px ;
　line-height : 48px ;
}

ただ「px」で直接指定するのではなく、「文字サイズの3倍」などと指定することもできます。このとき単位は「em」となり、以下のようなCSSになります。

p {
　font-size : 16px ;
　line-height : 3em ;
}

なお以下のように単位無しで記述しても、同様に「line-heightは文字サイズの3倍」という意味になり正しく表示されます。

p {
　font-size : 16px ;
　line-height : 3 ;
}

⑧line-heightとスタイルの継承

line-heightはスタイルを継承するプロパティです。スタイルの継承については昨日学び、疑問が多く残ったため以下にメモしています。

例えば以下のようなHTML記述があったとしましょう。

<main>
　ドットインストールです。
　<section>
　プログラミングを学びましょう。
　</section>
</main>

上のように<main>タグの中に<section>タグがある場合、<main>内で指定したline-heightは<section>内にも継承されます。これはline-heightがスタイルの継承をするプロパティだからです。

main {
　font-size : 32px ;
　line-height : 3em ;
}

section {
　font-size : 16px ;
}

上のようにmain内で単位を付けてline-heightを指定した場合、sectionには「32pxの3倍のline-height」として継承されます。つまりsection内の文字サイズは16pxと小さいのに、32px用のline-heightが継承され行間がとても広くなってしまいます。

それに対して以下のように、main内で単位を付けずにline-heightを指定してみましょう。

main {
　font-size : 32px ;
　line-height : 3 ;
}

section {
font-size : 16px ;
}

この場合、sectionには「3倍のline-height」として継承されます。つまり「3倍の」という設定のみ継承されるため、実際のline-heightはsection内で再計算され、「16pxの3倍のline-height」となります。そのため先ほどのように行間が広すぎることなく、程よい行間が表示されます。

このように見た目上の理由で、あえて単位なしの状態でスタイルを指定することもあるので覚えておきましょう。

【プログラミング独学8日目】わからなかったこと・調べてわかったこと

今日学んで疑問が残った部分は特にありませんでした。学ぶ時間と量が少なかったのもありますね。スタイルの継承は昨日よくわからず自分でアウトプットしながら調べたことですっきりしていたので、今日の学習もスムーズに進みました。昨日疑問が残ったまま放置していたら、今日のline-heightの部分でつまずいていたと思います。わからないことはその日のうちに解決しておくと良いですね。

FREELANCE,WORDPRESS/WEB

Posted by miho