CSSで矢印、下線、三角を作る方法。画像を使わずにデザインしてみよう！

太さを変更する

線の太さもborder-bottomの中だけで指定できます。線の種類と合わせて指定するケースとして、一重線を太さ1pxで指定する例を書きましょう。下線の指定としてsolidを記述した後に、線の太さとして1pxを書きましたが、記述の順番は自由です。

border-bottom: solid 1px;

線の太さの指定は、数値以外にキーワードで記述することも可能です。細くしたい場合は「thin」、普通は「medium」、太くしたい場合は「thick」と記述します。

色を変更する

さて、次に色の指定も合わせて行ってみましょう。2pxの太さの青い二重線を引いてみます。

border-bottom: double 2px blue;

Blueを16進数で記述することもできるので、#0000FFと書いても同じ結果になります。カラーコード表を見ながら好きな色を指定すると便利でしょう。

CSSだけでデザインしてみよう

図形やアイコンの作り方には、今回紹介した以外にも様々な方法があります。形状はもちろん、色使いも含めると膨大なパターンが存在することは容易に想像できるでしょう。コンテンツにとって最適なデザインを制作できるようになるには制作経験の積み重ねが必要ですが、トライアンドエラーを繰り返し、思い通りのデザインを実現できるように取り組みましょう。

CSSのテクニックを知る

CSSでpositionを使い要素を並べる

今回のテーマはCSSの要素の並べ方です。static、relative、absolute、fixedを解説します。初心者のうちは、なかなか難しい位置決めですが、少しでもわかりやすく説明したいと思います。

CSSの余白調整、余白指定法

CSSの勉強をスタートすると序盤に登場するのがmarginやpaddingといった余白の指定方法です。CSSの中では初歩的な部分とはいえ、勉強をはじめてまもない頃では混乱しやすい部分の一つとも言えるのではないでしょうか。しかし、余白を自由にコントロールできることで得られるメリットはとても大きいので、苦手を乗り越え、ぜひマスターしておきたいところです。そこで、今回はCSSの余白調整にスポットをあててご説明します。