【プログラミング独学9日目】文中画像の縦方向の位置変更・色の指定・リストのスタイル変更・一括指定プロパティ

2022-03-26FREELANCE,WORDPRESS/WEB

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

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

【プログラミング独学1日目】HTML・imgタグ・alt属性・metaタグ・rel属性・href属性・

独学でサイト制作は行なってきましたが、改めてHTMLからプログラミングをしっかり学び直すことにしまし ...

 https://chanmk.tokyo/programming_1/

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

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

今日もCSSの続きをやりました。夕方にほんの10分ほどと、子どもを寝かしつけてから1時間ほど時間を確保できました。月初めから中旬にかけて本業のライティング業務に追われるので、そんな中でも1日5分だけでもなんとか続けていきたいと思っています。

以前こちらの記事でも書いたのですが、元々私はプログラミングが大の苦手でした。

【プログラミング独学1日目】HTML・imgタグ・alt属性・metaタグ・rel属性・href属性・

独学でサイト制作は行なってきましたが、改めてHTMLからプログラミングをしっかり学び直すことにしまし ...

 https://chanmk.tokyo/programming_1/

大学の教養課程でプログラミングの授業があったのですが、試験に落ち再試験になり、その再試験にも落ちたことで再履修となりました。再履修最後の試験も一発合格ではなかった記憶です。習ったのはC言語でしたが、本当に向いてないんだと思いました。そしていま調べているとプログラミングの難易度ランキングで2位にC言語がいるんですが・・・？歯科という全く関係の無い大学で難易度の高いプログラミング言語を学ばされていたんですね。適正や他の目的もあったと思いますが、再試験＆再履修はそこまでやばいことじゃなかったのでは・・・。それと同時に友人がみんな一発合格してたの、ポテンシャル高すぎる。

もちろん当時は歯科衛生士になるつもりで大学に入っていたので、数年後にWEBの世界に入ってるなんて想像もしていませんでしたし、まさかプログラミングを学びたいと思っているなんて考えられなかったでしょうね。いまプログラミング独学9日目になりますが、普通に学べています。自分には向いてないんだと思い込んで敬遠してた数年間、もったいない。でも再試験＆再履修で苦手意識無い方がおかしいですよね・・・。

話はズレましたが、今日のアウトプットに移っていきます。

①画像の垂直方向の配置変更

テキストや画像は行ボックスと呼ばれるボックスに配置され表示されます。行ボックスには文字位置の基準となっているbaselineという線があり、文中に画像を挿入するときもbaselineを基準として配置されます。

,画像の垂直方向の配置を考えるとき、デフォルトでは以下のように設定されています。

img {
　vertical-align : baseline ;
}

「baseline」の部分を「top」に変えると、baselineを基準に画像が上部へ移動します。逆に「bottom」に変えると、baselineを基準に画像が下部へ移動します。なお「middle」に設定したときは英小文字の中央に画像の中央が揃えられて表示されます。行ボックスの中央に配置されるわけではないため注意が必要です。

また以下のようにして画像の位置を指定することもできます。

img {
　vertical-align : 2px
}

このようにすると、画像がbaselineから上へ＋2pxされた位置に表示されます。逆に「2px」の部分を「-2px」と書き換えると、画像はbaselineから下へ-2pxされた位置に表示されます。

なおvertical-alignは、文中に要素を位置付けたいときに使用するプロパティです。そのため<p>タグ内に使うことはできず、imgやspanなどで使用されるものです。

②色の表現方法

CSSでの色の表現方法は4つあります。

1. 色キーワードによる指定
2. RGBAによる指定
3. HSLAによる指定
4. 透明度の指定

1.色キーワードによる指定

「red」「blue」「green」など代表的な色をそのまま記述して指定する方法です。主要な色はあらかじめ定義されているため、そのまま色の名前を記述するだけで反映させることができます。

2.RGBAによる指定

RGBAとはRed・Green・Blue・Alphaの頭文字を取ったものです。

Red・Green・Blueについては255がそのままの濃い色で、Alphaについては1が不透明、0が透明となります。つまり以下のように記述すると、不透明な普通の赤色が表示されます。

p {
　rgba (255 , 0 , 0 , 1.0) ;
}

また数値ではなく16進数で示すこともでき、16進数では255を「ff」、0を「00」と表記します。なおAlphaの1.0は「ff」となるため、上記は「#ff0000ff」と表記することができます。また「ff」や「00」など同じ値が続くときは1つに省略して記述することができます。つまり#ff0000ffは「#f00f」と書き換えられ、Alphaは1の場合省略することができるため最終的に「#f00」となります。元々の表記のままAlphaを省略する場合は、

p {
　rgb (255 , 0 , 0) ;
}

と「a」を抜いて表記します。

3.HSLAによる指定

HSLAとはHue・Saturation・Lightness・Alphaの頭文字を取ったものです。

RGBAと同様、Alphaは1.0の場合省略することができます。この場合以下のように「a」を抜いて表記します。

p {
　hsl (255 , 0 , 0) ;
}

4.透明度の指定

透明度の指定には「Opacity」を使用します。Alphaとの違いは、例えばRGBAやHSLAなどでAlphaを使って透明度を指定すると、要素が多くあっても1つ1つ指定していかなければいけません。しかしOpacityであれば、以下のように書き加えるだけで全体に対してまとめて指定することができます。

p {
　color : rgb (30 , 30 , 30);
　background-color : rgb (150 , 150 , 150) ;
　opacity : 0.5 ;
}

例えば部位によって色の異なるさまざまな色を使った画像があったとき、Alphaでは透明度の指定ができません。しかしOpacityを使えば全体に対して透明度を指定することができます。

③リストの記号変更

<ul>を使ってリストを作成すると、デフォルトでは項目の前に黒丸が表示されます。しかしlist-styleプロパティを使えばこの黒丸部分を変更することができます。例えば以下のようなCSSだと、黒丸を白丸にすることができます。

ul {
　list-style-type : circle ;
}

<ol>タグを使った番号付きリストの場合もスタイルを変更することができます。例えば以下のようなCSSだと、数字をアルファベットa.b.c.・・・に変えることができます。

ol　{
　list-style-type : lower-alpha ;
}

なお丸や数字など何も表示させたくない場合は「none」を指定します。

④リストの記号を内側に入れる

リストを作成すると、デフォルトではリストの記号部分が文字列より外側に出た状態で表示されます。これを内側に入れて位置を揃えたい場合は以下のように記述します。

ul　{
　list-style-position : inside ;
}

⑤リストの記号を画像に変更

list-style-imgプロパティを使えば、リストの記号を任意の画像にすることもできます。画像のサイズは指定できませんが、以下のような記述になります。

ul　{
　list-style-img : url (../img/icon.png) ;
}

現在記述しているシートのある階層よりも1つ上の階層に画像の入っているフォルダがあるため、「../」と記載します。もし2つ上の階層にフォルダがある場合は「../../」となります。

またここまで紹介したlist-styleプロパティは、実は以下のように1つにまとめて表記することができます。

ul　{
　list-style : circle inside url (../img/icon.png) ;
}

このようにまとめて書けるプロパティを「一括指定プロパティ」と呼び、単独の記述と一括指定プロパティを両方とも書いた場合は単独の記述の方が無効になる（デフォルトで表示される）ため注意が必要です。例えば以下のように記述しても、list-style-typeは無効になるため白丸ではなく黒丸が表示されます。

ul　{
　list-style-type : circle
　list-style : inside ;
}

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

今日学んで疑問が残った部分は以下です。

vertical-alignのmiddle≒行ボックスの中央では？

img {
vertical-align : middle ;
}

上のように記述したとき、画像（img）は英小文字の中央に画像の中央が揃えられて表示されます。ここの注意点として「行ボックスの中央に位置されるわけではない」とされていましたが、意味合いは違くとも位置的にはほとんど行ボックスの中央では？と思いました。MDNを見ると、私の思う通りであるようなそうでないような・・・。ということで、先生に質問してみました。回答を待ちます。

vertical-alignはpには適用されない

vertical-alignは文中に画像などを位置付けたいとき（その位置を指定したいとき）に使用するプロパティであり、ゆえに<p>タグの中に記述されることはないとのこと。これはpを文中に表示させることは無いから。そう言われるとわかるんですが、なんだかピンとこず・・・。ひとまず「vertical-alignはimgやspan要素で使用する」という風に覚えておきます。