要素を横並びにする方法 HTML,CSS復習⑩

こんにちは、今日はHTML,CSSの復習の10回目となります。

不具合で記事が消えたので書き直しました　涙

要素を横並びにする方法

要素を横に並べるには

display : inline-block;  /*要素を横並びにする*/

を追加するだけです。

まずは角が丸い四角を作ります。

スタイルシートには次のように記述します。

div.yokonarabi{
display:  inline-block;
border-radius: 10px; /* 四隅を丸くする */
padding: 10px; /*領域と文字との余白10px*/
background: lightblue; /*背景色　lightblue*/
border: 2px solid pink; /*境界線の幅2px solidは実戦　色はskyblue*/
height: 100px;
}

記事中には次のように記述します。

<div class="yokoranabi">左の要素です</div>
<div class="yokoranabi">右の要素です。</div>

すると次のようになります。

左の要素です

右の要素です

これで吹き出しアイコン→吹き出し内容と横に並べることができそうです！

他のサイトは一つのページに情報を詰めすぎてたり、コードを説明してなかったりでわかりにくいのでそうならないようにしていきたいと思います

#スタイルシート

#HTMLタグ

#CSS

#要素を横に並べる