※当サイトは、Google Adsense、Amazonアソシエイト、各種アフィリエイト広告を利用しています。また、製品PRを行っている場合があります。
CSSで縦並びのレイアウトにする方法
CSS
例えばdivなどでレイアウトを行う際に、縦並びにしたい場合があります。
そんなときは、以下コードにて、flexboxで縦並びにするとよいです。
お試しください。
使い方は、親要素に以下CSSを追加することでその内部が縦並びになります。
.wrap {
display:flex;
flex-flow: column;
}
見本
HTML
<div class="wrap">
<div class="yoyoyo">aaaaa</div>
<div class="yoyoyo">bbbb</div>
<div class="yoyoyo">cccc</div>
</div>
CSS
.wrap {
display:flex;
flex-flow: column;
}
.yoyoyo{
padding:10px;
background-color:red;
color:#fff;
margin:10px auto;
width:50%;
}
関連記事

【CSS】文字の太さを指定する方法
CSSにて、文字の太さを指定する方法は以下の通り .example ...

IEでCSSのfloatが効かず改行されてしまう問題を解消する方法
CSSで、float:leftだとかfloat:rightとかで指定することで ...

CSSで何番目の要素に対して指定する方法
例えば、対象のHTMLコードが修正できなく、classやidが無いなどで何番目か ...

【CSS】<ul><li>タグのドットを表示・消去する方法
WPのテーマによっては、 <ul><li>タグが効かずに ...

【CSS】電話番号にリンクを貼り付けてないのにスマホでリンクが付いてるのを解除する方法
ホームページ制作で 電話番号とか住所の番地にリンクを貼り付けていないのに スマホ ...
カテゴリー
こんにちは、Hiro先生です。 今回は、デジタル時代における「ユーザー理解」を深めるために非常に重要なツール、Amplitude(アンプリチュード)という分析プラットフォームについて、...
最近は、Youtubeが多いので、たまにアップした動画を埋め込む際、動画の埋め込みタグって何だっけ?とど忘れしてしまうこともあったりします。...
充実様です。Hiro先生です♪ 今回、とても使いやすいPDF編集ソフトである「MiniTool PDF Editor」と巡り会ったので、ご紹介したいなと思います。...
ブログやホームページにYoutube動画を埋め込む際にYoutubeで埋め込みコードをコピペするとサイズが小さかったり、でかすぎたり、左寄せで見栄えが悪かったり。...
はじめて、レジストリのエリアをいじる際、パス指定でHKLM:¥とか表示されているやついったい何なん?...
PowerShellの画面で入力した、たくさん表示されてるコードなどをサクッと削除、クリアするコマンドは、以下のいずれかにて実行することが出来ます。 または...
noteにて、ふりがなを入れるには少しコツがいります。 下記、フォーマットに従って設定することで簡単にふりがなを入れることが出来るようになりますので誰でもやさしく読めるようになります。...
コピーしたデータが一つ一つセルごとに分かれて貼り付けられる予定だったものが一つのセルにすべて貼り付けられてしまった。 あるいは特定のセルが分割されずに一つのセルに入ってしまった。...
今回は、大量のデータを一つ一つチェックしていては手間がかかる重複チェックをサクッとできる方法について解説したいと思います。...
ブロックエディタで構築したいところがあるがテーマの仕様などによって、そのエリアはブロックエディタを扱うことが出来ないというときがあります。...