高解像度ディスプレイ対応のサンプル
最近ちょこっと初学者の人を対象にHTML/CSSやらWebサイト制作の基礎的なことを教えてたりするんですが、その一環で高解像度ディスプレイ対応のサンプルを作りました。
猫の写真は単純にかわいいというのもあるんですが、ひげのあたりを見比べると解像度の違いに気づいてもらえるのでいい感じです。
ファビコンとかタッチアイコンとかOGPとかAndroid版Chromeでのタブの色とかの設定
自分はしばらくこのコピペでやっていきます。
<!-- タッチアイコンの設定 --> <link rel="apple-touch-icon" sizes="192x192" href="apple-touch-icon-192x192.png"> <!-- iOSのタッチアイコンのタイトルの設定 --> <meta name="apple-mobile-web-app-title" content=""> <!-- windows8,10でスタート画面にピン留めした時の設定 --> <meta name="msapplication-square70x70logo" content="small.jpg"> <meta name="msapplication-square150x150logo" content="medium.jpg"> <meta name="msapplication-wide310x150logo" content="wide.jpg"> <meta name="msapplication-square310x310logo" content="large.jpg"> <!-- OGPの共通設定 --> <meta property="og:type" content="website or article, etc."> <meta property="og:url" content=""> <meta property="og:title" content=""> <meta property="og:description" content=""> <meta property="og:image" content="絶対パスで記述"> <!-- Twitterカードの設定 --> <meta name="twitter:card" content="summary_large_image"> <!-- Android版Chromeでのタブの色の設定 --> <meta name="theme-color" content="#000">
<!-- 以下は設定しなくてもいいと思ってる。Twitterのアカウントはあれば設定するかも --> <!-- OGPのサイト名の設定 --> <meta property="og:site_name" content="" > <!-- OGPのTwitterアカウントの設定 --> <meta name="twitter:site" content="@foobar >
ファビコンは設定しないで、ドキュメントルートにfavicon.icoを置いておくだけ（参考:普通のHTMLの書き方）。タッチアイコンも一行で十分。サイズは180pxでいいという話もあるけど、192pxのほうが数字が美しいので採用。タイトルが長くて切れてしまうようなら、iOSなら別途設定できる。
Windows8,10のスタート画面にWebサイトをピン留めできるのは知らなかった（参考:【2018年版】Webサイトのファビコンや各種アイコンの正しい設定方法 | Web Design Trends）。色の設定もできるけど画像を設定しておけば必要なさそうなので省略。必要なコードはマイクロソフトの公式（Build My Pinned Site）から生成できるけど、<meta name="application-name" content="">という設定はWebアプリケーション以外には使ってはいけないものらしく、使わないほうがいいと思う（参考:HTML5/ページ全般/meta要素 ウェブアプリケーション名を示す - TAG index）。ちなみにこの設定はAndroid版のChromeとEdgeのタッチアイコンのタイトルにも反映される。
OGPの設定もFacebookとTwitterで共通で使えるものは共通で設定。prefix属性も設定しなくても大丈夫そうなので省略。Twitterカードの設定はsummaryとsummary_large_imageがあるけど、専有面積的にsummary_large_imageでいいんじゃないかな…画像も共通で使えるし。OGP用の画像は1200x630以上が推奨されている。summaryにするならたぶん144×144で大丈夫（参考:ツイートにページ情報を表示する「Twitterカード（Twitter Cards）」を設定してみた | 株式会社グランフェアズ）。公式でOGPが確認できるツールは下記。
デバッガー - 開発者向けFacebook
Login on Twitter
最後にAndroid版Chromeでのタブの色も設定できるので必要なら設定して終わり。個人的には好きな設定。
一通りの確認はしたけど、もし間違ってたりしたら嫌なので検証お待ちしております。こうしたほうがいいんじゃないかという改善案も。
BEM勉強中
前はBEMっぽいもの書いてて、最近はちゃんとBEM書けてると思うけど、不十分だと思うので勉強中。
BEMってclass="block block--modifier"みたいなclass名って非推奨だっけ…？と思ってたら
modifierはplaceholder selectorを使って差分のみ記述する
なるほど。
もともと「正しいBEMの書き方」というものはなく、みんなの中にそれぞれのBEMがある、という捉え方でオッケーなのだということだ（みたいなことが実は公式にも書いてある）。
心強い言葉。
明瞭な名前をつけるに越したことはないが、難しい場合は __1, __2 みたいなエレメント名でもオッケー。
これはどうかなあ。できればあまりやりたくない。
１ブロック１ファイルに分ける。面倒臭がらずに必ずやる。
やってないですね…
SCSSの機能で、親のセレクタを使って &__element というような書き方ができるが、使用しない。制作時におけるデメリットが山ほどあるからだ。例えば、セレクタによる検索ができなくなる。
これはちょっと気をつけておこう。Bracketsならセレクタによる検索は大丈夫ってブコメあるけど。
ブロックの中に別のブロックを配置する場合、いくつかパターンが考えられる。
div span が増えることを恐れない
これパターン1がいいと思ったんだけどな…そしてめっちゃ恐れてる。恐れてるというか、めんどくさいと思っちゃう…
繰り返し現れるブロックを囲む要素を設ける
これは最近実感したので気をつけよう。
BEM、こういう記事は多くて助かるけど、実際にBEMで実装されたサイトを見たほうが早いというか勉強になりそうな気がしてる。ちゃんと探したことないけど探して見てみるかな…
「CSSプロフェッショナルのためのTIPS」を読んだ
今日読んだ記事。
スタイルのリセットに全称セレクタは使用するべきではないという意見があって、てっきりパフォーマンス的な問題かと思っていたらフォームに関係する要素への影響を避けるためっぽい。
全称セレクタを用いたスタイルの正規化 | Web標準Blog | ミツエーリンクス
【OZ Reset CSS】新しい「スタイルシート・リセット」のカタチ。 - ONZE
自分のサイトでリセット部分を全称セレクタに変えて計測してみたけど読み込み速度は変わらなかった（小規模なサイトなので参考記録？）。今まではグループセレクタで各要素にスタイルを当ててリセットしてたけど、これからは全称セレクタを使ったほうがいいかもしれない。楽だし。ただフォームに関しては試してないので要検証。
max-heightとoverflow:hiddenだけで簡単にスライダーが作れるぞ、というのがあったので実装してみたけど思ってたのと違った。海外だとこういうのもスライダーというのか…あまりいいUIだとは思わないし、使いどころはなさそう。
近況や8月にやったこと、面白かったイベント
よ～し毎日ブログ書くぞ～、と思ってはいたもののそううまくはいかず…8月は精神的に落ち込んでいたこともあって、勉強もあまり捗りませんでした。N予備校は相変わらずちょくちょく進めていて、環境構築やGitHubの使い方が終わったところ。リアルだと勉強会やセミナーに積極的に参加するようにしていて、もくもくしたりわからないことを人に聞いたりしています。最近面白かったイベントはこちら。
アンカンファレンス形式のイベントで（アンカンファレンスという言葉をはじめて知った）、参加者が同じ立場でそれぞれが持ち寄った話題についてフランクに話をするというイベントでした。10人ほどの参加者で、自分とは違う職種の考え方や意見を聞けたのがよかったです。こういう形式でもないと打ち上げや懇親会を狙って話を聞くしかないので、貴重なイベントです。あと打ち上げの店がいい感じだった。
次は技術的な話題を書きたいですね。ちょっと前にアクセシビリティのイベントに参加して、そのレポート的なものとか、アクセシビリティそのものについての記事を書きたいと思ってます。最低でも週一では更新したいな…
script要素のdefer属性とasync属性による非同期読み込みについて
早速一日空いてしまった。
今日読んだ記事。
script要素はbody要素の閉じタグの直前に記述するのがセオリーだけど、なぜかというとscript要素内にdocument.write()メソッドがあるとDOMツリーに影響を与えてしまう。そのため、script要素があるとHTMLのパースを中断してscript要素を先に読み込む。これがパフォーマンス的によろしくないので、body要素の閉じタグ前に記述してパースを中断させないようにしよう、という話。
ここで、script要素にdefer属性、async属性を記述するとパースの中断がなくなる（その代わり、そのscript要素内のdocument.write()メソッドが無視されるようになる）。
defer属性の場合、読み込みが非同期になりHTMLパースの終了後にdefer属性が付与されている順番に実行される。async属性の場合、読み込みが非同期になり、ランダムな順番で実行される。タイミングの詳細については下記の記事参照。ぶっちゃけ完全には理解できてない…
以上が自分の理解できている範囲なんだけど、実際の用途としてはあまり思い浮かんでない。bodyタグの閉じタグ前に書くよりheadタグ内に書いたほうが見た目がよろしいから、defer属性を付与してscript要素はheadタグ内にまとめるとか？実際にどの程度パフォーマンスが向上するかはやってみないとわからないし、そもそも開発者ツールでのパフォーマンスの計測ってやったことなかった…
N予備校を進めている
N予備校をちまちま進めてます。
今日受講したカリキュラムはシェルプログラミング。.sh【拡張子】とはというページも参考にした。ちょっとサボってたので、Linuxコマンド忘れてるのがある。vimの使い方もたぶん忘れてる。復習しなくては…。
なぜN予備校を進めているかというと、Gitを教えるカリキュラムがあるから。僕はまだGitを使えないのです。少なくともそこまでは進めて、Gitの使い方に慣れたいと思います。
それ以後も入門コースは進めたいんだけど、ほかに勉強したいこともあるので兼ね合いになるかなと。ただプログラミング面白いし、知識や出来ることの幅を広げたい気持ちはあるのでなるべく進めたいんですよね…難し難し。今日はもう少しだけ勉強して復習して、寝ます。
