ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。 Chrome 123 beta New in Chrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのlight-dark()カラー関数 CSSのdisplay-modeでpicture-in-p
横並びになったボタンを同じ幅で配置するCSS
複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。 <div class="wrapper"> <button type="button">Hi</button> <button type="button">Hello</button> <button type="button">Lorem ipsum dolor</button> </div> .wrapper { display: flex; flex-direction: column; gap: 1em; width: fit-conten
視野が広がるCSSの妙 〜object-fit 編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。毎日ソファで寝る男、フロントエンドエンジニアのザワです。 この度、知らなければ損をしている、知っておけば得しかない、視野が広がるCSSの妙シリーズを開始する運びになりました。 今回は、object-fit編です。 はじめに object-fit、みなさんはバリバリ使いこなしていますか？ 私はというと、バリバリ使っています。それこそ、レガシーなCSSやっちゃってるんじゃないの！？ SEOで画像検索に注目が高まっているのにbackgroundやっちゃってるの！？ なんて上から目線で言いたくなってしまいます。だって、object-fitを知っているから。 じゃあobject-fitって何ができるの！？ 美味しいの！？ ってな具合に気になってしまいますよね。そうでしょう。 ざっくり説明すると、background-sizeプロパティでcoverやらcontainやらで、諸々やっていたこ
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale
画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c
ラッパーに含まれたコンテンツとヘッダ、ヘッダの幅だけラッパーを超えさせるテクニック | コリス
全体をラッパーで包み、ホワイトのコンテンツはラッパーで指定した幅だけど、レッドのヘッダは表示サイズが指定した幅より広い時にラッパーを超えた幅で表示するスタイルシートのテクニックを紹介します。 いやー、日本語ムズカシイ、、、 デモ 実装 デモ デモページは構造的にはラッパーの中に上から、半透明のレッドのヘッダ、ホワイトのコンテンツの2つで構成されています。 まずは、表示サイズがラッパーの幅960pxを超えた時の表示。 Improved Full Width Browser：幅1200px コンテンツは幅960pxで表示され、ラッパー内にヘッダが含まれているけど、ヘッダの幅はそのコンテンツのラッパーを超えている状態です。 表示幅が960px以下になると、ヘッダはコンテンツの上部に成り行きで収まります。 Improved Full Width Browser：幅780px 実装 HTML HTM
画面サイズに応じて画像を差し替える軽量jQueryプラグイン・jQuery Picture
スマフォやタブレットなどで閲覧した 際に表示する画像を差し替える軽量な jQueryのプラグイン・jQuery Picture のご紹介。レスポンシブWebデザイン でよく問題視される画像のサイズの件 に対応するライブラリです。 設定したブレークポイントに応じて画像を切り替えるライブラリです。2KBと軽量なのが良いですね。 以下サンプルです。手抜きですみません。 jsfiddleでフレームを操作して動作確認出来ます。 Sample コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery-picture-min.js"></script>
[CSS]画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック
デモページ：幅480pxで表示 実装 実装のイメージ 画像のサイズは100%で設定し、高さ・幅の上限は画像を内包するdiv要素で設定します。 また、垂直方向の中央に配置するために、「overflow: hidden;」を使って余剰分を隠します。 実装のイメージ：天地均等にクリップ [ad#ad-2] HTML 画像はimg要素で配置し、div要素で内包します。 <div class="image-wrap" id="wrapper"> <img src="path/to/your/image.jpg" alt="your image"> </div> CSS 上限の高さを450pxに設定します。 .image-wrap { max-height: 450px; overflow: hidden; max-width: 800px; -webkit-transition: max-width
[JS]表示サイズに合わせてレイアウトやフォントのサイズ・ポジションを変更するスクリプト -jFL
デモ3：幅800pxで表示 [ad#ad-2] jFLの実装 現在、開発者バージョンが公開されており、それを参考に実装方法を紹介します。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jFL.min.js"></script> HTML 3カラムのデモのHTMLです。 ※シンプルにしています。 <div id="container"> <div id="left"><p>カラム：左</p></div> <div id="center"> <img src="gnu.png" id="the_img" style="float:left"> <p>カラ
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
アニメーションでレイアウトを変更するMasonryを使ったポートフォリオのテンプレート
グリッドベースに配置されたパネルをダイナミックなアニメーションで配置変更するポートフォリオ用のテンプレートを紹介します。 Expanding Fullscreen Grid Portfolio オンラインデモ [ad#ad-2] Masonryは以前紹介した「パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry」のjQueryのプラグインで、パネルをグリッド状に配置し、ブラウザのサイズを変更すると、それに合わせてアニメーションでパネルの配置を変更します。 スライドショー時のキャプチャ 実装 ダウンロードファイルには、HTML, JS, CSSなど一式が揃っています。 コンテンツは必要な箇所のみ変更するだけで、そのまま利用できると思います。 HTML 最初に表示されるパネルのHTMLです。 <div class="item block" data-bgimage="imag
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは覚えておきたい！ コンテナ・ラッパーを定義するCSSの古い書き方とモダンCSSを使用した書き方
IDEA * IDEA
[JS]サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFit