もう迷わない!HTML/CSS初級講座

HTML、CSSを使っているとき、わからないことがあって調べても結果は古い記事だったり、記事によって違うことが書いてあったりと戸惑うことはありませんか?「千貫りこのHTML/CSS初級講座」では、はじめに何を学びたいか、実際にHTMLを触ってみて何に興味を持ったか、受講生一人一人の疑問に沿って授業が展開されます。

pictureタグのデモgif
ウィンドウサイズに合わせて画像が変わるpictureタグを使用したデモ

多様化する閲覧環境

現在のwebサイトは閲覧環境が多様化されています。制作をするうえでwebのトレンドを知ることは最も大切なことのひとつです。Googleは、パソコン向けページとモバイル向けページの両方を持っている場合「モバイル ファースト インデックス=スマホ向けページを優先して評価する」とブログで公開もしました。『モバイルフレンドリーテスト』では自分のサイトがモバイルサイトとして対応しているか確認できますし、『Browser screenshots』では入力したサイトに対して各環境からの見え方をスクリーンショットにして確認できます。
現在、インターネットを閲覧する人口はモバイルからの閲覧がパソコンからの閲覧人数を上回っています。時代の流れとともにユーザーに合わせたサイトを作るために、webのトレンドには日頃から目を配ることが大切です。

タグではなく要素を意識する!

HTMLの記述にはタグ(開始タグ、終了タグ)やclassなどの属性があり、タグと属性を合わせたものを要素と呼びます。タグ単体を見てしまいがちですが記述の際は要素を意識しましょう。brなど終了タグが無いタグも要素です。 制作するうえで覚えておきたいタグ、使い方を間違えやすいタグ、HTML5からの新しいタグなど、一つ一つの意味と役割を丁寧に教えていただきました。タグの役割と使い方を正しく理解すれば、どこに何を使うのか混乱することも減ると思います。

HTMLだけで使える最新タグ

HTML5.1から追加されたタグpictureは、HTMLだけでレスポンシブに対応した画像を扱うことができるタグです。複数の画像を用意し、それぞれにブラウザの値を設定するとパソコンやスマホ、タブレットなどデバイスの大きさごとに画像が自動で切り替わります。今まではimgタグにJavaScriptを使用していましたが、このタグだけで実現できます。

操作中のスクリーンショット

今まで、ひとつのタグで使えるのに何故わざわざ別のタグを使わなければいけないのかわからず、曖昧な知識で制作をしていました。今回の講座で順序立った説明を受け、SEOや閲覧する人を考えてそれぞれに合ったタグを正しく使うことがより深い理解につながることを知りました。HTMLやCSSを独学で覚えるのはなかなか難しいことです。疑問点をリアルタイムで聞けたことは大きく、自分の学ぶべき方向性を知ることが出来た1日となりました。

2017年4月

千貫りこ

関連する他の講座