【プログラミング独学3日目】横並びflexbox・丸くするborder-radius・縦方向中央揃えalign-itemsなど

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

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

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

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

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

 https://chanmk.tokyo/programming_1/

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

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

今日はCSSの続きをやりました。昨日は朝1時間プログラミング学習をしてから仕事して・・・と頑張ったからか午前中グッタリだったので、今日はやりませんでした。というより、このブログにアウトプットするのに時間がかかって夜更かししてしまっているのが原因かと思います。

別件の仕事や本業、育児もあり1日のうちプログラミング学習に充てられるのはほんの1時間ほど。少しずつしか進みませんが、焦りすぎず続けていこうと思っています。今日は夜更かししないために早めに切り上げ、このアウトプット作業に移ってみました。

レイアウトしやすいようクラス分けする

ヘッダー部分には以下のような項目が表示されています。

これらを左側にサイトのトップ画像、右側にサイトの説明・リンクというように位置付けたいとき、それぞれにクラス名を付けて区切ります。

まず左側に表示させたいサイトのトップ画像部分を、「icon」という領域にします。

<div class="icon">
　<img src="（サイトのトップ画像URL）">
</div>

次に右側に表示させたいサイトの説明やリンクの部分を、「info」という領域にします。

<div class="info">
　<p>太郎のポートフォリオサイトです。</p>
　<img src="（リンクURL）">
</div>

現段階では「icon」領域と「info」領域が上下に並んで表示されています。これを横並びにするために、次で説明する「flexbox」というプロパティを使用します。

要素を横並びにしたいとき

flexboxは、要素を横並びにするためのプロパティです。横並びにしたいものの親要素にプロパティを追加します。例えば昨日作成した「container」という領域の中にあるアイコンを横並びにしたければ、containerのCSSに追記します。記述の仕方は以下の通りです。

.container {
　display : flex ;
　}

上記を追加することで要素が横並びで表示されます。このときそれぞれの幅や大きさは、それぞれが元々持っている大きさのまま表示されます。

横並び要素の間に隙間を空けたいとき

そのため「icon」と定義した領域と、「info」と定義した領域はくっついた状態で横並び表示されます。それぞれの間に隙間を空けたい場合は、以下のようなCSSになります。例えば30pxの隙間を空けたい場合です。

.info {
margin-left : 30px ;
　}

これは左側にicon領域、右側にinfo領域が並んでいるため、右側のinfo領域の左側に隙間を取ることで両者の間に隙間を空けています。

四角い要素を丸くしたいとき

要素の角を丸めたいときは、border-radiusというプロパティを使用します。例えば画像に対して適用すれば、四角い画像を丸くくり抜かれた画像にすることができます。20pxを適用させる場合の記述は以下のようになります。

img {
　border-radius : 20px ;
　}

ただ上記のように記述するだけでは、サイト内全ての画像が丸くくり抜かれてしまいます。今までであれば丸くくり抜きたい画像にclass名などを付けて特定しCSS側で操作していたのですが、他の方法で指定することもできます。

.icon img {
　border-radius : 20px ;
　}

こうすることで、「iconクラス内にある画像に対してborder-radiusを適用する」と示すことができます。つまり <div class="icon"> の中にある画像だけ角を丸くすることができます。なお角を丸めるだけでなく、正円にしたい場合は以下のように記述します。

.icon img {
　border-radius : 50% ;
　}

画像周囲に線を付けたいとき

例えばいまborder-radiusを使って丸くした画像の周りに線を付けたいときは、以下のように記述します。

.icon img {
　border-radius : 50% ;
　border-width : 4px ;
　border-style : solid ;
　border-color : white ;
　}

「border-width」で線の太さ、「border-style」で線の種類、「border-color」で線の色を指定します。ちなみにborder-style（線の種類）とは実線か点線かなどといった種類で、今回は実線（solid）としています。

サイトタイトル・説明文のスタイル変更

左側icon領域の画像をカスタマイズし、丸いサイトトップ画像ができたので、今度は右側info領域のカスタマイズをしていきます。info領域にはサイトタイトルや説明文が書かれており、以下のように記述します。

.info h1 {
　font-weight : normal ;
　font-size : 24px ;
　margin : 0 ;
　}

先ほどと同様、「h1 { 」だとサイト全体のh1に対して指示が出てしまいますが、「.info h1」とすることでinfo領域内にあるh1だけにスタイルを適用することができます。「font-weight」で文字の太さ、「font-size」で文字の大きさ、「margin」で要素周囲の余白や隙間を指定することができます。

ul・li部分のスタイル変更

info領域にあるリンクはul・liで記述していました。この部分についても、ひとまず以下のように記述し状態をリセットしてから、必要に応じて余白や装飾を書き加えていった方がわかりやすいとのことでした。

.info ul {
　margin : 0 ;
　padding : 0 ;
　}

箇条書きの点を消す方法

箇条書きの点を消すには、上記に以下のように追記します。

.info ul {
　margin : 0 ;
　padding : 0 ;
　list-style-type : none ;
　}

またこちらも初めは縦並びになっているので、横並びにするためにflexboxを使ってさらに以下のように追記します。

.info ul {
　margin : 0 ;
　padding : 0 ;
　list-style-type : none ;
　display : flex ;
　}

CSSは下に書き加えるほどに情報が上書きされていくので、marginやpaddingを必要に応じて書き加えて余白を調整しましょう。

横並びにした要素の間の隙間を空けるには、先ほどと同様mariginの調整を行います。このとき指定するのは「ul」ではなく「ulの中のli」なので、以下のように記述します。

.info ul li {
　margin-right : 8px ;
　}

要素を縦方向の中央揃えにしたいとき

要素を縦方向の中央揃えにしたいときは、今まで通りmargin-topやmargin-bottomで調整しても良いですが、以下のように記述すると簡単です。

.container {
　align-items : center ;
}

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

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

要素間に隙間を取るときのmarginの決め方

左側にicon領域、右側にinfo領域が並んでいるとき、ドットインストールでは右側のinfo領域の左側に隙間を取ることで両者の間に隙間を空けていました。ここで疑問に感じたのは、左側のicon領域の右側に隙間を取るんじゃだめなのか？という点。実際にCSSをいじってそのようにしてみると、当初（右側のinfo領域の左側に隙間を取ったとき）と見た目に変化は無く、どちらでも良さそうでした。

margin・padding・borderの使い分け

要素周囲の余白指定にはmargin以外にもpaddingやborderがあるので、なぜいつもmarginばかり使って余白調整を行うのか疑問でした。paddingやborderを使ったらだめなの？と。この疑問はデベロッパーツールを使うことで解決しました。デベロッパーツールの「user agent stylesheet（ブラウザが元々記述しているCSS）」に元々marginの指定があったから、そこを0にしたり操作していたんですね。

margin、padding、borderの使い分けは、デザインがどのように変化したかでなんとなく理解できていますが、まだ自信がありません。というか、ドットインストールで周囲の余白調整をするときはmarginがよく出てくるように感じます。これは元々user agent stylesheetで使われている要素がmarginであることが多い・・・ということなのか？それとも気のせい。ひとまず初めにデベロッパーツールで確認すべきということですよね。今日はこのへんの理解に留めておきます。

「０」か「none」か

スタイルの指定をするとき「0」と書くときと「none」と書くときがあって、どういう違いだろうと疑問に感じていました。意味はほとんど同じだと思いますが、わざわざ書き分けるということはそれなりの違いがあるんだろうなと。調べてもよくわかりませんでしたが・・・以下のような記述がありました。

情報の信憑性は不明ですが、慣れるまではそこまで気にしなくても良い部分なのかなと思いました。

CSSやHTMLの記述を消すとき

今まで不要になった記述は普通に消していましたが、ドットインストールでは消さずにひとまずコメントへ変化させるんですよね。不要なのになぜ？と思っていたんですが、理由がわかりました。ひとまずコメント状態にして実際の表示に問題無いか確認しOKであれば消す、としていたんですね。私も今までサイト制作やカスタマイズをしていて、不要だろうと思って消したらデザインが崩れて元に戻したい（でも消したからもう無い）なんてことがよくありました。あくまで個人的な見解ですが、次回からは私もそのようにしようと思います。