Subscribed unsubscribe Subscribe Subscribe

CSSを少し触ってみる

画像と文字の高さを調整する

<div>
  <p>文字<img src="" alt=""><p>
</div>

※pタグとimgタグにそれぞれvertical-align: centerを加えればきれいになります。

情報のブロックを横に並べたい

<section>

</section>
<section>

</section>

※それぞれ、float: left;を付与します

文字

font-size: 20px;
font-weight: bold;
line-height: 1.6;
color: #000000;

※これで文字の色、フォントサイズ、b表示、行と行の間の間隔を調整できます。

四角い枠を作成する

display: block;
padding: 20px;
border-radius: 5px;
background-color: #ffffff;
margin: 20px 20px 20px 20px;

※これで白背景の四角い枠ができます