Skip to content

Vol.252

Kota Furusawa

Helping Browsers Optimize With The CSS Contain Property by Smashing Magazine Jump to heading

CSSの contain プロパティを用いて、ブラウザの最適化を手助けする Jump to heading

CSSの contain プロパティはレイアウトの仕方をブラウザに教える方法の一つであり、パフォーマンス最適化を行う際に有効な手段ではある。しかしながら、レイアウトの組み方によっては副作用が起きる場合もあるという。この記事ではそのプロパティについて詳しく解説し、どのように活用できるかについて解説を行う。

Goodbye, Clean Code Jump to heading

クリーンなコードが全てではない Jump to heading

Dan氏が実際に経験したリファクタリングに関する経験の話。ある晩、冗長で重複したソースコードのリファクタリングを行いクリーンに書き換えたところ、次の日には上司から戻すように命じられた。上司の指摘を受け、以下の点に問題があったと反省する:

  • コードを書いた人とコミュニケーションを取らずに勝手に変更を行った
  • 重複は無くなりクリーンなコードにはなったが、追加の修正が何倍も複雑になってしまった

きれいなコードに固執過ぎず、コードベース全体を考慮した実装をしていくべきだと結論づける。

A short history of body copy sizes on the Web Jump to heading

Webにおけるフォントサイズの変遷 Jump to heading

Florens氏は自身がWeb制作に携わり始めた2005年のころのフォントスタイル・サイズの設定から、その後時代の流れやそれに伴うデバイスの変化によって、読みやすいとされたフォントサイズがどのように移り変わってきたかについて語る。なぜ、ブラウザのデフォルトのフォントサイズは16pxなのか。ユーザーのデバイス、利用環境、姿勢なども踏まえたフォントのサイズ・調整方法とは。

Why You Should Choose HTML5 <article> Over <section> by Smashing Magazine Jump to heading

article タグと section タグは視覚的には大きな違いが無いが、Assistive Technologyを使用して閲覧した際には、挙動の違いがある点を取り挙げる。

My Priority of Methods for Labeling a Control Jump to heading

Accessible Nameをどのようにつけていくか、Adrian氏は以下の方法を自身で行っており、推奨している。この記事ではそのそれぞれの方法について紹介していく。

  • ネイティブHTMLの特性を活かす
  • 既に存在する閲覧可能なテキストを指定した aria-label の適用
  • 不可視なコンテンツの活用
  • aria-label を適用させる

Flexible Captioned Slanted Images by 24 ways Jump to heading

An Event Apartのランディングページで実装されているトップの画像の実装について考察していく。複数の画像が傾いて並んでおり、またキャプションも移しく整列されている。この実装がシンプルなマークアップとCSSで行われていることに着目し、どのように実現されているのか探る。

Motion Paths - Past, Present and Future by Codrops Jump to heading

SVGのモーションパスアニメーションの仕組みと実装方法を紹介する。

In Brief Jump to heading