コーディングを勉強し始めて、HTMLやCSSについて触れることが多くなりました。触っていくうちに、CSSでこんなことができるのかと驚いたことがあります。例えば、ずっと画像だと思っていたものが、実はCSSで書かれていました。ちょっとした画像なら、CSSで図形を描くことが可能です。今回は、CSSについてとCSSを使って図形を描くことについて記事を書いていきたいと思います。
目次
CSSとは
まず、CSSについてです。コーディングをしたことがある人や、Webの知識がある人は知っていると思いますが、全く知らない人、初心者にとってはなんだろうと思うはずです。CSSとはCSS（Cascading Style Sheets、カスケーディング・スタイル・シート）と呼ばれる、webページのスタイルを指定するための言語です。HTMLやXHTMLなどで作成されるwebページには、スタイルシートの言語の1つであるCSSが一般的に利用されています。
そして、CSSはHTMLと組み合わせて使用します。HTMLに、各要素を指定し、CSSではそれに対しての装飾を指定します。簡単に説明すると、HTMLで装飾したい場所を指定して、CSSはそれに対して、どのような装飾をするかCSSプロパティで指定するということです。例えば、ウェブページに表示されるフォントの色、画像のサイズや位置、サイトのレイアウト、見出しの部分を作りたいとなれば、h2などで見出し部分を囲み、CSSではフォントサイズや位置などを指定するなど、様々なことができます。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
CSSのメリット
CSSを使用することで作業の効率からページの読み込みの速度まで…様々なメリットがあります。
作業の効率化
CSS１つ作ることができれば、作業の効率化に繋がります。HTMLの場合、そのページにしか対応していません。そのうえ、1つ、1つタグが違うので、修正が来た場合はいちいち１つずつ修正しなければなりません。しかし、CSSがあれば、ページの縛りがなく、CSSを読み込めば、全て適応されます。修正がきても、CSSさえ修正すれば修正箇所が全てに適応されます。例えば、HTMLの場合、10ページ、h2の文字色を変えたいとなると、10ページ全てのタグを書き換えなければならないところを、CSSならば一発で変更することが可能です。
ページの軽量化
CSSを使えば、ページの読み込みが早くなり、軽量化されます。HTMLだけだと、コードの記述が複雑になり長くなってしまうため、どうしても読み込みが遅くなってしまいます。ごちゃごちゃした記述だと人から見ても、読むのに時間がかかりますよね。同じように、コンピュータも時間がかかってしまいます。しかし、CSSを使えば、HTMLの記述はすっきりとシンプルにまとめられ、読み込む速度も早くなります。
色々なデザインができる
HTMLだと装飾は、フォントサイズ、色の変更、フォント、を変えるくらいでした。しかしCSSだと少し凝ったデザインをすることができます。例えば、CSSで簡単な装飾を作れたり、リンクに装飾をつけたりなど・・・HTMLでは表現しきれなかったことができます。より凝ったデザインのwebサイトを作ることが可能です。
SEOに強い
CSSとHTMLを分離させたことにより、SEOに好まれる記述になり、検索エンジンにヒットしやすくなります。ブログが検索にヒットしやすいのもシンプルな記述をSEOが好むためです。HTMLとCSSを分離させるだけなので、初心者でも簡単にできますが、カスタマイズには専門の知識が必要となるので、ただ分離しただけではSEOに強くなるとはいえません。
メディアごとに表示スタイルの変更が可能
CSSはコンピュータのディスプレイだけでなく、印刷用や、携帯機器、テレビ、音声、点字などのメディアスタイルにも出力して利用できることを想定されています。メディアに左右されず、対応することができます。次にデメリットです。メリットの多いCSSですが、少し欠点があります。HTMLより登場の遅かったCSSは、対応していないブラウザがあるということです。現在あるブラウザの中で完全に対応しているというものはありません。しかし、HTMLとCSSは分離されているため、完全に表示されないということはありません。CSSはメリットがほとんどですが、少し欠点もあることが分かりました。次はCSSで図形を描く方法です。
CSSで図形を描く
CSSでは簡単な図形ならば作成することが可能です。
CSSで描くメリット
CSSで図形を描くメリットはいくつかあります。まず、色やサイズの指定が簡単になります。画像と違い、CSSに直接、数値を指定しているためいちいち画像を書きださなくても簡単に設定することができます。修正が来た際に、いちいち画像を書き換えるのは時間がかかりますよね。CSSなら値を変えるだけなので一発で変更が可能です。次にスライスやアセットの手間が省けます。ここの形やっぱり丸じゃなく三角にしてほしい色も変えてほしいと修正が来た際には、一度編集ソフトに戻って作り直してから、更に書き出さなければなりません。とても手間がかかります。
しかし、CSSなら先ほどと同じように値を変えるだけなのでそこまで手間がかかりません。そして、画像の容量を減らすことができます。画像で書き込んでいるわけではないので、サイトが軽量化されます。デメリットとしては、先ほどCSSのデメリットであったように、一部の古いブラウザだと表示されないことです。
簡単な図形を描いてみよう
簡単な図形を描いてみます。まず基本の図形からサンプルコードと一緒に紹介します。
四角
CSS
.square {
width: 100px;
height: 100px;
background: black;
}
HTML
<div class=”square”></div>
これは、HTMLで四角の要素を指定し、CSSで装飾を指定したものです。widthは幅の指定、heightが高さの指定です。この場合、widthとheightも100pxの指定なので100×100の正方形が作図されます。そして、backgroundは背景の色を指定します。この場合は、blackなので、真っ黒の正方形が出来たはずです。
三角形
CSS
.triangle {
width: 0;
height: 0;
border-top: 30px solid black;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid tranparent;
}
HTML
<div class=”triangle”></div>
少し複雑な記述となりました。下向きの三角を表示したい場合のコードとなります。widthとheigthを0にすることにより、ボックスの要素を無くします。ボーダーのみとなったところを、上のみ表示させることにより、下向き三角形を作図することが出来ます。topは上、rightは右、leftは左 bottomは下の部分をしています。transparentはその要素を投下することが出来ます。この場合は、左右下を透過させることにより、上部分のみ三角を表示させたということで、下向き三角形を作図できたということになります。もう少し応用すれば、矢印を作図出来たり、簡単なシェイプでイラストを描くことも可能です。
また、少し難しくなりますが、疑似要素を使えば、更に複雑な図形を作図できる幅が広がります。よく聞くものは、before、after擬似要素などです。先ほど説明した矢印の作図にも使われます。
まとめ
いかがでしたでしょうか。CSSとCSSで作成される図形のメリットとデメリット。うまく使い分けていくことができれば、デザインの幅が広がるはずです。様々なサイトで勉強して、複雑な図形を作れるように勉強していきたいと思います。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
