[css]ハイパーリンクの下線をカスタマイズ

ウェブサイト上で、他のページや他のサイトに飛ぶための機能を「ハイパーリンク機能」と言いますが、通常ブラウザで閲覧する際はユーザーがそれとすぐわかるように、そのテキスト箇所のみ色が変わっていたり下線が引いてあったりします。

デザイナーやコーダーの皆さんであれば、単にアンカータグで囲むだけで勝手にブラウザがテキストに下線を引いてくれるのはご承知の通りかと思います。

しかしデフォルトのままだと何か寂しいというか、見た目を色々と工夫してみたくなるのは制作者としては当然の欲求でしょう。と言うことで、今回はCSSを使用してカスタマイズする方法を備忘録として書き記しておこうと思います。

基本の「text-decoration: underline;」

基本はやはり、下記のようにマウスオーバーで下線のオンオフを切り替える手法ですね。

a:link { text-decoration: underline;}

a:hover { text-decoration: none;}

:link 疑似クラスの[ text-decoration ]を[ none ]に設定するのは、ユーザビリティ上好ましくないです。ユーザーが見てすぐそれと判別できるよう、下線を引いておくのがベターでしょう。しかし、この方法ですと下線のみ色を変更することができません。

CSSで下線を引いてみる

であれば、[ border-bottom ]で下線を引きましょう。

a{ border-bottom: 1px  solid  orange }

この方法であれば、下線の色のみを変更することができますし、

[ solid ]・・・1本線

[ double ]・・・2本線

[ dotted ]・・・点線

[ dashed ]・・・破線

のように、線の種類を変更することもできます。

他にも[ groove ]、[ ridge ] などの指定もありますが、正直パッと見てよく分からないのであまり使いどころが無い気がします。

background: lineargradient で文字の背景に下線を引く

テキストに、まるで蛍光マーカーで線を引いたような効果を出すため、線形グラデーションを表現するための[lineargradient() ]を指定する方法が一時期流行っていましたが、この方法を使って下線を引くこともできます。

background: lineargradient( black,  black ) no-repeat;

background-size: 100%  1px;

background-position: 0  1.2em;

上記のように指定すると、黒の下線が指定箇所の横幅100%で1pxの太さの線が文字の上から1.2emの場所に引かれることになります。ちなみに、上記の場合[ padding-bottom ]で余分にスペースを取っておかないと、下線が見切れて表示されませんのでご注意を。

CSS3での新たなプロパティ

まだ勧告候補の段階ですが、text-decorationについて新たなプロパティが定義されているようです。現在ほとんどのブラウザで未対応ですが、[ text-decoration-style ]プロパティで[ wavy ]と指定することで波線を引くこともできるようです。

いずれどんどんと、新しい表現方法が使用できるようになるのでしょう。楽しみですね。

 

イラストレーションの”わかりやすさ”(2)

見る人に伝わりやすい、わかりやすいイラストレーションを描くにあたってというテーマで書いております。第二弾の記事となります。

前回は人物のポーズについて取り上げましたが、今回は「アングル」について書いてみたいと思います。

真正面はわかりやすいけど・・・

人物を描く際には、自分がカメラマンであると想定してみましょう。ポートレート撮影の場合は、ややカメラの視点を下げると被写体の足が長く見えるとか色々テクニックがあるようですが、イラストの場合は「人物の様子がわかりやすい、伝わりやすい」位置にカメラを置きます。

具体的には、「人物のポーズがわかりやすいアングルで」描く事がポイントです。

では、以下に例を挙げてみます。今回は「やる気に満ちた会社員女性」を描いてみたいと思います(全く関係ない話ですが、やはり最近は『OL』とは言わないんですかね?)。

前回の「悩んでいる」と比べて「やる気に満ちている」様子は、やや難しいかもしれません。言葉自体が曖昧ですし、やる気に満ちたポーズと言われても色々な表現がありそうです。

では一案目はこちら。

161123a_01

今回も真正面の構図ですが、全身を入れてみました。小さくガッツポーズをさせる事により、やる気、自信を表現しています。ポーズは悪くないように思えますが少々おとなしい印象も受けます。ではこのイラストのアングルを少々変えてみました。それがこちら。

161123a_02

真正面ではなく、少し斜めの角度で書いてみました。顔も心もち上を見上げる形にしています。どうでしょう。先ほどの案よりもやる気に満ちた印象を受けないでしょうか。

シルエットにすると一目瞭然!

人物のポーズやアングルを考える際、シルエットの状態にしても何をやっているのかが伝わるイラストが良いと言われています。

では試しに、今回のイラストをシルエットの状態にしてみましょう。

161123a_03161123a_04

 

・・・若干ですが、右側のイラストの方が伝わりやすいのではないでしょうか(そうでもない?)。真正面はシンプルで描きやすいアングルではありますが、少々単調でつまらない印象を与えてしまう事もあります。ポーズを変えなくとも、アングルを変えるだけでポーズの意図が伝わりやすくなる事がありますので、是非色々と試してみてください。

一応前回のイラストもシルエットにしてみました。それがこちら。

161123_03 161123_04

こちらはより違いがわかりやすいと思います。左側はただの上半身にしか見えませんが、右側は明らかに両手で頭を抱えている事がわかりますね。

イラストは何が描いてあるかがわかるだけでは不十分で、伝えたいメッセージが伝わらなくては意味がありません。キャラクターがどんな感情で、何をしているのか何をしようとしているのかを伝える事が出来れば上出来です。

イラストレーションの”わかりやすさ”(1)

まだまだイラストレーターとしては、未熟者もいいところの僕ではありますが、こんな自分でもイラストを描くにあたって、いつも心がけている事があります。

僕がイラストを描くにあたって、まず心がけている事は

“わかりやすいイラストを描く事”

です。

他の人がイラストを見た時に「このキャラクターは、何をしているんだろう?」と思わせてしまわないように、イラストで「何を伝えたいのか」を明確にする事です。

わかりやすいイラストを描くには、物の特徴を正確に捉えつつもある程度デフォルメさせる事が大事ですが人物の場合は、ポーズやアングルが非常に大事になってきます。

以下に例を挙げましょう。

キャラクターのポーズ

「良いアイデアが浮かばなくて悩んでいる、20代くらいのサラリーマン」を描くとします。この場合、サラリーマンのスーツの特徴(ジャケットは合わせが右前であるとか、一番下のボタンは外すとか)を正確に捉える事はもちろん大事ですが、「悩んでいる」事を表現するために、人物に取らせるポーズが非常に大事です。

では、まず一案目を描いてみました。

161123_01

・・・どうでしょうか。

彼は表情からして何やら愉快ではない様子で、悩んでいるように見えなくもないです。しかし、冷房の効き過ぎで寒がっているようにも見えますし、トイレを我慢しているのかとも思えます。

腕を組むというポーズは、「悩んでいる」ポーズとしてはやや曖昧に見えてしまうようですね。悩んでいるというよりも、何か思索にふけっているとか、表情を変えれば自信満々な様子にも見えてしまいます。もっとわかりやすく「悩んでいる」ように見えるポーズはないでしょうか。

そこで二案目を描いてみました。

161123_02

「腕を組む」のではなく、「頭を両手で抱える」ポーズに修正しました。

一案目と比べて、だいぶ「悩んでいる」感が伝わるのではないでしょうか。これならば少なくとも、寒さやトイレを我慢しているようには見えませんね。

このように、人物のポーズは非常に重要です。色々なポーズを取らせるためには、試行錯誤が必要で僕も未だに悩む事が多いですね。人物の造形が完璧に頭に入っていれば、どんなポーズも思いのままですが、なかなかそこまでの境地には達していません。そのためにデッサン人形を買ってみたりしたのですが・・・その点についても後日ブログに描こうと思います。

 

ブログの引越し?

ほとんど更新していなかったtumblrのブログを、この度こちらに引越す?事としました。

tumblrの方も、イラストのボツ案や下書き落書きなど、イラストメインのブログとして続けていこうかと考えています。

今月中にはポートフォリオサイトの方も、新しくリニューアルする予定です(サーバは変えないのでURLはそのまま)。