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. Web

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

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

  2. Flexbox(縦並び)

    Web

    Flexboxで縦並びを簡単に!

    以前、ご紹介しました「Flexboxで横並びを簡単に!」…

  3. Web

    無料!30秒で!グーグルマップの色味を変える方法

    グーグルマップの色味はCSSのfilterプロパティを使って簡単に変え…

  4. Web

    Vegas2で背景画像をスライドショーに(jQueryプラグイン)

    cssで背景画像として設置していた画像をスライドショーにしたい。画面い…

  5. Subtle Patterns

    Web

    WEBサイトの背景などに!商用OKの無料テクスチャ素材サイト「Subtle Patterns」の紹介…

    みなさんウェブサイト作りは捗っていますでしょうか?自分はやっとトップペ…

  6. Modern Fluid Typography Editor

    Web

    簡単なCSSでフォントサイズをレスポンシブ対応にしよう!

    フォントサイズのレスポンシブ対応WEBサイトをレスポンシブ対応にす…

人気の記事

おすすめの参考書

PAGE TOP