フォントサイズを可変にしてみよう！css関数clampの便利なお話
googleがモバイルフレンドリーを提唱してからもはやレスポンシブ対応は必須になりましたが、レスポンシブ対応って悩ましいですよね。 各デバイスの代表的な端末の解像度に合わせて作ればよいのですが、ウィンドウ幅を縮めてテストを繰り返していると微妙な幅の時にレイアウトが崩れているのが気になってしょうがない、なんてことザラにあります。 width、height、font-size、padding、marg
2021.4.1
HTML
rel=”preload”を極めるために必要な2種類のプリロード機能
本稿はWebパフォーマンス Advent Calendar 2019の13日目に参加させていただきました。 フロントエンドのパフォーマンスチューニングのシリーズ記事で、今回は2種類のプリロード機能に焦点を当ててリソース読み込みの最適化について解説します。 はじめに まずはブラウザが持つ2種類のプリロード機能をおさらいしましょう。 1つ目はHTMLの仕様として定義されている <link
2019.12.12
Software Design 2019年10月号「“速い” Webアプリケーションの作り方［フロントエンド編］」に寄稿しました
本日発売のSoftware Design 2019年10月号に私の執筆した記事が掲載されました。 進化の激しいフロントエンドの分野で、パフォーマンスに焦点をあてた特集記事「“速い” Webアプリケーションの作り方［フロントエンド編］」の第2章を担当しています。 フロントエンドのきらびやかさからはあえて一歩離れ、DOM/CSSOMの構築やレンダリングブロックの観点から、ブラウザの動作の仕
2019.9.18
フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話
今回はウェブシステムにおけるフロントエンドのパフォーマンスの話です。 皆様はウェブのパフォーマンスを気にしていますか？ おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？ しかしプログラムをチューニングしても、期待ほどはページ表示速度が改善しなかったことはありませんか？ 昨今のウェブサイトは大量のCSS/Javascriptファイルで構成されている
自動化やスクレイピングに使えるやつ XPath
XMLの特定の部分を指定するためのXML Path Language(以下、XPathと表記します)という言語があります。 HTMLを解析して自動テストの作成やスクレイピング、XML設定ファイルの書き換えに使います。簡単な割に、覚えておくと地味に便利なやつです。 とりあえず書いてみる 何はともあれ、覚えるためには書いてみます。 ブラウザが一番手軽なXPath
2016.8.23