「HTML/CSSを学んでどんなことができるの？」
「HTML/CSSの基礎を知って、今後の学習に役立てていきたい！」
こう思ったことはありませんか？
自己紹介をさせていただきます。
はじめまして、最近カフェ巡りにハマっているまさひろです！
カフェっていいですよね・・・。
話はそれましたが、本題に入ります。
今回の記事は「HTML/CSSの基礎」についてです！
そもそもHTML/CSSを学んでどんなことができるのか疑問に思う方もいらっしゃるかもしれませんが、この記事で詳しく解説をしていきたいと思います。HTML/CSSは比較的習得しやすい言語ですので、基礎知識を固めて今後に活かしましょう。
- これからHTML/CSSを学習する方
- HTML/CSSを基礎知識を身につけたい方
上記の方はぜひ参考にしていただけるとうれしいです！
目次
【HTML/CSSの基礎】まずは理解を深めよう
HTML/CSSを聞いてあなたはきちんと理解できていますか？
MTMLやCSSはWebサイトの制作をする際に使用されるプログラミング言語のことです。
正確には「マークアップ言語」と呼ばれますが、今回はひとくくりに「プログラミング言語」で統一したいと思います。
このHTML/CSSはWebサイトの制作をする上で必ず使用されるプログラミング言語ですので、セットで覚えておきましょう。初心者でも学習しやすい言語ですので、プログラミング言語はたくさんありますが、いちばん初めはこの２種類から学習してみてもいいかもしれませんね。
今後あなたが本格的に学習しようと思った時に途中でつまずきにくくするため、しっかりと基礎知識を抑えておくことが大切です！
HTML/CSSを学習してできること
HTMLとCSSでは、それぞれ出来ることの役割が違います。
違うのですが、セットで活用することできれいなWebサイトの制作が可能となりますのでしっかりとポイントを抑えておきましょう！
- HTML
- CSS
それぞれを使用してできることを解説してきますね。
HTMLを使用してできること
HTMLを使用すると、Webサイトの枠組みを作ることができます。
例えばこの記事のタイトルは、
【HTML/CSSの基礎知識】しっかり学んで身につけよう！
となるのですが、これはHTML上では<h1>タグというもので挟まれています。またそのすぐ下にリード文が入るのですが、これは<p>ダグで挟まれて記述がされています。
参考までに、タイトルとリード文の最初部分をHTMLで記述してみました！
|
1 2 3 |
<h1>【HTML/CSSの基礎知識】しっかり学んで身につけよう！</h1> <p>「HTML/CSSを学んでどんなことができるの？」</p> <p>「HTML/CSSの基礎を知って、今後の学習に役立てていきたい！」</P> |
このように、該当する「ダグ」で挟んで記述します。
他にもタグと呼ばれるものはたくさんあり、用途によって使い分けるので最初は分からなくても自然と覚えていくでしょう。一般的に使用するタグについて、下記にまとめてみました。
- <html> : HTML文書の範囲を示し、最初に記述します
- <head> : ページのヘッダー情報の範囲を示します
- <title> : ページのタイトルを示し、<head>タグ内で使用します
- <body> : ブラウザに表示する内容を記述する範囲を指定します
- <p> : 段落を示します
- <br> : 改行を示します
- <h1> <h2> <h3> : 見出しを表示し、1~6までのレベルがあります
- <div> :まとまりを示したり、グループ化します
- <ul> : 順番の無いリストを表示します
- <ol> : 番号順のリストを表示します
- <table> : テーブル要素を表示します
HTMLはWebサイトの枠組みはもちろんですが、「Webデザイン」「HTMLメール」「アプリ作成」にも使用される言語となります。とても汎用性の高いプログラミング言語となっていますので、ぜひ身につけておきましょう！
ただ一つ注意点なのですが、ブラウザや文字コードの解釈の違いにより、表示されたテキストが文字化けすることがあります。Webブラウザの文字コード解釈に応じて、指定する文字コードを正しく指定しなければなりません。
CSSを使用してできること
CSSを使用すると、HTMLで作った枠組みを装飾することができます。
例えば先ほどの<p>ダグで挟んだ文字を赤く装飾するのであれば、CSSを使って以下のように記述します。
|
1 2 3 |
p{ color: red; } |
このように、概要するタグ(セレクタ）を指定して装飾したい内容を記述します。
セレクタ { プロパティ: 値; }
- フォントの変更
- フォントサイズの変更
- その他見た目の変更
など、CSSを使用することで幅広いカスタマイズができるのが特徴ですね。
よく使用するプロパティについても、下記にまとめてみました。
- color : 色
- font-size : 文字サイズ
- width : 横幅
- height : 高さ
- background-color : 背景色
- font-weight : 文字の太さ
CSSはとても便利で、文字の装飾はもちろんなのですがかんたんなアニメーションの実装もできるようになります。「マウスオーバー時のボタンの動き」「divでまとめた要素の動き」なども変化させることができますので、覚えたらかなり幅広いカスタマイズができるのでとても楽しいです。
HTML/CSSはどこで役に立つ？
では「HTML」「CSS」はどういった場面で役に立つのでしょうか。
先ほども述べましたが、この２つの言語を使用することでWebサイトの制作をすることができます。それは「本業」としてでもいいですし、「副業」として活かすこともできますので身に付けたスキルを役立てると幅は広がるでしょう。
「本業」「副業」で役に立つ場面をまとめてみました！
本業での例
就職や転職をお考えの場合では、以下のような仕事で活用されるので覚えておきましょう。
- コーダー
- Webデザイナー
- マークアップエンジニア
- フロントエンドエンジニア
基本的にはこれらの仕事をしている方は、日常的にHTMLやCSSを使用しています。もちろんそれぞれ行う仕事内容は少しますし、行う工程によって難易度も違います。
ですがHTML/CSSは基本的なプログラミング言語ですので出来ることがマストとも言えますね。この基礎を身につけることでそこから幅が広がったりしますので、初心者の方こそ基礎をしっかりと固めていきましょう。
副業での例
基本的に仕事としては副業でも同じです。
- コーダー
- Webデザイナー
- マークアップエンジニア
- フロントエンドエンジニア
会社から仕事が与えられるか自分で案件を獲得していくかの違いですので、自分で案件を獲得できる見込みのある方は休日などを利用して仕事をしてみるのもいいですね。
今後、転職をする目的にせよ副収入を得る目的にせよ、プログラミングを学習して理解することはとても大切なことです。
あなたが活躍できる場所の幅が広がりますので、ぜひ身に付けておきましょう！
まとめ
いかがでしたか？
この記事では、
「HTML/CSSの基礎知識」
について解説をしました。
HTMLやCSSを活用すれば、自分でもWebサイトの制作ができるようになります。自分のスキルアップにもつながりできることの幅が広がりますので、この機会に本格的に学んでみてもいいかもしれませんね。
まずは基礎をしっかりと理解し、ステップを踏んで学習していくと挫折しにくいですよ！
それでは、この記事が参考になればうれしく思います。
