スポンサーリンク

CSSを使って囲み枠を作ってみた!ちょっとおしゃれなデザインにチャレンジ!

2019年7月6日

  • 2019年7月27日
    『1-5 サブタイトル付き』を追加しました。

 
前回の記事で基本的なCSSを使って囲み枠を作る方法を紹介しました。

今回はちょっとだけおしゃれな囲み枠を作ってみたのでご紹介します。

きらり

きらり

今回はCSSとか教えてくれないの?
結耶

結耶

んーデザインによって使うもの違うしね(^^;
できるだけどこをいじったらいいかを解説はするようにします。

 

スポンサーリンク

 

シンプル(タイトル付き)

1-1 枠線の上にタイトル
1-1 枠線上にタイトルシンプルな囲み枠の左上の枠線の上にタイトルをつけたものです。

HTML

CSS

Point

  • タイトルの位置がズレたりした場合は、12行目のtop、13行目leftの値を変えてください。
  • タイトルの背景色を帰る場合は15行目の色を変更してください。合わせて文字色(color)no指定もしてください。

 

タイトルの位置を変える

上のCSSの12行目と13行目のtopやleftを変えるとタイトルの位置を変えることができます。

タイトルタイトルを右上にしたものです。
上のCSS 13行目の「left」を「right」に変えるとタイトルが右上になります。

 

タイトル12行目のtopをbottom、13行目のleftをrightに変えると右下にタイトルを表示させることができます。

 

タイトルの背景色を変える

15行目のbackgroundの色を変更すれば背景色を変更することができます。

普段は白背景を使っていても…ときと場合によっては「色を変えたい」と思うこともあります。

きらり

きらり

そういうときはまたクラス名を変えてCSSを新たに設定した方がいいの?
結耶

結耶

ううん。その必要はないよ。
CSSはHTMLに近い方が適用されるからHTMLに変えたい箇所をstyle=""で指定すれば変えられるよ!

 

タイトルと枠線の色を変えてみた!<div class="box1-1″ style="border-color:navy;">
<span class="box-title1″ style=""background:royalblue; color:white; ">タイトル付き</span>ここに内容</div>

HTMLnの黄色い部分のようにCSSを入れてタイトルと枠線の色を変えています。
このようにすればときどき色を変えたいときに色を変えることができます。

 

結耶

結耶

といってもbody内にCSSをあまり入れない方がいいと言われています。
ときど~き変えるときだけにしておいてください。

 

私がやっているタイトルの背景色の変え方

私はタイトル付きの囲み枠のタイトル部分のCSSは背景色と文字色の指定をしていません。

タイトルの背景色と文字色を別でCSSを設定しています。

例えば上のような場合、

こんな感じで青色以外の色も作っています。
そしてこれをタイトル部分のclass="box-title ao-label" と追加してタイトルの色を変えています。

※複数のクラスを指定する場合は半角スペースで区切って指定してください。

このように別に作ったものはボックスのタイトルだけではなく こんな風に文章など他のところでも使えます。
(ちなみにたびたび出てくるのHTML CSSでもこれらを使っていますw)

結耶

結耶

これはあくまで私のやり方です。私はこの方が都合がいいのでこうしています。

 

スポンサーリンク

 

 

1-2 枠線の上にタイトル(角丸)
1-2 枠線上にタイトル(角丸)シンプルな囲み枠(角丸)の左上の枠線の上にタイトルをつけたものです。

HTML

CSS

 

1-3 ボックスの上にタイトル
1-3 ボックスの上にタイトルボックスの上にタイトルをつけてみました。

HTML

CSS

 

1-4 ボックスの中(左上)にタイトル
ボックスの中(左上)ボックスの中(左上)にタイトルをつけたものです。

HTML

CSS

 

1-4 ① ボックスの中(枠いっぱい)にタイトル
ボックスの中(枠いっぱい)上のタイトル部分を枠いっぱいに広げてタイトルを中央に表示するようにしたものです。

HTML

CSS

 

1-5 サブタイトル付き
1-5 サブタイトル付き
サブタイトル付きのボックスです。左上枠線上にサブタイトルを付けて、ボックス内にタイトルをつけました。

HTML

CSS

※サブタイトル(左上枠線上)は『Point』にしています。変更する場合は15行目の『Point』を変更してください。
また字体はWebフォント(欧文フォント)を使用しています。使わない場合は14行目のfont-familyを削除または他のフォントに変更してください。

※上の『Point』だけで下のタイトル無しにする場合HTMLの2行目、CSSの22行目~30行目を削除してください。

 

 

黒板風

前回紹介した黒板風の囲み枠にもタイトルをつけてみます。
※タイトルなしのコードは全2回の記事を参考にしてください。
    CSSを使って囲み枠を作ってみよう!

 

2 黒板風(タイトル付き)
お知らせタイトルをつけてみました(*^^*)
「お知らせ」の部分がタイトルになります。

HTML

CSS

 

お知らせタイトルの位置を変えたものです。

HTML

CSS

※タイトル部分の線(二重線)がいらない場合は21行目の「border:3px double #fff;」を削除してください。

 

 

 

メモ風

3-1 メモ風囲み枠
MEMO

こんな囲み枠を作ってみました!
メモ風というかノートのように罫線が入った囲み枠です(*^^*)
 
ちゃんと文章(行)に合わせて罫線が表示されます

HTML

CSS

 
※罫線部分は背景画像(26行目)で罫線に見えるようにしています。

罫線となる画像の作り方は以下の通りです。

罫線画像の作り方

  1. 画像の大きさ:縦 28px×横 5px(高さは行間と同じにしないといけないので自分のブログにあった高さにしてください。)
  2. 下から1px~2pxあたりにポチポチ点を3px分横に線を描きます。(点線に見えるように2px分は残します)
  3. 画像を保存します。(背景色を設定している場合は画像全体に背景色と同じ色で塗りつぶすかPNG(透過))で保存してください。
  4. できた画像をアップロードしてURLを26行目background-imageに記述してください。

※27行目のline-heightは行間です。ここの値は必ず罫線画像の高さと同じにしてください。

 

3-2 メモ風 上下に線
MEMO

ここに内容

HTML

HTML

 

 

最後に

今回はタイトル付きの囲み枠を作ってみました。
タイトルがついただけでもちょっとオシャレになりませんか?

上記のサンプルは私のブログに合わせて作っています。
みなさんのサイトでは位置がズレたりしてしまうかもしれません。
もしコピーして使う場合はご自分のサイトに合わせて調整をしてください。

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。