⇒ 無料プログラミングスクールおすすめ3選を比較!ここから選べばOKです。

【必読】サイト制作でよく使うHTML/CSSの初歩コード3選!

おっす、コーディング独学中ブロガー悠才です。

僕は今年の3月からコーディングの勉強を始めたのですが、初歩的なHTML/CSSコードで躓くことがやや多いなと感じたので、ブログでほんの少しですがまとめておこうと思います。

よく使うコード3選なので、サイトコーディング勉強中の方は是非とも参考にしてください~!

複数画像を横に並べ、中央表示する

よくサイトなどである、複数画像を横に並べて中央寄せにするコード。

テキストと画像を<div>で囲い、横幅を指定してあげることで綺麗に並べることができます。

text-align:center;で指定すると、テキストまで中央寄せになってしまうので

テキストに別途text-align:left;をかけることで対応してます。

また、divで囲った要素をdisplay:inline-blockと指定することもお忘れなく。

そのままだとブロックが横ではなく縦に並んでしまうので。

横幅を%で指定すると、デバイスごとに拡大・縮小してくれます。

 

<HTML>

 

<CSS>

 

画像と文字を横に並べていい具合に調節する!

このように画像とテキストが横に並んでいるとき、

画像の高さとテキストの高さを合わせたいって思いますよね。

そんなときに使うのがvertical-alignです。

 

画像のCSSにvertical-alignを指定すると、

その後に続くテキストの位置を調整できます。

上の画像のHTML/CSS

 

このテキストの部分を画像の中央に持ってきたいときは、

下記のようにvertical-align:middle;をCSSに追記します。

 

そうするとこのようにテキストが中央に

 

割と、画像とテキストの位置調整はすると思うので、

困ったらvertical-alignを試してみてください!

※vertical-alignは後に続くテキストがブロック要素の中にあると効かないのでご注意を。ブロック要素のCSSにdisplay:inline-blockなどを追記すると、効くようになります。

 

ブロック要素をfloatした後の崩れを直す!

ブロック要素をfloatした後に、floatをかけてない要素が前要素の下に潜り込んでデザインが崩れてしまうことがよくあります。

上記の画像のHTML/CSSはこちら

 

青と赤のブロックはfloatをかけたことで浮いている状態になりますので、

その下に記述された黄色のブロックの上に重なってしまっています。

このレイアウト崩れを解消するには、cleaar:both;を使います。

 

floatをかけたブロック要素のすぐ下に<div class=”clear”></div>と記述し、

クラスclearのCSSにclear:both;を記述することで、

先ほどのレイアウト崩れが解消されます。

 

こんな感じで

 

しかしこの方法は、レイアウトを整える為だけに不必要なHTMLを記述することになるため、あまり推奨されてない方法のようです。

 

メインとなるのがclearfixという方法です。

この手法は、floatさせる要素の親要素にclearfixというクラスをつけ、

そのクラスに疑似クラス:afterをつけて、CSSでclear:both;を行うというものです。

こんな感じで記述します。

 

contentってなんで入っているの?って疑問に思われる方は、

下記の記事に詳しく書いてあるので見てみてください。

「clearfix」についてちょっと考えてみた。

 

clearfixのメリットとして、

・親要素の高さが維持され、後に続く要素のレイアウト崩れが起きない

・記述が少なくてすむ

って感じらしいですね。

 

僕はほとんど空divでfloatを解除してたので、

今後はclearfixを使わないとなって感じました。

 

まとめ

今回は、僕がよく使う&忘れがちな初歩的コードを軽くまとめさせていただきました。

結構使う機会があると思うので、覚えておいて損は無いと思います。

自分が後から見返す為に、またこれからHTML/CSSを独学される方の為に、

今回の記事が少しでも役にたてば嬉しいですね。

 

ps. 最近全然コーディングの勉強してない。やばす

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA