【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
入稿ヨシ、ご安全に！ CSS組版による商業書籍制作の理想と現実
現状のCSS組版を安全に印刷所入稿するための作法。（※主にVivliostyle/VersaTypeのソフトウェア利用前提でのお話）
npm管理のライブラリが提供する css をインポートする - Qiita
概要 クライアントサイドのパッケージ管理は，bower から npm に移した方が良いらしい．npm 管理の JavaScript パッケージは，Browserify を使えばインポートできる．では，CSS はどうやってインポートすれば良いのか？例えば，bootstrap を npm でインストールして bundle.css に取り込むにはどうすれば良いのか？調べた結果をまとめる． 前提 タスクランナーとして Gulp を使う．また，各パッケージのフォルダ構成に依存しない方法を探す．また，下記の例では bootstrap を使用しているが， npm i --save bootstrap にてインストール済みとする． Parcelify を使う JavaScript のインポートに Browserify を使う場合，プラグインの一つである Parcelify の利用はメジャーな方法だろう．逆
モダンなフロントエンド開発環境をつくる | // sakura note
最近、趣味で作りたいWebアプリがあって、結構クライアント側が要になりそうなので、思い切って勢いで Deep Dive してみた話。かなり長いです。 モダンって言ってるけど、TypeScriptが苦手ならES2015+ES7も全然アリだと思う。前回の記事で触れてるから、TypeScriptの代わりに書き換えればうまく載るはず。というか人口的にはTypeScriptよりES2015使う人のが当然多いだろうけど、今回はTypeScript使ってみたかったんです・・・。 背景 わたしは今までフロンドエンド開発っていうと、CSS3+HTML5で特別な開発環境も使わず、気合いで頑張って作ってきた勢です。 一応、フリーランスでバックもフロントもまとめて依頼されたり、趣味で書いたり、プログラミングスクールで先生やってた頃はフロントも教えていたんですが、とても苦手でした。特にデザインとか全くセンス無いし、
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について | blog.jxck.io
Intro Chrome が予定している <link rel=stylesheet> の挙動の変更について、 Google Chrome チームの Jake が、興味深いブログを上げている。 The future of loading CSS この内容は、単に Chrome に対する変更だけではなく、 HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。 今回は、この内容を意訳+補足解説し、本サイトに適用していく。 HTTP/1.1 時代の CSS HTML 自体がコンポーネントを意識した作りになっている場合は、自然と CSS も class などを使いコンポーネント単位に作ることができるだろう。 しかし、 HTTP/1.1 では、リクエストの数を減らすために全ての CSS を 1 つ(もしくは少数個)に結合する最適化が主流だ
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
windows_98.css·昔懐かしい。Windows 98風スタイルシート MOONGIFT
みんな大好きWindows。その大きな転換になったのはWindows 95やWindows 98だったんじゃないかと思います。徹夜して並んで大騒ぎしたなんて懐かしい記憶がある方もいるのではないでしょうか。 そんな懐かしいWindows 98を思い出させてくれるスタイルシートがwindows_98.cssです。使い道はあれですが技術的にはとても面白いです。 windows_98.cssの使い方 例えばこんな感じ！懐かしいダイアログですね。 リサイズもできる！ 例えばリサイズできるダイアログはこのようになっています。 <div class="resizable window"> <div class="header"> <img class="icon" src="icons/txt.gif"/> Untitled - Notepad <div class="buttons"> <button
Height equals width with pure CSS
Single page demo Description If you have an image with a certain aspect ratio you can easily keep the proportion with the "auto" value. Like: img{ min-width: 100%; height: auto; } The problem is that you can't use the "auto" value for the height property of a block element like a DIV or alike. It will always resize depending on the inner content/elements. The trick I found a solution which was alr
Modernizrを使ってブラウザーの機能を調べるには
ユーザー・エージェント文字列を使ってブラウザー単位で、使用可能なHTML5／CSS3機能を判定する方法は時代遅れだ。これからは機能単位で判別しよう。その方法を解説。 本稿では、Webブラウザーで使用できる機能を調べるのに、ユーザー・エージェント文字列を使ってブラウザー単位で判定するのではなく、機能単位で使えるかどうかを判別する方法を紹介する。 Modernizrとは HTML5やCSS3では、HTMLで表現できることが大幅に強化された。そのため、HTML5＆CSS3が普及するにつれ、きれいな見た目のサイトやリッチなレイアウトを持つサイトが増えてきている。 しかし、HTML5／CSS3機能の実装状況はブラウザーごとに異なるため、HTML5／CSS3の仕様として定義されているからといってそのまま使えるわけではない。この実装の差異に対応するために、これまでは、JavaScriptやサーバーサイド
Flexbox | web.dev
Flexbox Stay organized with collections Save and categorize content based on your preferences. The CSS Podcast - 010: Flexbox A design pattern that can be tricky in responsive design is a sidebar that sits inline with some content. Where there is viewport space, this pattern works great, but where space is condensed, that rigid layout can become problematic. The Flexible Box Layout Model (flexbox)
1日目 : CSS Programming Advent Calendar 2012
正直表は、ネタですが。 :activeや:targetの擬似クラスは多用します。 a要素、input要素、label要素が便利！aタグと:targetを組み合わせることで、aをクリックしたら別の要素の表示を変える事ができます。 urlのハッシュがbox_1の時は#box_1を表示する。urlのハッシュがbox_2の時は#box_2を表示する。urlのハッシュがない、box_1・box_2ではない時は、box_1・box_2を表示しないinputのradioを使って別の要素の表示を変える :checkedと間接セレクタを組み合わせるclassがb1のinputがcheckedになった時、box_1を表示。box_2は非表示classがb2のinputがcheckedになった時、box_2を表示。box_1は非表示labelを使用して:checkedを利用しやすくする labelのfor属性を
もしも10分の1の行数でHTMLが書けたら
Zen-Codingとは 1年ほど前から、Zen-Codingが話題になっています。Zen-Codingを使うと、特定の省略された記法を展開できます。この展開が非常に強力で、ちょっとしたHTMLを記述するのであれば、Zen-CodingでHTMLやCSSのマークアップを効率的に行えます。 Zen-Codingはさまざまなテキストエディタに対応したプラグインとして提供されています。プラグインには、公式対応しているものと、サードパーティの開発者が作成したものがあります。 それぞれのプラグインによって、実装機能が異なる場合があります。これらのプラグインの詳細はZen-Codingの公式サイトから確認できます。 基本的な使い方 ここからはZen-Codingの基本的な使い方を解説します。Zen-Codingをテキストエリアで利用できるサンプルを用いて、実際に試しながら読み進めてください。テキストエ
CSS からベンダプレフィックスという仕組みが消える日
Google Chrome が採用する新しいオープンソースレンダリングエンジン 「Blink」 のプロジェクトページの記述や Mozilla の方針から、今後ベンダプレフィックスがなくなるかもというお話 本の虫さんで、「Blink、新機能に対して新たなベンダープレフィクスを追加しない決定」 という記事が上がっていた （ちなみに border-radius は現状、-moz- も -webkit- も不要で使えますよ） のですが、これ、確か Blink レンダリングエンジンが発表された時から FAQ とかに書かれていましたよね？ なので今さらだと思いますが、当 Blog では当時触れていなかったし、いい機会ですので簡単に書いてみたいと思います。 Google の Chromium プロジェクトにおいて、レンダリングエンジンを Webkit から、Webkit をフォークして開発された新しいオ
QuirksBlog: CSSベンダープレフィクスは邪悪だ
QuirksBlog: CSS vendor prefixes considered harmful 先日、IEチームのborder-radiusに関する記事を読んだ。IE9は、border-radiusをサポートする（スゲェ！）そうだし、ベンダープレフィクスはつけないそうだ（かっけー！） 記事曰く、 多くのページが、既にこの機能を用いているが、いくつかは、（省略）、IE9やOpera 10.50では、うまく描画されない。なぜならば、プレフィクスなしのborder-radiusプロパティが、使われていないからだ。 規格が、「推奨」状態に近づくにつれ、ブラウザベンダーは、実装を煮詰めてテストを繰り返し、W3Cに意見を出す。新しいコンテンツは、border-radiusに、ベンダープレフィクスを使わないよう、我々として、強く推奨するものである。 俺としては、さらに一歩を推し進めたいね。 いい加
CSSベンダプレフィックスのない世界へ、ChromeとFirefox
Google Chrome runs web pages and applications with lightning speed. CSSでは標準化されていないスタイルに関してはベンダプレフィックスをつけて実装されることが多い。Firefoxであれば「-moz-」が付き、IEなら「-ms-」、SafariやChromeなら「-webkit-」、Operaなら「-o-」といった具合だ。標準化されていないものの、より豊かな表現を実現するにはベンダプレフィックスを指定してブラウザごとにスタイルを記述する必要があり、CSSファイルはベンダプレフィックスの指定で埋まるというのがよくある状況となっている。 先月、GoogleはChromeのレンダリングエンジンをWebkitから分岐し「Blink」という別のレンダリングエンジンへ切り替えると発表。WebデザイナやWebプログラマは、まさかさらにベン
いつまで使えばいい？CSS3ベンダープレフィックスの切り時チェック！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
コーヒーは命の水！もりたです。 css3の正式勧告はいつだろうと指をくわえながら使っている現在ですが、そんな中どうしても使わなければいけないベンダープレフィックス。 全部書き出すとすごくいっぱいあるみたいなんですけど、とりあえず-webkit-と-moz-だけは書くようにしてるよという人は多いんじゃないでしょうか。私のことです。 でもあれってコードが長くなるからめんどくさいなーと思ってる人は多いんじゃないでしょうか。私のことです。 そのベンダープレフィックスっていつ使うのをやめればいいのかなと思ったら、こういうことらしいです。 ベンダープレフィックス（接頭辞）とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。 【中略】 ただし、ベンダープレフィックスは、 草案（Working Draft
CSSのfont-family指定はこれで決まり！（2013冬） - 遠近法ノート
追記：最初、うっかり「2013冬」って書いてしまったんですけど、ほんとは「春」と書かなきゃいけませんでした（汗）*1 とりあえず今、CSSのfont-familyでフォントを指定するならば、これで決まり（一番下の追記も参照で）。 font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;CSSのfont-family指定、「あえてフォントを指定しない」っていうやり方もアリですが、いろいろな事情でそうも言ってられません。とりあえず今現在の最適font-family指定を考えてみたところ、上のようになりました。 指定順序、入れたフォント、入れてないフォント、すべてに意味があります。 以下説明。 ヒラギノはProではなくProN。 OS Xの和文標準フォ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Kadoppe’s Blog
