ラック
Home > ブログ > 記事 > 2017年10月 > Webにまつわる諸々の情報の共有

Webにまつわる諸々の情報の共有

カテゴリ: ホームページ

私事ですがコードレビューをする機会がありました。すると、レビュー内容を起点にしてHTML5の規格の話やmetaタグの意味のおさらい、画像の種類、SEO、アクセシビリティなど多岐に渡って言及することとなり、改めてWeb界隈で求められるジャンルの広さを思い知らされました。

そこで、レビューの話中で出た情報が話の中だけで終わり、顧みられることがないのは勿体無いと思ったのでドキュメントとして残すことにしました。

そう、これは道標です。
少し未来の自分か、或いは第三者か。この記事を読んで気付きがあったと、糧になったという人がいるならば。 交わされた談義は無駄ではなかったと、費やした時間は無為ではなかったと、談義した内容に意義があったと。
胸を張って言い切れるように、自他に示す証のように、歩いてきた道の足跡として、道端の石を積み上げて里程標とするのです。


  • metaタグの記述。改めて意味をおさらい。
    <!-- IEの互換モードをEdge(最新)に固定 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- ないとAndroidのChromeで一部フォントサイズがおかしくなるバグあり -->
    <meta name="viewport" content="initial-scale=1.0,width=device-width">
    <!-- iPhoneやEdgeの電話番号っぽいけど電話番号ではない数字の羅列に電話番号としてaタグ付与するのを抑制-->
    <meta name="format-detection" content="telephone=no,address=no,email=no">
  • HTML5
    • HTML5からアップデートされ、今やHTML5.2(draft)とかになっている
      • 規格を出している団体が2つあって、それぞれ言っていることが微妙に違う(hタグのレベルやhgroupの扱いなど)。一応頭の片隅に入れておくと困惑しなくても済む(かもしれない)
    • セクショニングコンテンツとアウトラインはもう一度おさらいしておきたい
  • Webではアクセシビリティがホットな話題
    • Japan Accessibility Conference vol.1 - connpass: 国内最大級のアクセシビリティのカンファレンスが開催される予定(2017/11/11)
    • 背景: 条約や法律が立て続けに批准・制定されたため、動きが活発になっている
      • 障碍者権利条約: 2014/1に日本も締結。同年2月より効力発生

        障がい者が新たな情報通信機器及び情報通信システム(インターネットを含む。)を利用する機会を有することを促進すること。

      • 障がい者差別解消法: 日本の法律。2016/4に施行
    • 規格:
  • 画像関係
    • SEOとして画像にaltを付けたり、metadescriptionを書くことを意識すると良いのでは(一応)
    • SVGの概要
      • jpeg,gif,pngなどの1ドットずつに情報を持つビットマップ形式とは異なり、パスとして情報を持つ
        • 始点・終点の間はサイズに応じてレンダリング(描画)されるので拡大しても粗くならない
          • スマホとPCで共通の画像が使える。そのため、脚光を浴びている
          • SVGは(やろうと思えば)テキストとしてHTMLに直接埋め込めるので、リソース個数を1個減らす=HTTPリクエストの回数を1回減らせる、というメリットもある
    • 無料で画像編集できるツール(Webサービス)
      • draw.io: フローチャートやスケジュール、ネットワーク図、モックアップなどが作れる
      • Canva: レイヤーやぼかしのようなフィルタ機能を持った画像編集サービス。レイアウトや素材もある
      • 簡単な画像編集であればこの2つを使い分ければ結構頑張れる
  • Javascriptのエラー対処、デバッグ
    • ChromeのF12で赤×が出たら、consoleタブを開いてエラーメッセージを見てデバッグしましょう
    • console.logの使い方: console.logで意図した値が変数に入っているかチェック
  • css、font-familyの指定方法
  • 游ゴシックの指定の話
  • Webフォントの現況
    • FONTPLUS
    • TypeSquare
    • この辺りを使ってお洒落なサイトを作れると良いですよね
  • レスポンシブ対応

  • 参考: MENYA BIBIRI:メンヤ ビビリ - 奈良市のラーメン屋
    • ロゴがSVG
    • hタグの使い方(ロゴがh1, ページタイトルがh2, 記事ごとの見出しがh3)の参考
    • 「RECIPE」「ACCESS MAP」などの文字が順番にウェーブする。例えばjsでディレイ(遅延)かけつつcssのkeyframeアニメーションでstyle="transform: matrix(0, 0, 0, 0, 0, 0); opacity: 0"からstyle="transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1"にアニメーションさせることで実装しているのではないか?という予想(実際のコードを見ていないので外れていたらすみません)。こういう動きもやってみたい

タグ: css,javascript,jQuery,html,単語・用語,ニュース・時事・トレンド

 



関連する記事一覧