CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍
先月アップデートされたChrome 88でaspect-ratioプロパティがサポートされ、FirefoxとSafariでもまもなくサポートされる予定となっています。 名前の通り、アスペクト比を定義できるCSSのプロパティですが、Webページやスマホアプリで実際にどのように使用すると便利なのか、その使い方を紹介します。 New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アスペクト比とは object-fitプロパティ 古いハック: padding-topでアスペクト比を保つ aspect-ratioでアス
CSS | 日本語での折返しでベストな指定は？ | 1 NOTES
overflow-wrapとword-breakの全パターン比較CSSで自動折り返し処理を行うoverflow-wrapとword-breakの全パターンを日本語、英文での比較を紹介しています。 以下に比較用ページを用意しました。 可変幅なのでブラウザのウィンドウ幅などを調節して確認できます。 overflow-wrapとword-breakの全パターン比較用ページ 日本語での折返しでベストな指定は？日本語での折返しでベストな指定は「overflow-wrap: break-word;」と「word-break: keep-all;」の組み合わせで、はみ出しもせず、ある程度満足のいく結果が得られると思います。 おおよそ行ごとに<p>タグで括るの場合が多いのはずなので困ることも少ないのですけどね。 p { overflow-wrap: break-word; word-break: keep
CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント
CSSのclip-pathプロパティは、非常に便利です。 セクションの区切りを斜めにしたり、ボタンに波紋のエフェクトをつけたり、スクロールして要素がビューポートに入った時にアニメーションで表示されたり、最近のWebページやスマホアプリで見かけるエフェクトはclip-pathプロパティを使用すると、簡単に実装できます。 clip-pathプロパティの基礎知識と便利な使い方、実装のポイントなどを詳しく解説します。 Understanding Clip Path in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに clip-pathプロパティにおける座標 clip-pathプロパティに使用できる値 clip-pathプロパティを使用した実装 終わりに はじめに clip-pathプ
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
PaperCSS
Get PaperCSS Download Download the latest version (1.9.2) using either of the links below. Or download an older release via GitHub. NPM PaperCSS is available on NPM, current version 1.9.2. Install with npm install papercss –save and find the CSS in: node_modules/papercss/dist/paper.css node_modules/papercss/dist/paper.min.css CDN Don’t want to download it? That’s cool. You can just link to PaperCS
CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法
CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法 CSSで作ったボタンをマウスオーバーしたときに色を変えたい場合、「transition」を使うとふわっと色が徐々に変化するアニメーション効果を簡単に加える事ができます。 「transition:1s」なら1秒、「transition:0.5s」なら0.5秒のアニメーションになります。
【CSS】縦横比固定のトリミングされたサムネイルをつくる「内接・外接リサイズ」｜（株）くふうしずおか
今回は、CSSでサムネイル画像を描画する方法を、メモも兼ねていくつか紹介します。 段階を追って、divなどのブロック要素で縦横比率を守ったボックスを作る方法と、imgタグを使用した場合、ieに対応した場合、background-imgを使用した場合に、それぞれ内接リサイズ・外接リサイズで表示する方法をまとめました。 内接リサイズ：画像全体が枠内に収まるようにリサイズする。画像の長辺に合わせた方法 外接リサイズ：枠からはみ出す部分はカットする。画像の短辺を枠に合わせた方法 ①divの縦横比を固定してレスポンシブにする方法サムネイルではレスポンシブ対応するために、CSSだけでアスペクト比を固定したい、という場合が多いと思います。 CSSのみで任意の縦横比のボックスを作成し、divやiframeのアスペクト比を固定することでレスポンシブなデザインの場合でも正方形を保つ方法があります。 1:1の正
position: absolute;を中央寄せする方法 | コトダマウェブ
positionプロパティをabsoluteに指定したときって、どうやって中央に寄せるんだっけ？と意外と覚えられない自分のための備忘録です。なんかposition: absolute;になった時点で配置についてどう考えたらよいか分からなくなってしまいますよね。 左右を中央寄せる方法 See the Pen img_center03 by kenichi (@ken81) on CodePen. CSS img{ position: absolute; left: 0; right: 0; margin: auto; } これは理屈というよりは覚えた方が良いと思います。左右のpositionをゼロにしてmargin: auto;と。 上下を中央に寄せる方法 See the Pen img_center04 by kenichi (@ken81) on CodePen. CSS img{ po
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで簡単に作れる！フローチャート＆ダイアグラム9選【タイムライン、家系図風など】
