HTMLとCSSの基礎知識を独学でマスターする方法

ホームページを自力で作成したいと考えている方に向けて、最低限必要な知識を最短で学ぶ方法についてご紹介します。

ホームページとは

ホームページとは、ウェブサイトのことです。
ウェブサイトとは、文章や画像などの情報を集めたもののことです。

インターネットで何か情報を得るときは、必ずどこかしらのウェブサイト(例えばヤフーなど)を見ているということになります。

ウェブサイトにある文章や画像は、HTMLとCSSという2つの機械語によって書かれています。HTMLは土台作り、CSSは飾り付けとそれぞれ役割を持っています。

最低限必要なもの

  • パソコン
  • HTMLとCSSの知識
  • ブラウザ
  • 専用エディタ

HTMLとCSSのルールを覚える

まずは以下の記事をご覧ください。
HTMLとは何かをざっくりと知ることができるはずです。

次に初心者向け無料プログラミング学習サイト「ドットインストール」で、以下の講座をそれぞれ2周見てみましょう。見るだけではなく実際にコードを書いてみてください。

参考リンク

※古くなっている場合はレッスン一覧から最新の講座を選んでください。

2週見終わったら腕試しをします。

最後に次の動画を2周見ます。

参考リンク

Bootstrap(ブートストラップ)はCSSを効率的に書くためのツールです。
スマホやタブレットへの対応をはじめ、ボタンやフォームなどのパーツがあらかじめ用意されています。

スマホ対応の仕組みを詳しく知りたい方は以下の講座がとても参考になります。

内容を決めて実際に1から作ってみる

1ページだけの簡単なサイトを作ってみましょう。
自分の記憶を頼りにとにかく分かるところまで書いてみてください。分からなかったところは後でまとめて動画を見直して復習します。次のようなタグ早見表も知っておくと便利です。

画像の圧縮について

画像1枚あたりのデータサイズは100KB以下に抑えたいところです。
データを小さくするときは先にリサイズしてから圧縮します。高解像度のスマホで見たときにぼやけてしまわないよう、横幅は750px以上にしてください。

コメントを残す