【第5弾】少しのコードで実装可能な10のCSS小技集

2023/09/07 100 users 実装 CSS小技集 コード ネスト 目次

2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定... 続きを読む

imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法

2022/07/21 175 users バック 手動 height width スペース

レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登... 続きを読む

CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法

2021/10/13 269 users aspect-ratioプロパティ エバーグリーン CSS

先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したま... 続きを読む

モダンCSSによる絶対配置（position: absolute;）の削減 | コリス

2021/09/28 260 users absolute コリス position モダンCSS 削減

テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 posi... 続きを読む

画像による Layout Shift が無くなる Web がやって来る - mizdra's blog

2020/05/31 306 users mizdra's blog web fetch 画像 img

はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (La... 続きを読む

「Surface Go」日本で8月28日発売　6万4800円から　LTEモデルは年内 - ITmedia NEWS

2018/07/11 251 users LTEモデル Surface Go 年内 Surface 日本

日本マイクロソフトは7月11日、2in1ノートPC「Surface」シリーズの新製品「Surface Go」のWi-Fiモデルを8月28日に国内で発売すると発表した。12日から予約を受け付ける。一般向けモデルの価格は6万4800円（税別、以下同）から。 10点マルチタッチ対応の10型ディスプレイ（1800×1200ピクセル、217dpi、アスペクト比3:2）... 続きを読む

12インチMacBookそっくりの「MateBook X」、ファーウェイが7月7日発売 14万6800円〜 - Engadget 日本版

2017/07/04 223 users ファーウェイ 筐体 12インチMacBook ディスプレイ

ファーウェイは、12インチMacBookそっくりのWindows 10 PC「HUAWEI MateBook X」を7月7日に国内発売します。 主な特徴は、13インチ 2160 x 1440解像度（アスペクト比3：2）の液晶ディスプレイ。Core i7搭載なのにファンレスな静音性、薄さ12.5mm・重さ1.05kgの持ち運びやすい筐体など。 実機を前にして、まず目を惹くのはディスプレイの鮮やかさで... 続きを読む

[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック | コリス

2017/05/19 162 users YouTube コリス padding CSS div

動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。 この問題を解決するには、動画を配置するiframeをdivなどの親コンテナで内包し、アスペクト比にあった高さをpaddingで指定し、親コンテナのサイズに合わせて動画のサイズを変更させます。 動画をレスポンシブ対応で実装する現在主流となっているテ... 続きを読む

[CSS]これなら簡単！レスポンシブ対応、アスペクト比を維持したまま画像や要素を実装する -RatioBuddy | コリス

2017/03/16 90 users 白銀比 スクリーン 黄金比 コリス デスクトップ

デスクトップやスマホなど、異なるスクリーンのサイズでも、黄金比や白銀比などのアスペクト比を維持したまま画像や要素を実装するスタイルシートを生成する便利なオンラインツールを紹介します。 このかわいいデザインに、癒やされます ...記事の続きを読む 続きを読む

Instagramがついに正方形縛りを捨てる。v7.5更新で縦長・横長画像に対応 - Engadget Japanese

2015/08/27 233 users Instagram iOS 拘り 正方形 代名詞

Instagramがついに正方形縛りを捨てる。v7.5更新で縦長・横長画像に対応 BY Ittousai 2015年08月28日 04時58分 0 四角四面の代名詞だった Instagram がとうとう正方形への拘りを捨てました。本日更新の iOS / Android を導入すれば、投稿時にフォーマットアイコンでアスペクト比や向きを選択できるようになります。 公式Blogによれば、正方形のスクエア... 続きを読む

EIZO、解像度1,920×1,920の正方形液晶を2015年に発売へ ～フルHDから情報量が78%増加、横幅が狭いデスクに - PC Watch

2014/11/18 562 users EIZO 正方形 横幅 正方形液晶 解像度

ニュース EIZO、解像度1,920×1,920の正方形液晶を2015年に発売へ ～フルHDから情報量が78%増加、横幅が狭いデスクに （2014/11/18 15:00） FlexScan EV2730Q EIZO株式会社は18日、アスペクト比が1:1で解像度が1,920×1,920ドットという正方形の26.5型液晶ディスプレイ「FlexScan EV2730Q」を発表した。2015年1月～3月... 続きを読む

「Surface Pro 3」国内発売　「ヤバイ、すごいデバイス」 - ITmedia ニュース

2014/06/02 59 users ヤバイ すごいデバイス ITmedia ニュース プロセッサ

日本マイクロソフトは6月2日、Windowsタブレットの新モデル「Surface Pro 3」を7月17日に発売すると発表した。価格は一般向けが9万1800円（税別）から。 MicrosoftブランドによるWindowsタブレットの最新モデル。アスペクト比3：2の12インチディスプレイ（2160×1440ピクセル、216ppi）を搭載し、プロセッサはCore i3／i5／i7。メモリは4G／8Gバ... 続きを読む

デザインやCSSやJavaScriptなど、ウェブ制作に役立つ時短ツールが豊富に揃っていて便利！ -Coveloping | コリス

2013/12/11 588 users Facebook コリス box-shadow CSS ツール

box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 C... 続きを読む

[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale | コリス

2013/08/19 193 users コリス jQuery スクリプト どり 上下左右

サイズが不明な画像を指定したエリアにアスペクト比を維持したまま、縮小させてフィットさせて配置したり、上下左右寄せに配置させることができるjQueryのプラグインを紹介します。 Image Scale -GitHub Image Scaleのデモ Image Scaleの使い方 Image Scaleのデモ デモでは大きな画像のアスペクト比を維持したまま、小さいエリアにフィットさせて表示したり、トリ... 続きを読む

映画アスペクト比の変遷史（動画＆全訳） : ギズモード・ジャパン

2013/07/17 99 users ギズモード 変遷史 ちんたら 標準 ジャパン

動画 , 映画 映画アスペクト比の変遷史（動画＆全訳） 2013.07.17 20:00 今日1日な～んも面白いこと学ばなかったな...という人にこちら。 アスペクト比（16:9、4:3）はなぜ今のような標準になったのか？　その歴史を紐解く動画なんですけど、面白くて最後まで見ちゃいました。 どんなものでも長くやれば標準になる時代も今は昔、ちょっと懐かしくもありますね。 ちんたら訳してる間に映像関係... 続きを読む

無料でiPhone・iPad・Android・PSP・KindleFire向けに一発でムービー変換できる「Miro Video Converter」 - GIGAZINE

2013/01/16 197 users GIGAZINE Widows ムービー Linux 一発

MP4・WebMなどの形式や、Apple製品・Android搭載スマートフォン・PSP・Kindle Fireといったデバイス向けに動画ファイルを変換できるフリーソフトが「Miro Video Converter」です。画面サイズやアスペクト比を指定して変換することも可能で、Widows、Mac OSX、Linuxに対応しています。 ダウンロード、インストール、操作方法などについては以下から。 M... 続きを読む

【ひとりStartMac】 ターミナルから画像を一括リサイズする方法 | IDEA*IDEA

2012/11/22 328 users IDEA SIPS ターミナル 横幅 一括リサイズ

ぬお、こんなこと出来たのか・・・。常識ですかね・・・？個人的に知らなかったのでエントリーしておきます。 さてMacのターミナルから「sips」コマンドを使えば画像の一括リサイズができるようです。試してみたら本当だった。テンションあがるなぁ。 例えばこんな感じ。「-Z」はアスペクト比を保持する、というオプションね。「80」は縦幅が横幅の大きい方をそちらにあわせる、という意味です。 sips -Z 8... 続きを読む

画像を全自動で解像度・比率別にフォルダ分けできるフリーソフト「Dimensions 2 Folders」 - GIGAZINE

2012/06/08 84 users GIGAZINE page フォルダ 壁紙サイズ フリーソフト

写真・スクリーンショットを撮ったあと、4:3のアスペクト比の画像を探したいときや壁紙サイズぐらいの画像を探す場合などに、一発で簡単に目的の画像が見つけ出せるフリーソフトが「Dimensions 2 Folders」です。ダウンロードと操作方法は以下から。 Skwire Empire - Dimensions 2 Folders http://skwire.dcmembers.com/wb/page... 続きを読む

[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb | コリス

2012/04/12 368 users コリス クロップ キャプション リサイズ サムネイル

NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコ... 続きを読む

津波を乗り越える巡視船まつしま＝海上保安庁提供

2011/03/19 279 users 津波 巡視船まつしま Movie 海上保安庁提供 朝日新聞

津波を乗り越える巡視船まつしま。朝日新聞から転載。アスペクト比がおかしかったので修正。転載元はこちら→http://video.asahi.com/viewvideo.jspx?Movie=48464141/48464141peevee378213.flv 続きを読む

[JS]背景画像をブラウザの枠いっぱいに広げて表示するスクリプト -fullscreenr | コリス

2010/11/07 279 users jQuery コリス jquery.js スクリプト ドット

背景画像のアスペクト比を維持しつつ、ブラウザの枠いっぱいに広げて表示するスクリプトを紹介します。 デモではオプションで、ドットの画像をオーバーレイさせています。 スクリプトがオフ時の表示 fullscreenrの実装 fullscreenrはjQueryのプラグインのため、実装にはjquery.jsが必要です。 HTML 当スクリプト（jquery.fullscreenr.js）とjquery.j... 続きを読む