1. ホーム
  2. 【脱初心者】HTML・CSS入門

【脱初心者】HTML・CSS入門

【脱初心者】HTML・CSS入門

一緒に勉強しましょう！
うおおおおおおおおおおおお！

もちweb屋さんのHTML・CSS入門では、作りたいものを思い通りに作れるようなテクニックと知識を基礎から解説しています！

HTML編

  1. 環境構築
  2. HTMLとは何かを知ろう
  3. 基礎的なHTMLのタグを覚えよう
  4. 簡単なページを作ってみよう

順番に読んでいきましょう！HTML編を読み終わると主要なタグを使い分けて簡単な静的ページが作れるようになります！
他の解説サイトと違い、最後には作ったHTML・CSSを無料で性的サイトとして公開する方法も紹介しています。

(クリックで展開)

まずは環境構築です。
すでにHTMLを表示するブラウザとコードエディタがある場合は飛ばして大丈夫です。
このサイトではVisual Code Studioを使用して解説しています。

HTMLを作成する準備ができたら、HTMLが何なのかを知りましょう！

HTMLが何なのかわかったらよく使うタグは一通り覚えていきましょう。
ここで紹介するタグはwebページを作成する時には何度も出てくる重要なタグです、これらを覚えることでスムーズにコーディングできるようになります。

HTMLが何なのかわかったら簡単なページを作ってみましょう。
実際に作ることによって一気に身に付き理解が深まります。

ここまでの内容で装飾のないシンプルなページが作れるようになったと思います！
ここからはページの装飾、見た目をカスタマイズする方法を学んでいきましょう！

CSS編

  1. CSSとは何か知ろう
  2. CSSの文法について
  3. CSSファイルの設置場所と適用方法
  4. 要素や文字の色や大きさを変えてみよう
  5. IDとクラスの使い方
  6. 表示方法を使い分けよう(display)
  7. 要素に余白を持たせよう(padding・margin)
  8. 要素を装飾しよう
  9. 各要素をレイアウトしよう
  10. スマホ向けに見やすいサイトを作成しよう(メディアクエリとviewport)
  11. 疑似要素を使おう

CSSをマスターして思い通りの見た目のサイトを作れるようになりましょう！
ここにあるCSSレッスンはWebデザインの基礎となる部分です、これらの記事の内容を理解すれば基本的なレイアウトが組めるようになります。
正直かなり覚えることが多いですが、これだけ押さえればあとはわからないところを部分的に調べて大抵のレイアウトをできるようになると思います！

ファイトです！

まずはCSSが何なのか、具体的に何をするためにあるのかを知りましょう！

CSSの書き方にはいくつかのルールがあります、そんなに複雑なものではないですが正しく定義しないと一切適用されなかったり、間違った部分で使われてしまったりします。
適用の優先度などを理解していないと書いたのに全く適用されない場合もありますので使い方は完璧にマスターしましょう！

書いたCSSは.cssファイルとして保存し読み込みます、読み込み方にも複数の方法がありますので確認していきましょう。

Webページの文字や背景色などは細かく設定することができます。
見出しが大きく表示されたり、アンダーラインを引いたりもCSSで行いますので使いこなしていきましょう！

IDとクラスの説明です、この概念を理解しないとCSSでレイアウトをしていくのは厳しいです。
確実に理解して進むようにしてください！

重要な部分です！頑張って覚えてください！うおおおおおおおおおおおお！

CSSには要素の表示方法を表すdisplayというプロパティがあります。
displayによって一緒に使えるプロパティだったり設置した時の動作、特徴が異なります。
場合によって使い分けてレイアウトをする必要があるので主要なものは完全に覚えるようにしましょう！

応用編

覚えると便利なgridレイアウト

簡単に高さを合わせた横並びを作るtable cell

Webデザインにおいて余白はとても重要なポイントになります。
余白次第で文章や見やすくなったり、見にくくなったりします。
似たような余白のつけ方があり少し紛らわしいので注意しながら覚えましょう！

Webデザインは持って生まれた才能ではなく、知識です！知識がセンスを作り出します！デザインを気にする生活をしていきましょう！

適切な余白を付ける感覚をつかむには時間がかかりますが、普段からどんなデザインが使われているか余白はどれくらいあるのかなどを気にしてページを見てみるなどデザインを気にする時間も増やせるといいですね。

背景の色を指定したり、影を付けたり、枠線を付けたりする方法を覚えましょう！

ここまでは細かい要素の装飾がメインでしたが、ここからは大きいブロックのレイアウトをしていきましょう。
ヘッダーやフッター、記事部分などの形を決めていく作業です。

やっとよくあるページの見た目に近づいてきましたね！あともう少しです！うおおおおおおおおおおおお！

ここまでの記事では要素やレイアウトの話をしてきましたが、実際に存在するページはスマホはスマホ用の見た目、PCはPC用の見た目が用意されてそれそれのデバイスに最適化されています。
デバイスごとに適用されるCSSを変えて見た目を最適化する方法を紹介します！

マウスをかざしたときの挙動やフォーカスを合わせたときにだけ適用されるCSSを設定することができます。
どんな部分で使うのか使い方も含めてみていきましょう！

自己紹介ページを作ってみよう

覚えた要素やレイアウトを使って自己紹介のページを作っていきましょう！

作ったサイトを無料で公開してみよう

ここまで作ったら実際に公開したりアクセスできるリンクにしたりしたいですよね、ここでは無料で使えるメジャーなページの公開方法を2つ用意しましたのでぜひ作ったサイトを公開してみてください！