【囲み枠】の作り方。 基本のきほんから の CSSとHTML

記事作成に欠かせない 装飾のひとつが 囲み枠です。
文章を囲むことで 大事なポイントや 注意点を 分かりやすく表示させることができます。

色やデザインなど、用途に合わせて使い分けるための スタイルシートの書き方を 解説していきます。

囲み枠の作成と表示の手順

囲み枠は CSSコードで BOX と言います。
基本的な BOXは normal-box タイトル付きの BOXは title-box といった感じです。

スタイルシートで作成したBOXを呼び出すには 投稿記事の作成画面でコードを記述します。

BOXの作成 – CSS style –

まず、初めに CSS（スタイルシート）に 線種・線の幅・色などを 指定したものを作成します。

基本的なコードはこんな感じです。

BOXを呼び出す – 投稿作成  HTML –

次に、投稿画面で 囲みたい文字列を HTML コードで囲みます。

<div> と </div> の間に文字列を入れる といった感じです。

スタイルの カスタマイズ

まずは、作成したBOXがないと カスタマイズのしようがないので
とりあえずでいいので 外観カスタマイズの 追加CSS から
スタイルシートを記述し 投稿画面で コードを書いてみましょう。

囲み枠の種類と CSSコード

囲み枠は最低でも３種類、基本の枠・タイトル付きの枠 そして 注意喚起などの枠 が欲しいですね。

それ以外にも Box ごとに 名前を付けることで 何種類にでも枠を使い分けることができます。

基本の囲み枠 ー normal – box ー

まずは 基本的な 囲み枠から。
先ほどのコードに margin や padding といった 余白の調整のコードも一緒に記述していきます。
余白に関する記事はこちら →コンテンツの余白を設定 = CSSカスタマイズ【margin】の基礎知識

/*基本枠-CSS*/ というのは コードに関係する部分ではなく このCSSコードの
カスタマイズの内容を 自分自身が把握しておくための 名称のようなものですので
分かりやすいように名前を付けておくといいです。

この box1 の数字部分を書き換えていくことで 何パターンにも
囲み枠のスタイルを作成することができます。

タイトル付きの囲み枠 ー title-box ー

囲み枠に タイトルを付けたい時には このコードを使用します。

注意喚起の囲み枠 ー cautionbox ー

注意喚起は 文字通り、注意を引くようなイメージで作成します。

こちらは注意喚起のマークとして FontAwesome（フォントオーサム）の アイコンを使用しています。

FontAwesome は使用するアイコンによって プラグインのインストールや
FontAwesomeのダウンロードが必要になります。
詳しい内容はこちら ➡ プラグインなし！Font Awesome (ﾌｫﾝﾄｵｰｻﾑ) アイコンを ルクセリタスで使う方法

文字の長さに合わせて Boxの幅を変動させるコード

コードの中に display:inline-block; というコードがあります。
こちらのコードは囲み枠や見出しなどのラインの長さを
文章の長さに合わせてサイズを自動的に変動してくれるコードです。

私的には サイトの幅のままで 短い文章の時などは
バランスが悪くなってしまうと感じるのでこちらのコードを使用しています。

HTMLコードの記述のしかた

投稿記事の作成画面で 記述する HTMLのコードですが
枠の種類と 作成したナンバーごとで コードが少しずつ変わります。

覚えるのが大変なので 定型文登録しておくことをお勧めします。

定型文登録についての詳しい記事はこちら↓
定型文登録をフル活用！！文字登録で効率よく記事を作成できる機能

基本の囲み枠  ー normal-box1 ー

基本枠-HTML

<p>ここにテキスト</p> の部分に囲み枠で表示したい文章を書き込みます。

タイトル付きの囲み枠 ー title-box ー

注意喚起の囲み枠 ー cautionbox ー

以上、【囲み枠】の作り方。 基本のきほんから の CSSとHTML でした！！