HTML_CSS① - ken＠駆け出しwebエンジニア

みなさん、お疲れ様です。

webエンジニアを目指しているkenです。

今回はwebエンジニアとしては必要なスキルであるHTMLと CSSについて書きます。

導入なので、基本的なことを書きます。

なので、webエンジニアでなくても暇つぶしにでも自分のHP作ってみようかなって方が見ても参考になるんじゃないかなと思いますので、暇つぶしにでもどうぞ。

HTMLとは

HyperText Markup Language（ハイパーテキストマークアップランゲージ、HTML（エイチティーエムエル））は、ハイパーテキストを記述するためのマークアップ言語の1つである。 World Wide Web (WWW)において、ウェブページ（1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い）を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。 *1

ja.wikipedia.org

です。とりあえず細かい説明はウィキペディアに任せます。

僕の解釈では、「HTMLはwebページの骨組み」です。他でも言っているとは思いますが、僕はこう理解しております。詳しくは、あとで。

続いて、 CSSとは

段階スタイルシート^[1]（だんかいすたいるしーと，英: Cascading Style Sheets; CSS）とは、 HTML や XML の要素をどのように修飾（表示）するかを指示する、 W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。

ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる。

ユーザーエージェント（多くの場合ウェブブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義した CSSのもたらす効果を重ね合わせる（カスケードする）ことができる。^{[注釈 1]} *2
ja.wikipedia.org

です。もちろん説明はウィキペディアに任せます。

僕の解釈は、「 CSSはwebページのデザイン」です。これもまた他でも言っていると思いますし、ウィキペディアでも書かれています。

では、「百聞は一見に如かず」なので、早速やってみましょう。

まず準備で「 VScode」をインストールしましょう。

このサイトを参考にインストールしてください。簡単にわかりやすく書かれているので「あとで」と言わずやってみてください。本当に簡単です。本当です。

「 VScodeのインストール手順@Windows10」

qiita.com

「 Macに Visual Studio Codeを導入してみる」

qiita.com

これで準備完了。

簡単だったと思います。「難しかった！ふざけるな！」と思った方はコメントでそのストレスを吐き出してください。お待ちしております。

では、やってみよう！と思いましたが長くなってしまったので続きはまた次回。

ありがとうございました！

*1: wikipedia

*2: wikipedia