置換要素のレイアウトのためのプロパティ | object-fitとobject-position
それぞれの値を比較できるデモを用意しました。 object-fitプロパティの値によって、img要素に表示されるコンテンツが変形していることが確認できます。 上記のデモではobject-fit: scale-down;の動作がわかりづらいため、noneまたはcontainが適用されることを確認できるデモも用意しました。 左右の画像どちらも、object-fit: scale-down;を指定しています。画像自体の大きさは、幅200px、高さ150pxです。 左側は、画像自身がimg要素のサイズよりも大きいため、object-fit: contain;として扱われます。この場合、画像は縦横比を維持して縮小され、その要素内に収まっています。一方、右側は、画像自身がimg要素のサイズよりも小さいため、object-fit: none;として扱われ、変形せずimg要素の中心に表示されています。 基
静的サイトジェネレーターEleventy | 第1回 Eleventyとその特徴
静的サイトジェネレーターEleventy 第1回 Eleventyとその特徴 ビルドにより静的サイトを生成するツール、Eleventyの使い方を解説します。まずはほかの静的サイトジェネレーターとどう違うのか、その特徴を整理します。 はじめに 静的サイトジェネレーターは、ビルドによりWebサイトを生成するツールです。単純な静的Webサイトを生成する場合には特に便利ですが、Jamstack構成*での動的なWebサイトを生成するのにも使われます。 *注：Jamstack Jamstackは、サーバーサイドも含めたWeb開発全体のアーキテクチャです。CodeGridでもJamstackを解説したシリーズがありますので、参考にしてください。 一から学ぶJamstack Jamstackというと、Reactを利用したGatsbyや、Vue.jsを利用したNuxtのようなSPA開発のライブラリを利用した
CSS GridとFlexboxの使い分け | 第1回 テキスト量が変化する要素を並べる
CSS GridとFlexboxの使い分け 第1回 テキスト量が変化する要素を並べる いくつかの実務でよく扱う特徴的なレイアウトをCSS GridとFlexboxの両方で作り、使い分けるための勘所を身に付けましょう。1回目はテキスト量が変化する要素を並べるレイアウトを取り上げます。 はじめに 2020年現在、CSS Gridはすでに多くのブラウザで利用できるようになっています。そうなったことで、CSS GridやFlexboxをどう使い分けたらよいのかと悩んでいる方を見かけることがあります。筆者は、過去に何度かCSS GridやFlexboxに関する記事を書いています。そして実務でもCSS GridとFlexboxを使う機会が多くあります。 本記事では、これまでの筆者の経験をもとに、どのようにCSS GridとFlexboxを使い分けているのかを解説します。 なお、記事がフォーカスするのは
WAI-ARIAを活用したフロントエンド実装 | CodeGrid
このシリーズではCSS設計やJavaScriptの実装をしながら、アクセシビリティ強化が行えるWAI-ARIAの仕様を中心に、role属性とaria属性についてくわしく解説します。
WAI-ARIAを活用したフロントエンド実装 | 第1回 role属性、aria属性の基礎知識
WAI-ARIAを活用したフロントエンド実装 第1回 role属性、aria属性の基礎知識 Webコンテンツアクセシビリティを確保するさまざまな仕様のうち、WebサイトやWebアプリケーションで活用できるrole属性とaria属性について取り上げます。まず、両者の基礎的な知識から解説します。 はじめに 情報アクセシビリティに関する法整備などの背景もあり、アクセシビリティの確保は、今後、エンジニアとして無視できない技術となってきました。 あなたがこれまで、アクセシビリティに対して、あまり興味のないマークアップ・エンジニア、フロントエンド・エンジニアだったとしても、HTMLとSVGの追加仕様であるWAI-ARIA（ウェイ・アリア）を理解すれば、Webサイトのアクセシビリティを強化できるのはもちろんのこと、CSS設計やJavaScriptでのUI実装の際にも、WAI-ARIAの考え方を役立てるこ
きちんとわかる、npm install | 第1回 PCにコマンドをインストールする
きちんとわかる、npm install 第1回 PCにコマンドをインストールする 普段何気なく使っているNode.jsのパッケージツール「npm」。パッケージのインストールに使うnpm installの使い方と動作を解説します。まずはグローバルインストールからです。 はじめに 最近のフロントエンドでは、当たり前のように使っているNode.jsのnpmコマンド。その中でもnpm installはとりあえず、パッケージ（ライブラリ）をインストールのため、最初に実行するものという認識だけで、なんとなく使っている人も多いのではないでしょうか。 このシリーズでは、npm installにどのようなオプションがあり、どのような動作をするのかを中心に解説します。きちんと仕組みを知っておくことで、生成されたpackage-lock.jsonをどう扱えば良いのか、困った時にはどうすれば良いのかわかるようにな
Webマップの実装手法 | 第1回 地図サービスの利用
はじめに 2005年にGoogleがGoogle マップを発表して以来、Yahoo*、Microsoftなど、さまざまなベンダーがWeb上で利用できるインタラクティブな地図を提供するようになりました。 *注：Yahooが提供する地図サービス 2015年6月4日（現地時間）にYahooは、いくつかのプロダクトのサポートを終了すると発表しました。 Q2 2015 Progress Report On Our Product Prioritization その中にYahooの地図サービスも含まれており、maps.yahoo.comのサイトを6月末で閉鎖することが述べられています（Yahoo!検索、Flickrなどいくつかの関連サービスにおいては使用可能）。 日本で提供されているYahooの地図サービスについては、上記の文章中には言及がありませんが、何らかの影響があるかもしれません。 最近では、す
チーム開発に効く環境構築術 | 第1回 EditorConfigのススメ
次にそれぞれのプロパティの意味を解説します。 root trueに設定することで、上位階層の.editorconfigを探索しなくなります。 .editorconfigの保存先がプロジェクトのルートディレクトリの場合はtrueに設定します。 indent_style インデントの種類を指定します。 tabかspaceのみ指定可能です。 indent_size 1インデントの幅を数値で指定します。数値は半角スペースの文字数を表します。例えば、2と指定すれば、1インデントの幅は半角スペース2つ分になります。indent_sizeの値にtabを指定した場合は、tab_widthで設定した値が使用されます。 tab_width インデントがタブの場合の、1インデントの幅を正の整数で指定します。 ただし、indent_sizeが指定されている場合は、その値がデフォルト値となるため、tab_width
touch, click, pointerの実装 | 前編 タッチイベントとマウスイベント
touch, click, pointerの実装 前編 タッチイベントとマウスイベント このシリーズでは、タッチ／マウスイベント系の実装を考えます。第1回目はタッチイベントとはなにか、また、タッチイベントとマウスイベントの判別について解説します。 はじめに iPhone、Androidが登場したのはもう何年も前ですが、さらにWindows8も登場し、いろいろと状況が変化してきました。Windows8を搭載したPCの多くはタブレットデバイスのように、画面に触れることができるようになっています。 しかしながら、これらのデバイスはマウスを使っても操作できるようにもなっています。今後、どのようにタッチ／マウスのイベントを扱っていけばよいのかは、これからのウェブ開発において、より重要になっていくはずです。 そこでこのシリーズでは、タッチ／マウスイベント系のブラウザへの実装を整理し、それらのブラウザに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
