こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。
HTMLとCSSでできることを知りたい！
それなら今回はHTML/CSSでできることを一覧にするね！
結論からいうと、主にHTML/CSSでできることはWeb制作です。
このWeb制作をするにいたって、HTML/CSSでできることはたくさんあります。もう上げればきりがないくらいです。
そこで今回はその中でもよく使われるものを絞って解説します。
この記事を読んでいたらコーヒーも気づいたらなくなってますよ。
スポンサーリンク
１： HTMLとCSSの違い
HTMLは文章の構造を記述するマークアップ言語で、CSSはその文章の構造を装飾するスタイルシート言語です。
どちらもプログラミング言語とは異なるものなので注意してください。
HTMLだけでは簡素な文章をCSSでデザインすることによって鮮やかにしてくれます。
HTMLのタグの中だけで色変更などの装飾もできますが、全部やるとコードが長くなってわかりにくくなってしまうのでCSSファイルに分けてコーディングすることをおすすめします。
お互いに長所を生かし、短所を補い合っているのでHTMLとCSSはセットで扱われます。
Webサイトの制作なんかでは必ず使うと言っていいほどの言語なので覚えておきましょう。
２： HTMLでできること一覧
HTMLでは主に次のようなことができます。
- 見出しをつける
- リスト
- 画像の挿入
それでは一つずつみていきましょう。
2.1 見出しをつける
<h1> 〜 </h1>
<h2> 〜 </h2>
<h3> 〜 </h3>
<h4> 〜 </h4>
<h5> 〜 </h5>
<h6> 〜 </h6>見出しをつけるためにはh1〜h6要素をつける必要があります。
h1が1番大きくて、数字が大きくなるにつれてだんだんと見出しが小さくなっていきます。
基本的にはh1〜h3ぐらいまでしか使いません。h6要素まで細かく分けるとWebサイトが見にくくなってしまうこともあるのでできるだけ階層は深くならないように意識しましょう。
ちなみにこの記事ではh3要素までしか使っていません。
2.2 リスト
<ul>
<li> (1つ目) </li>
<li> (2つ目) </li>
<li> (3つ目) </li>
</ul><ol>
<li> (1つ目) </li>
<li> (2つ目) </li>
<li> (3つ目) </li>
</ol>リストを作るためにはli要素を記述する必要があります。
箇条書きのリストを作りたい場合はul要素で、番号付きのリストを作りたい場合はol要素でli要素を囲って下さい。
項目を増やしたい場合はli要素をどんどん増やしていってください。ただし、必要最低限にしてくださいね。
2.3 画像の挿入
<img src"(画像のファイル名)" alt="(画像が表示できなかった時に代わりに表示する文)" />画像の挿入をするにはimg要素を記述する必要があります。
src属性には画像のパスを、alt属性には画像が表示されなかった場合に表示する文章を書いてください。
ここで注意してほしいのが、画像のパスです。よくパスの階層が一段ずれていたとか、ファイル名が違うとかの理由で画像が表示されない人がいるため注意してください。
画像の表示ができるようになると一気にWebサイトっぽくなります。視覚的にも鮮やかになるため必要な場面では積極的に画像を貼り付けるようにしましょう。
HTMLについてもっと詳しく知りたい方は下記の記事も参考にしてみてください。
HTMLの基礎を解説！まずはここから初めてみよう【HTML編】 ３： CSSでできること一覧
CSSでは主に次の表のようなことができます。
- 文字の装飾
- 背景色変更
- アニメーション
それでは一つずつみていきましょう。
3.1 文字の装飾
color: red;文字の装飾をするためにはcolorプロパティを使用します。
文字の種類は果てしなくあります。例に出したものは単純に色の名前で記述しましたが、カラーコードやRGB値を使うと細かい色の違いまで表現できます。
| カラーコード | 「#」から始まり「0~9の数字」と「a~fのアルファベット」で記述する。 （例： #fff000） |
| RGB値 | 赤、緑、青を「0~255の数値」で組み合わせた表現方法。「rgb(赤の数値, 緑の数値, 青の数値」 （例： rgb(255, 0, 255) ） |
3.2 背景色変更
background-color: (背景色);背景色を変更する際はbackground-clorプロパティを使用します。
こちらも文字の装飾で説明したカラーコード、RGB値、色の名前で変更できます。
背景色はWebサイトの見栄えをよくする一つとなるためよく吟味して選びましょう。
Webサイトのテーマによって背景色を変えることでよりユーザーを惹きつけるサイトができあがります。
3.3 アニメーション
CSSではアニメーションを作ることもできます。
文字や画像のフェードイン・フェードアウトをしたり、揺れを表現したりできます。
テキストアニメーションなどができるようになるとWebデザイナーとして大きな一歩を踏み出すことができます。
CSSについてもっと知りたい方は下記の記事も参考にしてみてください。
CSSで簡単にできることを初心者向けに解説【CSS編】 ４： HTMLとCSSをコーディングするには
HTMLとCSSを使ってコーディングするには開発環境が必要になります。
開発環境は世の中にたくさんありますが、私も使っているVisual Studio Codeがおすすめです。
Visual Studio Codeは略して「VSCode」とも呼ばれ、ユーザー数もトップレベルの無料で使える開発環境です。
個人開発でも企業でも使われているもので、多人数開発をしやすいのが魅力の一つともいえます。
また、拡張機能と呼ばれるコーディングの補助をしてくれるサポーターみたいな機能もあとから何個でも追加できます。
タグを自動で入力してくれたり、全角が入っているところを教えてくれたりと様々な機能があるため便利な機能は取り入れて開発を楽にしてしまいましょう。
VSCodeの始め方や、拡張機能のおすすめは下記の記事に詳しく記載されているので参考にしてみてください。
開発環境Visual Studio Codeの始め方！構築の手順を理解してプログラミングを始めよう【Visual Studio Code編】 
VSCodeで使えるHTMLの拡張機能おすすめ5選【HTML編】 まとめ
今回はHTMLとCSSでできることについて解説しました。
HTML/CSSは主にWeb制作で使うことになると思います。
まずは基本をマスターしてそこから自分なりにカスタマイズできるように勉強していってください。
HTML/CSSについてもっと勉強したい場合は、私がよく使っている下記の本を手に取ってみてください。
 | 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ] 価格:2,486円 |
これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。
以上、ユキでした！
スポンサーリンク
