このようなお悩みを解決します。
本記事の内容
・テキストを横並びにする方法
・まとめ：WEBサイトの制作をするなら必須の知識です
本記事の信頼性
本記事を書いている僕は、物販会社を経営しつつ、せどりやWEBライティングをしています。
今回は、僕の会社のサイトで、テキストを２列にするという作業が発生したので、備忘録的に方法について残しておきます。
具体的には、サービス内容を2列に並べた感じです。
ちなみに、本記事を書いている僕は、WordPressのテーマとしてSTORKを使用しております。
コーポレートサイトは、AFFINGERというテーマを使用しているのですが、今回はAFFINGER上で作業をした内容になります。
しかし、コード自体は汎用的なので問題なく使える方法になります。
MENU
テキストを横並びにする方法
今回は、簡単にテキストを横並びにする方法を説明します。
これさえできれば、そのテキストに合わせて画像を貼ったりリンクを貼ったりできますので、原型としてこれを使えるようになることに価値があると考えています。
コードは２種類あり、HTMLとCSSです。
順番はどちらからでも構いません。
その①：並列させる文字を囲む【HTML】
ボックス1とボックス2というテキストを並べたい場合、まずは以下のようにテキストを囲みます。
<div class="ib-box">ボックス1</div>
<div class="ib-box">ボックス2</div>その②：「追加CSS」に追記する【CSS】
テーマに標準で付いていることが多い「追加CSS」という欄に以下のコードを追記します。
※ 幅などは適宜修正してください。
.ib-box{
display: inline-block;
width: 100px;
height: 100px;
margin: 13px;
}その③：テキストをプレビューで確認してみる
以下のように、テキストが横並びになっていれば成功です。
まとめ：WEBサイトの制作をするなら必須の知識です
今回は、テキストを横並びにしましたが、なぜこのようなことをするかと言うと、見栄えの問題です。
WEBサイトの全体レイアウトやデザインを見た時に、テキストや画像が1列になっていると見栄えが悪い時があります。
このような場合の対処方法として、覚えておいた方が良いでしょう。
個人ブログでは使用機会が少ないかもしれませんが、より見やすく表現するといった場面で使う可能性がありますので、是非覚えてみてください。
今回は以上です。
今、サイトを制作しているのですが、テキストを並列させたいと思っています。でもやり方が全く分からず、困っています。