Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

Flexboxで横並びを簡単に!

 

皆さんは横並びのメニューなどのコーディングの際にflotタグ使っていませんか?
flotだと解除が面倒、レイアウトが崩れるなど困った経験がありませんか?
そんな方にFlexboxをおすすめします。

Flexboxの書き方

Flexコンテナという親要素の中にFlexアイテムという子要素をHTMLで作ります。
では、実際にコードを書いてみましょう。

HTML

<div class=”container”>
<div class=”item”>Item1</div>
<div class=”item”>Item2</div>
<div class=”item”>Item3</div>
<div class=”item”>Item4</div>
</div>

このように書くと以下のように表示されます。

後は親要素のcontainerのCSSにdisplay: flex;を入れてください。

CSS

.container {
display: flex;
}

これで横並びになりました。
解除のCSSは必要ありません。

水平方向での揃え方

水平方向で揃えたい場合はjustify-contentを使います。
親要素に空いたスペースがあれば表現が可能です。
メニューの作成などに便利です。

flex-start(初期値)… 行の開始位置から配置します。左揃えになります。
flex-end … 行末から配置します。右揃えになります。
center … 中央揃えになります。
space-between … 最初と最後の子要素を両端に配置して、残りの要素は均等な間隔で配置します。
space-around … 両端の子要素も含めて、均等に間隔をあけて配置します。

もっとWebレイアウトを極めたいなら!

こちらの本は、Web初心者でもわかりやすく解説している参考書です。
Web制作の基礎はもちろん、Googleマップの組み込み方やブログカードの作り方など、基本的なことを幅広く解説されています。
また、古くからWeb制作を仕事にしている方で、トレンドのWebについて知りたいという方もこの本を読んでいる方が多いそうです。
ぜひ一冊手元に置いておきたいですね!


  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. htmlcssアイコン画像

    Web

    オススメ!【Animate.css + wow.js 】を使ったスクロールアニメーション

    どうもこんにちは。今回はweb制作で使えるスクロールアニメーシ…

  2. Web

    WEBで使える画像は4つ!ファイルサイズも比べてみた

    WEB用の写真やイラレやフォトショで作った画像を書き出すとき、「とりあ…

  3. Web

    HTML&CSS初心者が通る道。バリデーターで文法チェック

    初心者みんなが通る道(かな?)間違い探しHTMLを習い始めたと…

  4. Just Code

    Web

    Just Code cssで画像加工

    CSSを使用して、画像を加工するツールを紹介します。オンラインで利…

人気の記事

おすすめの参考書

PAGE TOP