【HTML&CSS】Webページを作りたい!!プログラミングはココから始めよう

アイキャッチHTML01

こんにちは。ヒロユキです。

「プログラミング」といっても言語の種類はたくさんありますし、その特性もいろいろなのです。

なので、目的を持って取り組まないとなかなか上達しません。

Webページを作りたい!!プログラミングはココから始めよう

小松田くん

目的って言われても…まだ思い浮かばないんですけど…。

尾地ヒロユキ

たしかにね。じゃあ馴染みがあって取り組みやすい「Webページのコーディング(!)」からやってみよーか!

コーディング

Webページなどのデザインを、ブラウザで見える形にすること。一般的に「HTML」と「CSS」というプログラミング言語が使われる。

いつも僕たちが見ているWebページのほとんどは「HTML」と「CSS」という2種類のプログラミング言語で作られてます。

実際に、このページをブラウザを通さずに見てみると…。↓

ブラウザを通さずに見たページが左側の画像です。記号がたくさんで目がチカチカしますね。

尾地ヒロユキ

うわ〜。ジガイッパイダナ…。

普段みているウェブページは、実はこんな記号の集まりでできています。

でもこの状態では理解できないので、ブラウザが誰が見てもわかるように変換→表示をしてくれているのです。

また、このように「Google Chrome」では閲覧しているWebページのソース(!)を確認することができます。

ソース(ソースコード)

プログラミング言語で書かれた指示文書のこと。プログラムに表示や処理をしてもらう内容が、細かく書かれている。

「HTML」ってなに?

「HTML」とは「Hyper Text Markup Language(ハイパー テキスト マークアップ ランゲージ)」の略語です。

  • HyperText →Webページの内容
  • Markup →編集する
  • Language →言語

ざっくりとした意味付けは、こんな感じです。

主にWEBサイトを作るために使われてますね。

「CSS」ってなに?

「CSS」とは、「Cascading Style Sheets(カスケーディング スタイル シート)」の略語です。

  • Cascading →連鎖している
  • Style →見栄え
  • Sheets →データやファイル

CSSの役割は、HTMLの見た目を装飾して見やすくわかりやすいものにすることです。

「HTML」と「CSS」の特徴

HTMLやCSSには、「<」と「>」で囲まれた「タグ」と呼ばれる文字列がたくさん存在してます。このタグの組み合わせで、Webページが作られてるのです。

しかし「HTML」だけではWebページとして単調な表現しかできません。

なので「CSS」との組み合わせで、装飾された見栄えの良いWebページを作ります。

Webページが「1枚の絵」だとしたら、「HTML」=鉛筆で下書き、「CSS」=絵の具で装飾、のような感じです。

小松田くん

だから2つ合わせて「HTML&CSS」って言うんですね。

身近なWebページだからこそ「取っつきやすい」

今や僕たちにとっては、なくてはならないWebページ。

そんな身近なものだからこそ、プログラミングの一歩目として取っつきやすいのが「HTML&CSS」です。

プログラミングを始めるきっかけに最適なだけでなく、お気に入りのWebページの構造を理解することで自分のサイト作りにも応用できます。

あなたもココからプログラミングを始めませんか?

それじゃまた。ヒロユキでした!

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪