わにゴコロ

印西・千葉ニュータウン情報、バレーボールのことなどを雑記と交えてお届けするブログ。

読み手の目に留まる「ワンポイント」「注意書き」をcssで作ってみた

calendar 2016-12-04

css勉強中のジミーです。

テキストのみの文章は、読むことに慣れていないと苦痛ですよね。文字を装飾して大事な部分を強調している記事は見やすくてスッと頭に入ってきます。装飾の方法は

文字サイズを変える

文字色を変える

アンダーラインを引く

などいろいろあります。単語や一文なら上記でよいのですが、まとまりのある段落なら段落ごと装飾したほうが分かりやすいのでは??

例えばこういう感じ。

Check!

この記事はブロガーさんやWebサイト制作をする方向けに書いています。「cssって何?という」方は、こちらの記事をご覧ください。

参考CSSとは?-CSSの基本 – HTMLクイックリファレンス

こういうのが文章の中に挟んであると整理されていてわかりやすいですよね。

ということでcssで作ってみました。ブロガーさんの参考になれば幸いです。

ワンポイントアドバイス的なやつ

見出し付きで囲う

完成品

One Point!

レモンの絞り汁を入れるとさっぱりとした味わいになります。カボスやスダチでも代用可能です。

css

.one_point{
position: relative;
vertical-align: baseline;
background-color: #f3f3ff;
border-radius: 3px;
border: 1px solid;
border-color: #33f;
padding: 50px 15px 20px 15px;
width: 90% ;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
}

.one_point p{
margin-bottom: 0px;
}

.one_point_title{
position: absolute;
background-color: #33f;
color: #fff;
max-width: 80%;
font-weight: bold;
font-size: 16px;
border: 1px solid;
border-color: #33f;
border-radius: 3px 0px 3px 0px;
margin: -51px -10px 0px -16px;
padding:5px;
}

html

<div class=”one_point”>
<div class=”one_point_title”>One Point!</div>
レモンの絞り汁を入れるとさっぱりとした味わいになります。
カボスやスダチでも代用可能です。
</div>

補足

見出しの文字は「One Point!」のところを直接編集すれば変えることができます。ただし2行になると見た目が崩れます。

見出し付きで囲う(見出しが擬似要素)

完成品

マヨネーズをひと回しいれると濃厚な味わいになります。入れすぎると味のバランスが崩れるので注意しましょう。

css

.one_point2{
position: relative;
vertical-align: baseline;
background-color: #f3f3ff;
border-radius: 3px;
border: 1px solid;
border-color: #33f;
padding: 50px 15px 20px 15px;
width: 90% ;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
}

.one_point2:before{
position: absolute;
color: #666;
content: “One Point!”;
font-size: 16px;
background-color: #33f;
color: #fff;
max-width: 80%;
font-weight: bold;
border: 1px solid;
border-color: #33f;
border-radius: 3px 0px 3px 0px;
margin: -51px -10px 0px -16px;
padding:5px;
}

html

<div class=”one_point2″>マヨネーズをひと回しいれると濃厚な味わいになります。入れすぎると味のバランスが崩れるので注意しましょう。</div>

補足

「One Point!」はcssの擬似要素で記述しています。cssを編集すれば変更可能ですが、全ての使用箇所で変わってしまうので注意しましょう。また、ブラウザの種類や設定によっては表示されないことがあります。

タグを付けて囲う

Check!

キッチンタイマーはセットしましたか??煮込み過ぎると風味を失ってしまうので、忘れないように。

css

.check_point{
position: relative;
vertical-align: baseline;
background-color: #fff;
border-radius: 3px;
border: 3px solid;
border-color: #88f;
padding: 20px 15px 20px 15px;
width: 90% ;
margin: 0 auto;
margin-top: 60px;
margin-bottom: 30px;
}

.check_point p{
margin-bottom: 0px;
}

.check_point_title{
position: absolute;
background-color: #88f;
font-size: 14px;
color: #fff;
font-weight: bold;
border: 1px solid;
border-color: #88f;
border-radius: 8px 8px 0px 0px;
margin: -50px -10px 0px -18px;
padding:3px 10px 1px 10px;
}

html

<div class=”check_point_title”>Check!</div>
キッチンタイマーはセットしましたか??煮込み過ぎると風味を失ってしまうので、忘れないように。
</div>

補足

タグの文字は「Check!」のところを直接編集すれば変えることができます。ただし2行になると見た目が崩れます。

タグ付けで囲う(見出しが擬似要素)

アクが浮かんでいませんか?アクが浮かんできたらこまめにとりましょうね。こまめにね。

css

.check_point2{
position: relative;
vertical-align: baseline;
background-color: #fff;
border-radius: 3px;
border: 3px solid;
border-color: #88f;
padding: 20px 15px 20px 15px;
width: 90% ;
margin: 0 auto;
margin-top: 60px;
margin-bottom: 30px;
}

.check_point2:before{
position: absolute;
color: #fff;
content: “Check!”;
font-weight: bold;
font-size: 14px;
background-color: #88f;
color: #fff;
max-width: 80%;
border: 1px solid;
border-color: #88f;
border-radius: 8px 8px 0px 0px;
margin: -50px -10px 0px -18px;
padding:3px 10px 1px 10px;
}

html

<div class=”check_point2″>アクが浮かんでいませんか?アクが浮かんできたらこまめにとりましょうね。こまめにね。</div>

補足

「Check!」はcssの擬似要素で記述しています。cssを編集すれば変更可能ですが、全ての使用箇所で変わってしまうので注意しましょう。また、ブラウザの種類や設定によっては表示されないことがあります。

上下をラインで囲う

!注意点

焦げ付かないように手短に
美味しいので食べすぎに注意
後片付けはちゃんとしてね

css

.attention{
position: relative;
vertical-align: baseline;
background-color: #fff;
border-radius: 4px;
border-top: 2px solid;
border-bottom: 2px solid;
border-color: #f00;
padding: 25px 30px 0px 30px;
width: 90% ;
margin: 0 auto;
margin-top: 40px;
margin-bottom: 30px;
}

.attention_title{
position: absolute;
background-color: #fff;
border-color: #000000;
border-radius: 3px 0px 0px 0px;
font-weight: bold;
font-size: 16px;
margin: -40px 0px 0px 0px;
padding: 0px 8px 0px 8px ;
color: #f00;
}

html

<div class=”attention”>
<div class=”attention_title”>!注意点</div>
焦げ付かないように手短に
美味しいので食べすぎに注意
後片付けはちゃんとしてね
</div>

補足

見出しの文字は「!注目ポイント」のところを直接編集すれば変えることができます。ただし2行になると見た目が崩れます。

上下をラインで囲う(見出しが擬似要素)

冷凍庫なら長期保存が可能です。
とはいえ、冷凍庫のこやしにならないように。
食べきってしまうのがベストです。

css

.attention2{
position: relative;
vertical-align: baseline;
background-color: #fff;
border-radius: 4px;
border-top: 2px solid;
border-bottom: 2px solid;
border-color: #f00;
padding: 25px 30px 0px 30px;
width: 90% ;
margin: 0 auto;
margin-top: 40px;
margin-bottom: 30px;
}

.attention2:before{
position: absolute;
content: “!注目ポイント”;
background-color: #fff;
border-color: #000000;
border-radius: 3px 0px 0px 0px;
font-weight: bold;
font-size: 16px;
margin: -40px 0px 0px 0px;
padding: 0px 8px 0px 8px ;
color: #f00;
}

html

<div class=”attention2″>
冷凍庫なら長期保存が可能です。
とはいえ、冷凍庫のこやしにならないように。
食べきってしまうのがベストです。
</div>

補足

「!注目ポイント」はcssの擬似要素で記述しています。cssを編集すれば変更可能ですが、全ての使用箇所で変わってしまうので注意しましょう。また、ブラウザの種類や設定によっては表示されないことがあります。

手書き風

この記事は備忘録的に書いているんだけど、けっこう手間がかかったなぁ。サクッと書いて公開できるようになりたい。

css

.tegaki {
margin:1em;
padding: 1em;
border: 3px solid #808080;
border-radius: 3em .5em 2em .5em / .5em 2em .5em 3em;
background-color: #fcfcfc;
}

html

<div class=”tegaki”>
この記事は備忘録的に書いているんだけど、けっこう手間がかかったなぁ。サクッと書いて公開できるようになりたい。
</div>

補足

フォントを変えると、もっと手書きっぽくなるかもしれません。

まとめ

いかがでしたでしょうか。ちょっとしたアクセントや注目して欲しいポイントなどに使うと、読みやすさがアップすると思いますよ。

これを書きながら授業のノートをとるのが上手な人のことを考えました。ノートが上手な人って分かりやすい記事を書くのも上手なんだろうなぁ。

この記事をシェアする

コメント

コメントはありません。

down コメントを残す