インライン要素
インライン要素とは、pタグの中のstrongタグのように、ブロック要素の一部を強調するような使われ方をする要素です。
ブロック要素に「display:inline;」と指定するとインライン要素になります。
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
* 前後には改行が入らない
* 幅 (width) と高さ (height) を指定できず、文字の太さや文章の長さで決まる
* 余白 (padding,margin) を左右に指定できる
ブロック要素
ブロック要素とは、見出し・段落・表など、文書を構成する基本となる要素です。
インライン要素に「display:block;」と指定するとブロック要素になります。
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
* 前後には改行が入る
* 幅 (width) と高さ (height) を指定できる
* 余白 (padding,margin) を上下左右に指定できる
フレックスボックス
フレックスボックスとは定義した要素の、その直下の要素が並列になるスタイルです。
要素に「display:flex;」と指定するとフレックスボックスになります。
* 前後には改行が入らない
* 幅 (width) と高さ (height) を指定できる
* 余白 (padding,margin) を上下左右に指定できる
CASE. 共通のHTML
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
CASE. <li> を並列にする
ul {
display: -webkit-flex;
display: flex;
}
CASE. <li> を並列に、<ul> を中央に配置する
ul {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
* justify-content:center;水平方向の揃え
* align-items:center;垂直方向の揃え
CASE. <li> を並列にする
ul {
display: -webkit-flex;
display: flex;
}
flexboxを使ったdiv要素の中央配置
・HTML
<div class=’cssCenter’>
<div></div>
</div>
・CSS
.cssCenter {
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
}