HTML
CSS
JavaScript

Web技術の基礎と実践をざっくり振り返るのに便利だった、MDNとWeb Fundamentals。

なんとなく学んで、
なんとなく理解した気になって、
なんとなく興味が薄れていったHTMLとCSS。

こんなフワフワしたままじゃマズイなぁと思いながらも、W3Cはちょっと固いし、どこか手軽なところはないかと探して行き着いたのがMozillaのMDNと、GoogleのWeb Fundamentalsでした。この記事はふたつのサイトをざっくりまとめているだけなので、中身が気になったかたは、サイトの方でご確認ください。

MDNは全般的に優しく穏やかで、Web Fundamentalsはハードコアなページが多い印象でした。

MDN

Mozilla Developer Network

HTMLのタグやCSSのプロパティを検索すると、たいてい上位に出てくる。Firefoxで有名なMozillaが公開している、Web技術全般をわかりやすく解説しているありがたいサイト。ほとんど同じ名前でデザインの雑誌やら本を出版しているMdNという会社があるけれど別もの。Web制作関連の本も出版されているので、お世話になっています。

開発者向けのウェブ技術

MDNといえばリファレンスだと勝手に思っていたのですが、意外とチュートリアルなども充実していて、その入り口になるのがこのページです。

HTMLを始めよう

  • HTMLって何だ?
  • 開始タグ/終了タグ
  • ブロック要素とインライン要素
  • 属性/論理属性
  • ダブルクォートかシングルクォートか?
  • HTML文書の構成
  • HTML 内の空白
  • 実体参照

ハイライト

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

上記の例において、大量の半角スペースが挿入されていることに気づいたかもしれません。大量の半角スペースはあっても無くても構わないものです。次の2つのコードスニペット (それ単体では動作しないコード例のこと) は等価です。

初めてHTMLをやったときにつまずいた、半角スペースの扱いにも触れられていた。当初は、間隔をあけるために大量の全角スペースをいれていたのを思い出して恥ずかしい気持ちになる。

headには何が入る?HTMLのメタデータ

  • タイトルをつける
  • メタ要素
  • HTML文書の文字コードを指定する
  • メタデータの他の種類(OGPとか)
  • サイトに自分の好きなアイコンをつける
  • HTMLにCSSとJavascriptを追加する

ハイライト

ここでの狙いは head に置くことのできるすべての使い方を示すことではなく、むしろ headに入れたくなるのが最も明らかなものの使い方を教えて、なじんでもらうことです。始めましょう。

headに入れたくなる・・・なんて欲求は持ったことがなかった。

HTMLテキストの基礎

  • 見出しとパラグラフ
  • なぜ構造が必要なのか?
  • リスト
  • 強調と重要性
  • イタリック、太字、下線

ハイライト

In HTML we use the <strong> element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice

スクリーンリーダーで<strong>のトーンが変わるのを知らなかったので聞いてみたけど、いまいち違いがわからなかった。

ハイパーリンクの作成

  • リンクの解剖
  • title属性による補足情報の追加
  • ブロックレベルリンク
  • URLとパスに関する簡単な入門
  • 絶対URL vs 相対URL
  • リンクのベストプラクティス
  • メールのリンク

ハイライト

ハイパーリンクはウェブが提供する最も刺激的なイノベーションです。

改めていわれると、グッとくるものがある。

その他のコンテンツ

CSSやJavaScriptもHTMLと同じような感じでまとまっています。全部の概要をまとめようとおもったのですが、色々ありすぎたのでリンクだけ張っておきます。フロントエンドだけじゃなく、Expressを使ったサーバーサイドのチュートリアルやHTTPの話まであって手広い。

Web Fundamentals

Googleが公開している、良いWebサイトを作るための情報がたくさんのっているサイト。MDNとは毛色やターゲットが違って、実践的というかパフォーマンスを改善するみたいな話が多め。項目がありすぎてまとめきれないので、気になったページだけ抜粋しています。

優れたモバイルサイトの条件とは

  • CTAを前面および中央に配置する(大事なものは上に)
  • メニューは短くわかりやすく
  • ホームページに簡単に戻れるようにする(ロゴをタップ)
  • 一番目立つ場所に広告を表示しない
  • 情報の入力を簡素化する
  • ピンチ操作を不要にする

ハイライト

アプリのインストールのインタースティシャルを使用しているサイトは、ユーザーに不快感を与えるだけでなく、Googleのモバイルフレンドリーテストで不合格になり、検索ランキングが下がる可能性があります。

ありがとうございます。いきなり勝手にモーダルが出てくるサイトは絶滅して欲しい。特に動画の自動再生とか。

アニメーション

  • 適切な要素をアニメーション化する
  • ユーザーインタラクションのサポートにアニメーションを使用
  • 負荷の大きいプロパティをアニメーション化しない

ハイライト

アニメーションがスムーズに動かなかったり、選択を誤ったりすると、ユーザーエクスペリエンスが低下します。そのため、パフォーマンスと適性の両方を考慮しなければなりません。

耳が痛い。

CSS VS JavaScript

  • UI要素の状態がシンプルで自己完結的な場合は、CSSを使用します
  • アニメーションを細かく制御する必要がある場合は、JavaScriptを使用します
  • シーン全体を手動で調整する場合は、requestAnimationFrameを直接使用します

わかりやすい。

レスポンシブ ウェブデザインの基本

  • ビューポートを設定する
  • コンテンツのサイズをビューポートに合わせる
  • CSSメディアクエリを使用してレスポンシブにする
  • ブレークポイントの決め方
  • テキストを読みやすく最適化する

ハイライト

ブレークポイントは、デバイスクラスを基準に設定しないでください。現在使用されている特定のデバイス、製品、ブランド名、オペレーティング システムを基準にブレークポイントを設定すると、メンテナンスが非常に大変になる可能性があります。

気持ちはわかるけれど、シェアが多いiOSのデバイスを中心に考えてしまう。

さまざまな端末に対応したコンテンツ

  • ユーザーはウェブをどう読むのか
  • モバイル向けの記述方法
  • 不要なコンテンツを省く
  • 冗長なイメージを削除する

ハイライト

画像を使わない、または控えめに使用することを検討してください。テキストだけでも美しいデザインになります。

ハードコアである。

コンテンツはデザインよりも重要です。コンテンツのないデザインはデザインではなく、ただの飾りです。

煽りが強い。

ソーシャル ディスカバリー

  • Google+にリッチスニペットを表示する
  • Facebookにリッチスニペットを表示する
  • Twitterにリッチスニペットを表示する

ハイライト

ベストプラクティスは、ウェブページに対して上記の3つの対策をすべて実施することです。

大変だ。

不要なダウンロードを回避する

最も時間がかからず、最も最適化されたリソースとは、送信されないリソースです。

至言。

HTTPSを使用する理由

  • HTTPS によるウェブサイトの整合性の保護
  • HTTPS によるユーザーのプライバシーとセキュリティの保護
  • HTTPS はウェブの未来

ハイライト

機密性の高くない通信を扱うウェブサイトの場合でも、必ずHTTPSを使用してすべてのウェブサイトを保護する必要があります。

Let's EncryptやAWSのおかげで、個人で作るサイトでも無料でHTTPSを使用できるようになったのは大きい。

その他のコンテンツ

please don't hurt the web

Moz_ffx_openStandards_800x600.jpg

Promote MDN#Desktop wallpapers

MDNを巡回しているときに見つかった壁紙が、ときに無意味な<div>タグを重ねてしまう自分の心に刺さったので、貼っておきます。少し歴史を感じる味わい深い壁紙です。(壁紙という言葉を久しぶりに使った気もする)

書いたあとで読み直してみたら、記事の内容がぺらっぺらで目をつぶりたくなりましたが、サイトの方には濃い内容のページがたくさんあるので、少しでも興味のある項目があった人はぜひ。

開発者向けのウェブ技術 | MDN
Web Fundamentals | Google