HTML

ホームページ制作

CSS

チャレンジ企画

皆さん夏休みの宿題は早めに終わらせるタイプでしたか？

それとも終盤になってギリギリに終わらせるタイプでしたか？

私は宿題が配布される学期末の終業式の日、つまり0日目には始めてましたね。

夏休みを目前に浮き立つクラスメイトやホームルームで夏休み中の注意事項を話してくれる担任の先生を尻目に物凄い勢いで終わらせてましたね。

その日のうちに終わらせられそうなものは全部0日目には終わらせていたような気がします。

私が敬愛してやまない東進ハイスクールの林修先生が『受験にフライングもスピード違反もない。』という名言を残したそうです。

全然よくわからないですけど、まあきっと多分そういう事なのでしょうね。

はい、そういうわけで、無理矢理なんですけど、コーダーの自分が自由研究（？）として、「HTML・CSSのコ―ドだけでイラストを描く」ということをやってみました！

目次

---

1. HTML・CSSって？
   1-1.プログラミング言語って？
   1-2.マークアップ言語って？
2. コードで猫の顔を描く
   2-1.顔
   2-2.目
   2-3.鼻
   2-4.耳
   2-5.口
   2-6.ヒゲ
3. まとめ

HTML・CSSとは、ホームページ（ウェブサイト）を作るために使う言語のことです。

HTMLは「HyperText Markup Language（ハイパーテキストマークアップランゲージ）」の頭文字をとって省略したもので、ウェブページに文字や画像を表示させてくれます。

CSSは「Cascading Style Sheets（カスケーティングスタイルシート）」の略称で、HTMLで表示した画像や文字を装飾するために使います。

よく勘違いされるのですが、HTMLは「プログラミング言語」ではなく、「マークアップ言語」という分類のもの。CSSは、そんなHTMLを装飾するためのものです。

次の項目で、プログラミングとマークアップの違いを簡単に説明しますね。

1-1.プログラミング言語って？

プログラミング言語とは、ものすごくおおざっぱに言うと、コンピューターに対して「この計算や処理をしてね」という指示を出すものです。

たとえば、

・“1+1”という計算式の答えを出して
・このボタンを押したら情報を送信して
・1分ごとにここの数字を記録して

といった命令文・指示文です。

こういう動きを指定するものは「プログラミング言語」に該当します。

1-2.マークアップ言語って？

一方で、マークアップ言語とは、コンピューターに対して「文章の意味や表示のしかた」を教えてあげるものです。

ちょっとピンときにくいかもしれませんが、例を挙げると、

・ここはページのタイトルだから大きく表示して
・Aという画像をこのくらいの位置に表示して
・サイト全体の背景はこんな色にして

という指示を書きます。

家電やゲーム機で例えるとわかりやすいかもしれません。

初めてそれを触る人には、「ボタンがたくさん並んでいるだけ」に見えますよね。

コンピューターも同じで、日本語で「タイトル：○○」と書いてあっても、「ただの文字の羅列」としか認識できないんです。

ですが、「右上の赤いボタンは電源だよ」「Aボタンは攻撃だよ」（＝ページのタイトルだよ、画像だよ）と知ることで、ただのボタンが意味を持つようになります。

そこに＋αして、「だから、操作するときはこのボタンを押してね」（＝大きく表示して、このくらいの位置に表示して）という指示を出します。

これが「マークアップ言語」が行うことです。

厳密に言うと違う点もありますが、大まかには想像できたでしょうか？

ではさっそく、HTMLとCSSのコードを使ってイラストを描いてみましょう！

今回は猫の顔を作ってみました。

完成形はこんな感じです。

普段画像やイラストはデザイナーさんが用意してくださるものなので、自分がイラストみたいなものをコードで作ることはないので、何だか新鮮でしたし、面白さがありました。

以下、顔のそれぞれのパーツのコードの解説となります。

2-1.顔

.face {
  margin-top: 10px;
  margin-left: 10px;
    width: 300px;
    height: 300px;
    background-color: #ccc;
    border-radius: 50%;
    position: relative;
  }

猫の可愛らしさが出るように輪郭は正円にします。

（widthとheightの値を同値にして、border-radiusを50%にすることで正円になります）

また、face要素を基準に顔のそれぞれのパーツの位置を決めたいので、faceクラスにposition relativeで相対位置を指定し、それぞれの顔のパーツのクラスにposition absoluteとtop,left,rightをマークアップすることでそれぞれ顔のパーツの絶対位置を決めます。

2-2.目

  .eye {
    width: 40px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
  }

 .eye.left {
    top: 120px;
    left: 80px;
  }

  .eye.right {
    top: 120px;
    right: 80px;
  }

HTMLの方で左目(eye left),右目(eye right)クラスを用意してそれぞれの位置を調整します。

目の形は顔と同様正円にしますので、似たようなコードとなっています。

左目、右目の位置をそれぞれtop,left,rightを使って決めていきます。

2-3.鼻

 .nose {
    width: 20px;
    height: 20px;
    background-color: brown;
    border-radius: 50%;
    position: absolute;
    top: 160px;
    left: 50%;
    transform: translate(-50%);
  }

鼻も顔と目と同様正円にしていきます。

位置は真ん中に来るように調整しました。

色は顔が灰色、目が黒で地味になっていたので、違和感ない程度にちょっと明るめのブラウン（background-color: brown;）を使いました。

2-4.耳

.ear {
    width: 80px;
    height: 120px;
    background-color: #ccc;
    border-radius: 50% 50% 0 0;
    position: absolute;
  }
  
.eye.left {
    top: 120px;
    left: 80px;
  }

  .eye.right {
    top: 120px;
    right: 80px;
  }

耳は二つあるので、目と同様にHTMLでleftとrightクラスを用意して、それぞれ位置を調整します。

形はまず長方形を作り、（width短め,height長め）、耳の先を丸くしたかったので、border-radiusで左上と右上を50%にして丸みを帯びさせます。

余談ですが、色は顔と同じのグレーにしていますが、こちらを赤に変えると一気にウサギ感出ます。試してみてください。

2-5.口

 .mouth {
width: 80px;
height: 3px;
background-color:#000;
position: absolute;
top: 220px;
left: 110px;
transform: rotate(180deg);
}

口はシンプルに線状のものにしました。

目と鼻の位置を鑑みて違和感のないところに配置します。

2-6.ヒゲ

.beard {
    width: 80px;
    height: 1px;
    background-color: #000;
    position: absolute;
    transform-origin: center;
  }

  .beard.left1 {
    top: 176px;
    left: 0px;
    transform: rotate(20deg);
  }

  .beard.left2 {
    top: 200px;
    left: 0px;
    transform: rotate(0);
  }

  .beard.left3 {
    top: 224px;
    left: 0px;
    transform: rotate(-20deg);
  }

  .beard.right1 {
    top: 176px;
    right: 0px;
    transform: rotate(-20deg);
  }

  .beard.right2 {
    top: 200px;
    right: 0px;
    transform: rotate(0);
  }

  .beard.right3 {
    top: 224px;
    right: 0px;
    transform: rotate(20deg);
  }

最後はヒゲですね。

左頬に３本、右頬に３本の計６本になるように対称に配置します。

形はドラえもんっぽい感じになるように上のヒゲと下のヒゲにrotateをかけて角度を持たせています。

以上で完成です！

作り自体はシンプルではあるのですが、結構頭を使いました！

今回は、あまり細かくコードの解説を入れませんでした。

というのも、「自分でコードの意味を調べながら作る」と、いい自由研究になるんじゃないかな？と考えたからです。

「○px」や「○％」などの数字を変更すれば大きさが、「#000000」といった＃の後の文字列を変更すれば色が変わります。ぜひ「ここを変更するとどう変わるかな？」と考えながら作ってみてください！

もしうまく猫が作れたら、色を変えてみたり、ヒゲを長くしてみたり、ウサギや犬にしたみたり…とアレンジしてみてくださいね！

今年の夏休みの自由研究のテーマが決まっていなくて焦っている皆さんが、何かのきっかけで私のこの記事を目にしてくれて、私のコードを踏み台にもっと素晴らしいイラストを作ってくれたらおじさんとっても嬉しいです。

健闘を祈ります！

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007
※ ホームページ制作や活用サポートのお問い合わせはコチラから