こんにちは、株式会社カスタマトリックスの寺尾です。
こちらは 新卒社員と学ぶWEBプログラミング 企画になります。
可能な限り毎日更新していくのでご期待ください。
本日は第五回、「HTMLとCSS」を説明していきます。
まずはWEBサイトの見た目を司る二つのプログラミング言語から勉強していきます。
前回はこちら
https://qiita.com/r-terao/items/d02ea64015f26b115300
第一回はこちら
https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6
HTML
WEBプログラミングの勉強をしていると必ず聞くHTML、何が凄くてこんなに長く使われているのかご存知でしょうか？
HTMLは「ハイパーテキストマークアップランゲージ(HyperText Markup Language)」という意味です。
これは「ハイパーテキストを記述するためのマークアップ言語」と翻訳する事ができます。
現在は「HTML LS(Living Standard)」が最新版です。
ハイパーテキスト
ハイパーテキストは互いに関連する情報を含んだ文書を相互にリンクし、WEBサイト内であっても、WEBサイト間であっても情報を辿っていけるように考案されたシステムです。
例えば論文やプレゼン資料などを作成する際、参考資料を最後に記述しますよね？
これは論文同士がリンクされていると言えます。
現実世界上ではリンクされていても図書館などに行ってその論文を何とか探し出す必要がありますが、インターネット上ではリンク先にアクセスして論文をダウンロードする事ができます。
この情報の繋がりこそがWebなのです。
HTMLはハイパーテキストと名前に入っていますが、通信技術の発達した現在、テキストだけでなく画像や動画なども含めてハイパーメディアを取り扱う言語となっています。
マークアップ言語
マークアップ言語とは、コンピュータでも文の趣旨が分かるようにマークを付ける言語です。
Webサイトのような「人に読ませる文章」には一般的に「見出し・本文・引用」などの趣旨の違う文章が雑多に含まれています。
当然コンピュータはどんな文字であっても0と1に変換して考えるため、どんなに気持ちを込めて見出しを書いてもそこに差を見出す事はできません。
マークアップ言語は「ここからここまでは見出し文だよ」とマークを付けてあげる事でコンピュータがWebサイトを表示する時に文字を強調したり検索性を向上させたり出来るようになるのです。
HTMLではこのマークの事をタグと呼び、<></>左記の記号で囲います。
<h1>これは見出しです。</h1>
<p>これは本文です。</p>
<button>これはボタンの中身の文字です</butoon>
タグに囲まれた文章を「要素」と呼びます。
要素にはそれぞれ設定値として「属性」というものが存在します。
属性は全体で共通のモノだけでなく要素ごとにそれぞれ専用のモノや、自作する事も可能なため、今後必要に応じて紹介します。
最もよく使う属性は「id」「class」です。どちらも要素を探しやすくするための名前付けに使われるものですが、idは特別に他の要素のidと被ってはいけないというルールがあります。
ちなみに、可能な限りシンプルなテキストからマークアップテキストを生成するという逆転の発想で作られた「マークダウン」という言語もあります。
このQiitaの記事は一部マークダウン記法を利用していますね。
# これは見出しです。
これは本文です。
CSS
CSSは「Cascading Style Sheets」と読み、「連続性のあるデザイン表」という意味を持ち、スタイルシート言語の一つです。
現在は「CSS3」が最新版です。（厳密にはバージョンとは違う考え方なので、一部はCSS4の機能も使えます）
「このルールにあてはまる対象はこのデザインにする事」というルールを作る言語になります。
基本的には「セレクタ」とを覚える必要があります。
セレクタとは「どの要素にデザインをあてるのか」を記述します。基本的にはclass idなどのタグの属性に対してデザインを適用します。
まとめ
- HTMLとCSSを組み合わせると、デザイン豊かな文章をWEB上に公開する事ができる
- HTMLはタグ、属性を組み合わせてコンピュータでも理解できる文章を作成する
- CSSは様々な方法でデザインを割り当てる文章を判別する事ができる
WEBとは「網、クモの巣」といった意味があります。
HTMLのようなハイパーメディアの仕組みが、インターネット上で文書の網を形成し、それがWEBになっているのです。
HTMLとCSSができれば、簡単なWEBサイトであれば作成ができてしまいます。
次回からは頻出のHTMLタグやCSSプロパティを解説し、WEBサイトを作れるようになる事を目指していきます。
おまけ
株式会社カスタマトリックスはエンジニアを募集しています！
完全未経験でも可！