Blogs

CrossStar Projectで制作されるプロダクトについて、デザイン面についてはデザインの代表が全て自由にデザインをして良いことになっております。

デザイナーに全てを任せる理由としては、デザイナーが自分の意思で作る方がより良いデザインになると思うと同時にデザイナーの自主性を成長させたいという思いがあるからです。

しかし、デザイナーがHTMLやCSSを知らない状態でデザインを行ったとしてもシステム的に反映するのが困難なこともあると思います。そこで、CrossStar Projectではデザイナーに向けたHTMLとCSSの講習を先日行いました。

以下がその時に使用した資料です。

HTMLやCSSは著者が3年前くらいに学習した内容です。なので、簡単と言えば簡単なのですが、いざ説明してみると自分自身でも詰まるところはとても多かったです。やっぱり人に説明するのはとても難しいですね。

ということでこのスライドを基に改めてHTMLやCSSについて簡潔に解説していこうと思います！

まずは第1回目として、HTMLとは何かについて解説していこうかと思います。

この記事は以下のような人にはぜひ読んでほしいです！

・HTMLって結局どういうものなの？

・HTMLの基本的な書き方ってどうやって書くの？

・改めてHTMLの用語について押さえておきたい！

HTMLって結局なんなの？

まずHTMLってどういうものなんだろう？

調べてみるとこのような回答が得られます。

HTML は、コンテンツの構造を定義するマークアップ言語です。 HTML は一連の要素で構成されており、これらの要素がコンテンツのさまざまな部分を囲み、一定の表示や動作をさせることができます。タグで囲むと、単語や画像をどこかにハイパーリンクさせたり、単語を斜体にしたり、フォントを大きくしたり小さくしたりすることができます。

参考：MDN Web Docs　HTMLの基本
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics

結局なんのことを言っているのかよくわからないです。

ということで僕なりにわかりやすくしてみました！

建築で例えるとものすごいわかりやすくなると思うので、1つずつ見ていきましょう！

HTMLを建築で表すと…

HTMLというのは家に機能をつけたみたいな感じです。

家を建てる時を考えてほしいのですが、自分が住む家にはどのようなものが欲しいでしょうか？例えば、台所がほしい、洗面台がほしい、広いリビングが1つと6畳くらいの部屋が2つ欲しい、水を流すためのパイプがほしいみたいな感じだと思います。

このような機能こそがHTMLの役目です。HPに置き換えてみると、HPに写真を3枚載せたい、箇条書きリストを3つくらい用意したい、リンクを載せたいなどそのHPに欲しい機能を作るのがHTMLなんです。

CSSを建築で表すと…

一方でCSSっていうのは家でいうなんなのでしょうか？僕は装飾だと考えます。

例えば、家の機能を用意したとしても、現在のままだとデフォルトの家になってしまいます。洗面台はデフォルトの、台所もデフォルトの、部屋も質素な状態です。このままだと何もない飾りの家になってしまいます。

しかし、そこから飾り付けをしていくと思います。アジアン風の家にしたかったら草木を装飾したり、ハンモックを装飾したりするかもしれません。今流行りのぴえん系の家にしたかったら全部ピンクにしたりもふもふした家具を置くかもしれません。装飾をすることで、自分らしさとかその家の特徴は生まれてくると思います。

そしてCSSがまさにそれに該当します。HTMLのままだと質素なデザインになってしまい、全てのHPが同じようなデザインになってしまいます。そこに線を入れたり、空白を作ったり、背景の色を赤色にしたりなどなど自分自身でデザインに手を加えていくことで、自分の会社らしいHPが完成していくのです。

HTMLの細かい書き方

HTMLやCSSの概念についてはある程度理解できたと思いますが、ではどのように書けばいいのでしょうか？

順番に見ていきましょう！

HTMLの書き方

HTMLで特に注意してほしいのは以下の4つです。

以下にサンプルのコードを載せます。それを基に上のポイントを考えてみましょう。

<div id="sample">
    <h1 id="title>CrossStar Project </h1>
   <div class="main">
        ようこそ！CrossStar Projectへ！
    </div>
    <div class="main">
        ぜひ楽しんでください
    </div>
</div>

Point1 HTML要素は基本的に”<（タグ）>内容</（タグ）>”という形

例えば、見出しを設定したい時は”<h1>見出し</h1>”というようにHTML要素を書きたい時は

<（ 開始タグ(opening tag) ）>コンテンツ（content)/（ 終了タグ(closing tag) ）>

という形で書きます。

開始タグと終了タグには同じ値が入ります。

もちろん例外もあります。画像を表示するための”img”は以下のように書いたりします。

<img src="./sample.jpg" />

とは言っても、ほとんどは基本の形通りなので、調べ調べやっていけば問題ないでしょう！

ちなみに言葉の意味についても確認しましょう。

1.開始タグ (Opening tag): 要素の名前を山括弧で囲んだものです。どこから要素が始まっているのか、どこから効果が始まるのかを表します。
2.終了タグ (Closing tag): 要素名の前にスラッシュが入っていることを除いて開始タグと同じです。どこで要素が終わるのかを表しています。
3.コンテンツ (Content): 要素の内容です。
4.要素 (Element): 開始タグ、終了タグ、コンテンツで要素を構成します。

参考：MDN Web Docs　HTMLの基本
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics

Point2 　内容の部分にはいくらでもHTML要素を入れてOK！

コンテンツの部分にはいくらでもHTML要素を入れて大丈夫です！

例えば見本でも、一番外側のdivの中に大量にHTML要素が入っていますね！こんな感じで大量に要素を入れてもらってOKです！

Point3 idはファイルの中でユニークな値でなければいけない

見本をよく見てみると、所々にidやらclassやらあるかと思います。

このように開始タグの後ろにつけるものを属性(Attribute)と言います。タグの種類などによって、様々な種類がありますが、まずはidとclassを抑えればいいと思います。

まずはidについて抑えておきましょう。idはその要素に名前をつけ、要素の特定をしやすくするものと思ってくれたらOKです。

例えば見本をみると、h1に「id=”title”」とついています。これはh1に”title”という名前をつけたものだと思ってくれたらOKです。

ただ、名前をつけてもその名前が2つあったら結局特定することができなくなります。なので、idはそのファイルの中で唯一付けれるものと考えましょう。

見本で考えてみると、h1にtitleとつけているので、このファイル内でtitleというidは使えません。

ではどうしてidをつけて、特定できるようにするのでしょうか？実がcssをやるとわかるのですが、今回は説明はなしにします。

どうしてidをつける必要があるのか？

→デザイナーに向けたHTML&CSS講習（2）で説明（Comming Soon…）

Point4 classは何度も呼び出せる

ではclassはどうでしょうか？これは何度も呼び出すことができます。

見本には同じ名前のclassが2つありますね。こんな感じで、同じファイルに2つ以上あってもclassについては全く問題ありません。

idが唯一の名前をつけるものと考えると、classはグループ群をつけると考えるとわかりやすいかもしれないです！

とは言っても、どうして、2つ以上のclassをつける必要があるのでしょうか？これについても次のcssに取り組むとわかることでしょう。

どうしてclassをつける必要があるのか？

→デザイナーに向けたHTML&CSS講習（2）で説明（Comming Soon…）

以上がHTMLの簡単な説明になります。

これだけ読んでもHTMLの情報はわからないと思います。タグの種類とか覚えたり、上記の例に当てはまらないものを覚えたりとしないといけないからです。

でも、ほぼ全ての要素がこの基礎に当てはまっていると思うので、今回の4つの要点を抑えて、HTMLの学習に取り組んでみてください。

ということで次回はデザイナーにとっては最も重要になるCSSについて学習していきたいと思います！

もしよければ次回もよろしくお願いします。

デザイナーに向けたHTML&CSS講習（2）に続く…（Comming Soon…）