プログラミングスクールの情報サイト

TechSwitch プログラミングを学んでエンジニアに転身!

お役立ち情報

超簡単!ホームページの作り方入門その1「HTMLとCSSってなに?」

投稿日:

こんにちは!テックスイッチです。今回はHTML入門第一回目となります。
皆さんにホームページが作れるように分かりやすい情報をお届けできればと思いますので、ぜひご覧ください!
HTMLの組み方や具体的な記述方法を説明しているサイトはよく見かけますが、全体の考え方やイメージをしやすい内容を書いているサイトは少ないので、イメージのしやすい説明を心がけていきます!

HTMLってなに?

ホームページ作成にご興味のある方なら、HTML(エイチティーエムエル)やCSS(シーエスエス)という単語を見たこと・聞いたことはありませんか。
細かい説明はWikipedia先生にお任せしますが、

HTML・・・HyperText Markup Languageハイパーテキスト マークアップ ランゲージ)の略
CSS・・・Cascading Style Sheets(カスケーディング・スタイル・シート)の略

です。正確に覚えてもホームページ作成に役立つわけではないので、なんとなく覚えておいてください。
この時点で頭が痛くなってきた方!横文字だからといって身構える必要はありません。
日常使用するものに置き換えてご説明しましょう。

「HTML」はホームページを作成する際に使用する言語ですが、HTMLを使って無地の紙に色々なものを描くことができる訳です。文字はもちろん、四角を書いたり太い線で囲ったり、色をつけたり。写真を貼ったりもできます。

CSSってなに?

HTMLで書けるならCSS必要ないじゃん!と思う方もいるかもしれません。
確かに、HTMLだけでもホームページを作ることは可能です。使う理由はいくつかありますが、ざっくりいうとCSSを使えるとすごく便利になる訳です!
CSSは電話帳のような役割をします。皆さん携帯電話でメールを送ったり電話するとき、電話帳から情報を呼び出しますよね。毎回メールアドレスや電話番号を直接打つことは少ないと思います。

なぜなのか。。

便利だからです!

電話帳に登録しておけばすぐ呼び出せますし、メールアドレスが変われば電話帳の登録情報を変更すれば良い訳です。
これをHTMLとCSSの関係に置き換えると、HTMLで赤色の文字を書きたいときにCSSに登録しておいた「文字色:赤色」という情報を「文字もじお君」という名前で登録しておけば、文字を赤色にしたいときに「文字もじお君」を呼び出せば文字が赤になる訳です。例えば、文字を青色に変更したいと思えば、「文字もじお君」の電話帳の情報を赤色から青色に変更すれば自動的に文字色が青色に変更されます。
これ、HTMLに直接書いていて一箇所ならすぐ直せますけど、何十箇所もあったら全部書き直すの大変ですよね。。。という訳でCSSを使うことで効率よく作ることができます。

HTMLは無地の紙、CSSは電話帳だと考えてホームページを作っていきましょう!
次回は、具体的なホームページの作り方について説明していきます!

-お役立ち情報

執筆者:

関連記事

HTMLを学びたい!おすすめプログラミング学習方法

そうだ。HTML、勉強しよう。…と近畿地方へ旅行したくなるような始まり方ですが、こちらの記事ではこれからHTMLを勉強しようと考えている方に向けておすすめの学習方法をご紹介します! 最近人 …

【徹底比較】オンラインのプログラミングスクール7選

世の中で人材不足といわれて需要が伸びているエンジニアという職業。エンジニア・プログラマーへ就職・転職したいと考えている方はたくさんいます。しかし、プログラミングというスキルは一朝一夕で習得できるもので …

未経験でIT業界に転職!実質0円でプログラミングを学べるテックアカデミー就職予備校

「IT・Web業界へ就職・転職したい!」 こんな思いを胸に秘めている方や、すでに決意されている皆さん。どのようにして就職・転職したら良いかお悩みではありませんか? 興味があっても、プログラミングやWE …

【社会人向け】働きながら通えるプログラミングスクール10選

最近世の中ではエンジニアの需要が高まっており、プログラミングを勉強するためにスクールに通おうと考えている方が増えてきています。 でも社会人になると、昼間は通えなかったり残業で決まった時間に通えなかった …

テックアカデミー

テックアカデミーにはどんなコースがあるの?講座別まとめ

最近、巷で人気が出てきているプログラミングスクール。その中でも自宅で学べるオンラインスクールとして人気を集めている「TechAcademy」。今回の記事ではこちらのスクールにスポットをあててご紹介した …