KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】デモサイトを作って自分の作品を公開するまでの道のり#6「cssで要素を横並びに設置する」

この記事をシェアする

前回の更新からだいぶ経っていましたが、久しぶりにでもサイト開発の続きをやりました。

確か前回は、メニュー部品を追加して終わっていました。
www.kimuson.com

以前の悩み事として、タイトルの横にメニュー部品を横並びに設置したかった。
f:id:samuraikid520:20180303223347p:plain

これが結構難しかった。
結果的には要素を横並びに設置することができました。
f:id:samuraikid520:20180303223556p:plain

やったこと

タイトル部品のdivに

display: inline-block;

を設定しました。

あとはタイトル部品の要素に

float:left;

メニュー部品要素に

 float: right;


を実装しました。

こいつを改修するために「css 要素 横並び」で調べたらいろんな方法でこの問題を解決できることを知りました。

この「横並び問題」は初心者がつまずくポイントみたいですね。

横並び実装をするために参考にしたサイト

ちなみに参考にしたサイトは以下

qiita.com

今回の実装ではやっていませんが、最近の手法では「Flexbox」が主流らしい。

www.sw-mono.blog

まとめ

f:id:samuraikid520:20180303225614g:plain

一旦今回のデモサイト作りでやりたかった表現はできました。

あとは、配色とかレイアウトとかのデザイン部分をもっと勉強してアウトプットしていきたいですね。

次回は何をしようか考え中。。。