displayプロパティ
display:block;
/*要素をブロック要素にする*/
HTML
<a class="btn href="URL">
ボタン
</a>
CSS
.btn{
background-color: #ccc; /* 背景色 */
text-align: center; /* 文字を要素の中央に */
color: #000; /* 文字の色 */
width: 300px; /* 要素の幅指定 */
padding: 20px 0; /* 周りの余白指定 */
border-radius: 10px; /* 角丸 */
text-decoration: none; /* 文字の下の線を消す */
display:block; /* ブロック要素にする */
}
display:inline;
HTML
<div class="contents_test">
横に並べたい!
</div>
<div class="contents_test">
横に並べたい!
</div>
<div class="contents_test">
横に並べたい!
</div>
CSS
.contents_test{
background-color: #ccc; /* 背景色 */
display:inline; /* インライン要素にする */
}
display:inline-block;
HTML
<div class="contents_test">
高さを指定しつつ並べたい!
</div>
<div class="contents_test">
高さを指定しつつ並べたい!
</div>
<div class="contents_test">
高さを指定しつつ並べたい!
</div>
CSS
.contents_test{
background-color: #ccc; /* 背景色 */
width: 170px; /* 幅指定 */
padding: 20px 10px; /* 余白指定 */
height: 70px; /* 高さ指定 */
display:inline-block; /* インラインブロック要素にする */
}
display:none;
HTML
<div class="display_test">
ソース上には存在します
</div>
画面上では上の文字は表示されません
CSS
.display_test{
display:none; /* 要素を非表示にする */
}
display:flex;
HTML
<header>
<ul class="flex_menu">
<li><a href="URL">テキスト</a></li>
<li><a href="URL">テキスト</a></li>
<li><a href="URL">テキスト</a></li>
<li><a href="URL">テキスト</a></li>
<li><a href="URL">テキスト</a></li>
</ul>
</header>
<main>
メインコンテンツ
</main>
<footer>
フッター
</footer>
CSS
.flex_menu {
display: flex; /* フレキシブルボックスにする */
justify-content: space-around; /* 子要素の並び方を指定する */
padding: 10px; /* 余白指定 */
margin: 0; /* デフォルトのスタイルを消す */
list-style: none; /* デフォルトのスタイルを消す */
}
.flex_menu > li {
padding: 5px; /* 余白指定 */
border-bottom: solid 2px; /* 下線指定 */
}
.flex_menu > li > a{
display: block; /* ブロック要素にする */
text-decoration: none; /* デフォルトのスタイルを消す */
color: #222; /* 文字色指定 */
}
main {
border: solid 1px #ccc; /* 枠線指定 */
height: 200px; /* 高さ指定 */
padding: 20px; /* 余白指定 */
}
footer {
background-color: #ccc; /* 背景色指定 */
text-align: center; /* 文字中央揃え */
}
body {
border: solid 1px #aaa; /* 枠線指定 */
}
display:table; display:table:cell;
HTML
<div class="parent">
<div class="child">text1</div>
<div class="child">text2</div>
<div class="child">text3</div>
<div class="child">text4</div>
</div>
CSS
.parent{
display:table;
width:100;
border:2px solid red;
}
.child{
display:table-cell;
border:2px solid yellow;
border-collapse:separate;
border-spacing:20px 5px;
}
この記事が気に入ったらサポートをしてみませんか?