はじめに

UIデザイナーを目指して修行中のピクセルグリコさん。Webのデザインをするなら、HTML/CSSも知っておく必要があると感じ、始めた勉強の過程をまとめたのが、このシリーズです。登場人物は次の2人です。

• 先生
  入門者にも上級者にも丁寧に教えてくれるHTML/CSSの達人の先生。実務ではHTML/CSSからJavaScriptまでオールラウンドに担当し、とりわけプログラマブルなCSSの設計、実装を得意としています。Slackの反応がすばやかったり、どんな情報でも（!?）ネットから見つけ出してきたりと、仕事仲間からは「インターネットの妖精」ともささやかれています。

• グリコさん
  Web制作にも意欲的なデザイナーで、現在、UIデザイナー見習い。デザインやアートに幅広く興味を持っており、好きな映画は「アデル、ブルーは熱い色」。

文書の情報を抜き出して整理しよう

先生：HTML/CSSの基礎を勉強しようというテーマなんだけど、事前の宿題として、作ってみたいサイトのデザインをしてきてくださいと言っておいたよね。グリコさん、デザインは作ってきた？

グリコ：はい、友人がポートフォリオを作りたいと言っていたので、ポートフォリオサイトのデザインをFigmaで作ってきました。

上部のヒーローエリアにはサイト名の「AYA Body of Works」と、Instagram、Tumblr、Facebookへのリンクをアイコンとして置きました。メインエリアは左右に2カラムで、左が「01. About Me」、右は「02. Works」。最下部のフッター部分にもInstagram、Tumblr、Facebookへのリンクをアイコンとして置いてあります。

幅はデスクトップを想定したものと、スマートフォンを想定したもの、2パターンで考えてあります。

先生：では、これを作っていきましょうか。

レスポンシブで、幅が狭くなった場合も考えてきているんだね。そのへんはまたおいおい考えていくとして、まずは「デスクトップ」として作ってあるもの、これを作っていこう。いわゆる、パソコンのブラウザで表示するものを想定した場合だね。

まずHTMLを書いていきます。HTMLを書くというのは、基本的には書かれた文書に意味づけをしていく作業なんだ。

グリコ：「文書に意味づけをする」？

先生：たとえばこの「01. About Me」に意味づけするとしたら、なんだろう？

グリコ：えーっと……「見出し」？

先生：そうだね。じゃあその「01. About Me」の下にある「経歴」は？ これも「見出し」に見えるけど？

グリコ：……これは「小見出し」？

先生：そう、同じ「見出し」なんだけど、この2つには階層があるよね。「01. About Me」の下に「経歴」がある。

こんなふうに、ほかにも意味づけができないか考えてみよう。「リスト」もあるし、ただの「文章」の部分もあるよね。そんな文書構造をわかりやすくするために、まず、デザインから文字を全部書き出して、Markdownで整えていってみよう。Markdown記述は、グリコさんも書き慣れているしね。

グリコ：Markdownですか？ 社内の情報共有ツールのesaはMarkdownで書きますよね。なので、慣れているといえば慣れていますが……HTML/CSSはまだ書かないんですね？

先生：もちろん、書き慣れてきたら、はじめからHTML/CSSを書いていけばいいんだけど、Markdownは文書構造を理解していくうえでわかりやすいので、今回はまずはMarkdownで書いてみよう。実はMarkdownはHTMLと同じ、マークアップ言語の一つなんだ。

グリコ：情報の整理みたいなことでしょうか？ デザインするときと同じですね。

先生：そう。デザインもただ見た目を作るだけじゃなくて、情報整理が欠かせないよね。さて、まずはFigma上のデザインされたテキストを転記していこうかな。ダミーの文章だったとしても、そのままのテキストを入れていけばいいよ。

グリコ：はい。ええっと……こんなかんじでしょうか。

AYA Body of Works

Instagram
Tumblr
Facebook

01. About Me

近藤　彩｜Aya Kondo

経歴

2022 - 現在
株式会社ピクセルグリッドにUIデザイナーとして就業中 

2019 - 2022
アパレル企業に勤務  

2019
名古屋学芸大学メディア造形学部ファッション造形学科　卒業  

2015
名城大学附属高等学校　卒業

スキル

Figma
CLIP STUDIO PAINT
Adobe Illustrator

資格・受賞

色彩コーディネーター 2級  
情報処理技能検定 2級  
衣料管理士 1級  
パターンメイキング技術検定 2級  
ファッションビジネス能力検定 2級  
きものデザインコンクール入賞


02. Works

UI Design
Painting
Embroidery

AYA Body of Works

Instagram
Tumblr
Facebook

Markdownで意味づけしてみよう

先生：そうしたら、Markdownは#の数で見出しのレベルを設定できるから、書き出したテキストに、見出しレベルを設定してみるよ。一番最初の「AYA Body of Works」は、文書の大見出しなので……？

グリコ：えーと、#が1個ですね。

先生：そう。そうすると、その次の見出し「01. About Me」は？

グリコ：その次のレベルになるから、##ですよね。「02. Works」も同じレベルになりますよね。となると、その下の「経歴」は3つ目のレベルの見出し###となっていくわけですね。

先生：そうそう。そんな感じで、つけられるところは全部、見出しレベルをつけてみよう。

グリコ：はい。うーんと、この一番上の「Instagram」「Tumblr」「Facebook」へのリンクはどうしたらいいですか？ 見出しじゃないですよね。

先生：これはリンクのリストだね。まずは頭に-を付けて、リストにしていこう。

- Instagram
- Tumblr
- Facebook

先生：次にそれぞれをリンクにする。リンクは[テキスト](リンク先のパス)の形式だね。リンク先のパスはいったん#TODOとしておこう。

- [Instagram](#TODO)
- [Tumblr](#TODO)
- [Facebook](#TODO)

ここのほかにも、「資格・受賞」のところもリストとなるよね。リストは、表示したい順番があるかないかでちょっと書き方が変わるよ。ここは、表示したい順序がある？

グリコ：そうですね、ここは見せたい資格順に並べたいです。

先生：じゃあ、1.で並べていこう。全部1.で書けば大丈夫。こう書くと、Markdownが表示されるときは「1.、2. 、3. 、」と続いて表示されるよ。この数字は、CSSで表示させないようにもできるので大丈夫。

1. 色彩コーディネーター 2級  
1. 情報処理技能検定 2級  
1. 衣料管理士 1級  
1. パターンメイキング技術検定 2級  
1. ファッションビジネス能力検定 2級  
1. きものデザインコンクール入賞

同じように「スキル」もリストだけど、ここのテキスト情報じゃないものは、スキルの習熟度を表す横棒グラフかな？ これはどう表現するか悩ましいね。テキストじゃなかったら、どう表現する？

グリコ：「何％」とかですかね。

先生：そうだね。そうしましょう。あとは「経歴」だけど、これもちょっと悩ましいね。いかようにもできるんですよ。たとえば表組みでもいいけど、ここでは####の小見出し＋テキストとして見てみましょう。

### 経歴  

#### 2022 - 現在  

株式会社ピクセルグリッドにUIデザイナーとして就業中 

#### 2019 - 2022  

アパレル企業に勤務

#### 2019  

名古屋学芸大学メディア造形学部ファッション造形学科　卒業  

#### 2015  

名城大学附属高等学校　卒業

URLのリンク、つまり別ページへのパスはまだ決まっていないと思うので、#TODOとでもしておきます。

最後のフッター部分にある「AYA Body of Works」だけど、このままだと「02. Works」以下に含まれているように見えるので、いったん---で区切っておこう。「AYA Body of Works」は見出しにしてもいいけど……ロゴ扱いかな。

こんなものかな……いったんこれで、おおまかなHTMLが書けたようなものなので。

# AYA body of works

- [Instagram](#TODO)
- [Tumblr](#TODO)
- [Facebook](#TODO)

## 01. About Me

近藤　彩｜Aya Kondo

### 経歴  

#### 2022 - 現在  

株式会社ピクセルグリッドにUIデザイナーとして就業中 

#### 2019 - 2022  

アパレル企業に勤務  

#### 2019  

名古屋学芸大学メディア造形学部ファッション造形学科　卒業  

#### 2015  

名城大学附属高等学校　卒業

### スキル  

1. Figma  80%
1. CLIP STUDIO PAINT  50%
1. Adobe Illustrator  30%


### 資格・受賞

1. 色彩コーディネーター 2級  
1. 情報処理技能検定 2級  
1. 衣料管理士 1級  
1. パターンメイキング技術検定 2級  
1. ファッションビジネス能力検定 2級  
1. きものデザインコンクール入賞


## 02. Works

- [UI Design](#TODO)
- [Painting](#TODO)
- [Embroidery](#TODO)

---

AYA Body of Works

- [Instagram](#TODO)
- [Tumblr](#TODO)
- [Facebook](#TODO)

MarkdownをHTMLに置き換えてみよう

先生：これで、デザインを構造的に見ることができたね。今度はこれをHTMLにしていこう。エディタを開いて、そこに書いていくよ。エディタは使っているよね？

グリコ：私はVS Codeで勉強しています。

先生：いいね。コーディングする時にエディタを使うと、シンタックスハイライトが効いたり、コードを自動補完してくれたり（コラム参照）、インデントを自動で入れてくれたり、フォーマットしてくれたり……とまあ、いろいろ便利なんだ。

グリコ：シンタックスハイライトってなんですか？

先生：シンタックスハイライトとは、コードの色分けのこと。色分けされていると、見やすいし、間違いに気づきやすいんだよ。CodeGridでも、コードの部分はシンタックスハイライトされているでしょ？

グリコ：ああ！そうですね。

先生：じゃあ、新規フォルダの中に、index.htmlを作って、ここにHTMLを書いていきます。まず、このMarkdownをコピペしましょうかね。

グリコ：はい。

先生：さーて……。HTMLはタグでコンテンツを囲むことで、そのコンテンツに意味をもたせます。

たとえば、見出し要素の<h1></h1>、<h2><h2>……は、さっきのMarkdownの#や##に対応するものだね。

<h1>見出しにする文字</h1>
<h2>見出しにする文字</h2>

見出しは<h6>まで使えるけど、そこまで使うことはあんまりないね。

次はリスト。Markdownで書いていたときも、2種類あると説明したよね。

グリコ：えーと、順序ありと順序なし、ですね。

先生：そうそう。

• 順序ありリスト（ordered list）：<ol></ol>
• 順序なしリスト（unordered list）：<ul></ul>

となって、それぞれのリスト全体をolタグで囲みます。その中の項目（list item）はliタグで。たとえばこの「資格・受賞」の部分は、

<ol>
  <li>色彩コーディネーター 2級</li>
  <li>情報処理技能検定 2級</li>
  <li>衣料管理士 1級</li>
  <li>パターンメイキング技術検定 2級 </li> 
  <li>ファッションビジネス能力検定 2級</li>  
  <li>きものデザインコンクール入賞</li>
</ol>

となるわけ。

<ol>と<li>の行頭は揃っていないよね。これは、インデントといいます。コード中でインデントを使う理由は、見た目でわかりやすくするため。インデントを使わなくても、ブラウザは同じように表示してくれるけどね。

先生：あとはリンクかな。全部a要素を使ってやります。a要素の指定の仕方は、こうですね。

<a href="リンク先のパス">リンク先のテキスト</a>

a要素は単純なリンクのほかにも、いろいろな用途があるので、CodeGridで読んでおくといいです。今は、リンク先のパスは、#TODOとしておきます。

• しっかり学ぶ、a要素

グリコ：……hrefは、なんと読むんですか？

先生：「エイチレフ」だね。「hypertext reference」の略。hrefには参照先のHTML文書などのURLを指定します。

画像を表示させたいときは、img要素を使います。img要素は、src属性で画像のパスを指定します。ちなみにsrcは「ソース」と読みます。「source」が略されているんだね。

<img src="画像のパス" alt="画像の説明">

グリコ：画像……。この一番上の背景とか？ あと、ここにあるTumblrとかのアイコンもですかね。「01. About Me」「02. Works」の見出しも画像？

先生：そうだね。あとは、スキルを棒グラフのようなもので表しているところも、画像。ただ、一番上の本の画像部分と、「UI Design」とかの部分は背景画像だと思うので、img要素ではなくて、CSSでやります。ですので、ここは今は考えなくていいよ。

グリコ：わかりました！

先生：あと、img要素のalt属性は、画像が表示されなかった場合に代わりに表示されるテキスト。「オルト」と呼ばれるかな。alt属性は、画像の代わりとなるテキストを書くといいね。

グリコ：altは、マークアップする人が用意するものなんですか？

先生：それは場合によるかなあ。altはいろいろと知っておいたほうがいいことがあるので、これもCodeGridで読んでおくといいです。話しはじめると長くなるから、ここでは省きます。でも、ぜひ勉強してほしいな。

• しっかり学ぶ、代替テキスト

グリコ：記事を読んでみますね。

先生：あとは、なんにもマークアップされていないところがあるので、p要素、パラグラフを使おう。これは、段落を表すタグだね。これで、段落として意味づけができます。困ったら<p>、とりあえず<p>を入れておく。

さて、これでだいたい書けたかな。

<h1><img src="/images/AYA-logo-header.png" alt="AYA Body of Works"></h1>

<ul>
  <li><a href="#TODO"><img src="./images/instagram-logo-white.png" alt="Instagramロゴ"></a></li>
  <li><a href="#TODO"><img src="./images/tumblr-logo-white.png" alt="Tumblrロゴ"></a></li>
  <li><a href="#TODO"><img src="./images/facebook-logo-white.png" alt="Facebookロゴ"></a></li>
</ul>

<h2><img src="/images/About Me-logo.png" alt="About Me タイトル"> </h2>

<p>近藤　彩｜Aya Kondo</p>

<h3>経歴</h3>

<h4>2022 - 現在</h4>

<p>株式会社ピクセルグリッドにUIデザイナーとして就業中</p>

<h4>2019 - 2022</h4>

<p>アパレル企業に勤務</p>

<h4>2019</h4>

<p>名古屋学芸大学メディア造形学部ファッション造形学科　卒業</p>

<h4>2015</4>

<p>名城大学附属高等学校　卒業</p>

<h3>スキル</h3>  
<ol>
  <li>Figma  80%</li>
  <li>CLIP STUDIO PAINT  50%</li>
  <li>Adobe Illustrator  30%</li>
</ol>

<h3>資格・受賞</h3>
<ol>
  <li>色彩コーディネーター 2級</li>
  <li>情報処理技能検定 2級</li>
  <li>衣料管理士 1級</li>
  <li>パターンメイキング技術検定 2級 </li> 
  <li>ファッションビジネス能力検定 2級</li>  
  <li>きものデザインコンクール入賞</li>
</ol>

<h2><img src="/images/Works-logo.png" alt="Worksタイトル"></h2>
<ul>
  <li><a href="#TODO">UI Design</a></li>
  <li><a href="#TODO">Painting</a></li>
  <li><a href="#TODO">Embroidery</a></li>
</ul>

<p>AYA Body of Works</p>

<ul>
  <li><a href="#TODO"><img src="/images/instagram-logo-white.png" alt="instagramロゴ"></a></li>
  <li><a href="#TODO"><img src="/images/tumblr-logo-white.png" alt="tumblrロゴ"></a></li>
  <li><a href="#TODO"><img src="/images/facebook-logo-white.png" alt="facebookロゴ"></a></li>
</ul>

グリコ：HTML文書っぽくなってきましたね！

先生：そうだね。でも実はMarkdown記法にはなくて、HTMLでは書かなくてはいけないものもあるんだ。次回、それらを書き足して、HTML文書を完成させていこう。

CSSも書きはじめられるといいかな。デザインをどうやってCSSで表現するか、今はまだできなくてもいいけれど、どんなふうに書くか予習を兼ねて、少し見通しを立てておいてくれるとありがたいです。

グリコ：わかりました。