あしらいとは？
あしらいとは、部分的に当てる装飾のことを指します。
あしらいは、必ず取り入れなくてはいけないわけではありませんが
利用すると、特定の部分だけ強調することができたり、同じような要素が並んでいる箇所では変化を与えることができます。
例えば、あしらいのひとつに「テキストにマーカーを引く」というものがありますが
「もっと詳しく知りたい人は、ここをクリックしてください！」という文章があり、「ここをクリック」の部分に別のページのリンクが貼ってあるとします。
「ここをクリック」の部分に別のページのリンクを貼っておくだけでも色が変わるので、ページを見ている側も「あ、ここにリンクが貼ってあるんだな！」とは分かるでしょうが
「ここをクリック」のテキストの部分だけマーカーが引いてあったらどうでしょう？
該当テキストが強調され、ここにリンクが貼ってあることがより明確になりますよね？
あしらいを習得できると、サイトにメリハリをつけることができるようになり
Webデザイナーやサイト制作者として一歩抜きん出ることができますので、頑張って習得していきましょう！
よく使われるあしらい
下線（アンダーライン）
1つ目は、「下線（アンダーライン）」です。
説明するまでもないと思いますが、テキストの下に線が入っている装飾ですね。
また、下のようなマーカーが引いてあるテキストの表現も多用され
下線より強調度合いを高めたい時にお勧めのあしらいです。
座布団
座布団とは、テキストを楕円の枠などで囲ったもののことを言います。
Webサイトでよく登場するので、1度は見たことがあると思いますし、案件でも頻出のデザインです。
波線
続いては、「波線」です。
1つ目に紹介した下線の波線（ゆらゆらした下線）もありますが、ここで紹介したいのはそれでなく
セクションのトップやボトムに指定し、セクション間で動きを付けるあしらいの方です。
ただセクションを設置しても単調になりますが、波線のようなあしらいを入れることで変化をもたらしたり、遊び心を加えることができます。
セクション間でよく追加されるあしらいには、斜線もありますね！
歪んだ円
正円ではなく、少し手書きでブレているような円もあしらいとしてよく出てきます。
無料相談や資料請求、お問い合わせボタンなど、様々なボタンに応用できるかと思います。
4方向のいずれかの端だけ丸くする
歪んだ円と少し似ていますが、こちらは「長方形のいくつかの角を丸くする」というあしらいです。
例えば、セクションに背景色を付け、左上と左下だけ丸くし
右端に寄せることで、遊び心があるデザインに仕上がります。
では、あしらいの種類を理解できたところで
実際に、いくつかのあしらいを実装してみましょう！
今回は、「下線（アンダーライン）」と「座布団」を実装していきます。
下線（アンダーライン）を実装してみよう！
まずは、指定したテキストに下線を引いてみましょう。
テキストに下線を引くには、border-bottomプロパティを適用します。
See the Pen CSSでテキストに下線を入れる by わい (@y_programing) on CodePen.
他にも、text-decorationプロパティにunderlineを指定することでも下線は引けます。
今回は、 h2に以下のようなCSSを当てています。
h2 {
border-bottom: 3px solid lightpink;
}border-bottomのみならず、borderには
border: (線の太さ) (線の形) (色);
を指定する必要があります。
もし、実線でもっと細い線、例えば1pxくらいの線を引きたかったら
h2 {
border-bottom: 1px solid lightpink;
}にすればいいですし、ドットや破線などにしたい場合は
h2 {
border-bottom: 3px dotted/dashed lightpink;
}などにすればいいです。
See the Pen CSSでテキストに下線を入れる（ドット線） by わい (@y_programing) on CodePen.
See the Pen CSSでテキストに下線を入れる（破線） by わい (@y_programing) on CodePen.
座布団を実装してみよう！
続いては、座布団です。
こちらも指定したテキストに座布団を敷いていきますが、divタグで囲んで白色のborderを付け、テキスト周りの背景をbackground: #fffでborderと同じ白色を付けています。
ただ、デフォルトの背景も白色で見分けがつかないため、body全体の背景はライトブルーにしています。
See the Pen あしらい（座布団） by わい (@y_programing) on CodePen.
詳しいCSSは、以下の通り。
body {
background: lightblue;
}
.zabuton {
padding: 10px;
margin: 10px 10px 0;
background: #fff;
width: 215px;
border: 1px solid #fff;
border-radius: 5px;
}先ほども言及した通り、body全体（画面全体）にライトブルーの背景色を付けた上で
zabutonというclass名をつけたdivタグに対し、白のborderと背景色を付けています。
それだけだとborderとテキストの間が窮屈なので、padding: 10px; を指定。
さらに、テキストを囲っている白色の四角の角を少し丸めるために、border-radius: 5px; も入れています。
座布団も、そこまで難しい実装ではないので
挑戦してみたい人はぜひエディターを開いてやってみてくださいね。
まとめ
ということで、今回は「あしらい」について解説していきましが、軽く復習しておくと
- あしらいとは装飾のことで、付けることによってある部分を強調したり目立たせる機能がある
- あしらいには、「下線（アンダーライン）」や「座布団」などがある
- 意外に簡単に実装できるものもある
ということでした！
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
＼ 最新情報をチェック ／
コメント