まだ画像テキスト使ってるの？ アクセシビリティとSEO両立のベストプラクティス
かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。 Rathiの記事にヒントを得て、次の課題を挙げてみました。 画像変換
Improving Perceived Performance with Multiple Background Images – CSS Wizardry
23 October, 2016 Improving Perceived Performance with Multiple Background Images Written by Harry Roberts on CSS Wizardry. Table of Contents CSS Gradients and Multiple Backgrounds Making the Approximation Practicality Update 2016-11-11 I’m on a train right now, which means the wifi is awful. A lot of sites are refusing to load at all, and those that do have lots of images missing, leaving big blan
CSSになり損ねた言語たち | POSTD
TeXやMicrosoft Word、あるいはその他の汎用的なテキスト処理環境では簡単に実現できるような見た目に自分の文書を似せようと頑張る（文字どおり）無数の人たちに対して、 “悪いけど、うまくいかないよ” と繰り返し言い続けるのは、実際のところ、この1年間、私にとっては継続的な楽しみだった。- Marc Andreessen 1994年 Tim Berners-LeeによってHTMLが発表された1991年には、ページのスタイルを設定する方法はありませんでした。HTMLタグがどのように処理されるかはブラウザ次第で、多くの場合、ユーザの恣意的な入力が大きく影響しました。そうした事情から、ページがどのようなスタイルで処理されるかを”提案”するような標準的な方法を求める声が上がるようになりました。 しかし、CSSが導入されるのは5年先で、完全に実用化されるには10年の歳月を待たねばなりません。
Styling Underlines On The Web | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what’s the best approach depending on the situation. Thankfully however, John Jameson gets us up to speed in this guest post. There are a bunch of different ways to style underlines. Maybe you rem
Transition Effect with CSS Masks | Codrops
Keep in mind that Firefox has only partial support (it only supports inline SVG mask elements) so we’ll have a fallback for now. Hopefully, we can welcome support in all modern browsers very soon. Note that we’re adding Modernizr to check for support. So let’s get started! Creating the Mask Image In this tutorial we’ll be going through the first example (demo 1). For the mask transition effect to
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
IE11でflexboxの縦幅がおかしい時はflexプロパティの書き方が原因かもしれない
公開2015.08.07 更新2017.12.03 仕事・技術 Windows10が発売されて新ブラウザのEdgeが使えるようになっても、まだまだInternetExplorerの呪縛からは逃れられません；； 今回はフロートを使ったレイアウトではなく今後主流になってくる「フレキシブルボックス」でのレイアウトで発生した問題です。 以下のようなコードがあるとします。 <div id="flexParent"> <header>ヘッダー</header> <main> <div class="flexChild left">左</div> <div class="flexChild right">右</div> </main> <footer>フッター</footer> </div> よくあるカタチで、縦並びにヘッダー、メインコンテンツ（左右に２カラムあるとします）、フッターがあります。 これら
Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に
CSS の calc() 関数は、サイズや形状を決定する値の指定を計算式で書くことができる仕様で、現時点では IE （IE11）や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしています。 8.1. Mathematical Expressions: calc() ： CSS Values and Units Module Level 3 ちょっとした計算を簡単に書けるので私もよく使用する記述なのですが、現在、Beta リリースの Firefox 48 は、この calc() 関数の入れ子記述に対応しました。後述しますが、CSS Variables （CSS カスタムプロパティ） と組み合わせるときにかなり便利になりました。 968761 - Support nested CSS calc() calc() 関数の基本的な記述 例
レスポンシブなCSSスプライト - MANA-DOT
よく知られたCSSスプライトはボックスの幅･高さをスプライト画像と同じに指定し、background-position をずらすことで複数のスプライト画像を含むスプライトシートの中から対象画像だけを表示します。 この方法だと表示できる画像のサイズは固定なのですが、 background-sizeとbackground-positionを % で指定し、ボックスの幅によって可変サイズな (レスポンシブ、あるいはフレキシブルな)CSSスプライトの表示法を紹介します。 デモ 元画像 gulp-spritesmith で作成した適当なスプライトシートです。 スプライトの利用例 このページの幅を変えてみると、以下のスプライト画像のサイズが画面幅によって可変であることがわかると思います。 上からwidthを 70% 、 50%、 100% で指定しています。 ボタン1 ボタン2 ボタン3 利用例を含め
An Ultimate Guide To CSS Pseudo Classes And Pseudo Elements — Smashing Magazine
CSS pseudo-classes and pseudo-elements can certainly be a handful. They provide so many possibilities that one can easily feel overwhelmed, but that’s the life of a web designer and developer! In this guide, Ricardo Zea will teach you all the things you need to keep in mind so that your pseudo-classes and pseudo-elements are well implemented. If you’re an experienced web designer or developer, you
CSS カスケード変数のためのカスタムプロパティ — CSS Custom Properties for Cascading Variables Module Level 1 （日本語訳）
CSS Custom Properties for Cascading Variables Module Level 1 日本語訳 このページ は、 W3C により 2014 年 2 月 5 日付 編集者草案として公開された CSS Custom Properties for Cascading Variables Module Level 1 を日本語に翻訳したものです。 この翻訳の正確性は保証されません。 この仕様の公式な文書は英語版であり、この日本語版は公式のものではありません。 【 と 】で囲まれた部分は【訳者による注釈】です。 （他のウェブ関連仕様の一覧と共通機能の詳細） 更新：2014-02-06 （公開：2012-07-10 ） 本文ダブルクリックで当該箇所の原文が表示されます（左下隅に各種 表示切替ボタン — CSS や DOM の対応が古いブラウザでは、一部機能しないこと
flexbox レイアウトで内容がはみ出す理由: Days on the Moon
「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ」という記事が興味深いです。過去に「長い英単語を途中で折り返したいときの CSS の指定方法」にて、word-wrap: break-word と display: inline-block などの組み合わせには注意が必要 (word-wrap の指定が効かないように見えることがある) と述べたのですが、似たようなことが display: flex にも言えるようです。 この挙動は認識していなかったので CSS Flexible Box Layout Module Level 1 (flexbox 仕様草案、2016 年 4 月 2 日時点のもの) を見てみたところ、「4.5. Implied Minimum Size of Flex Items」(flex アイテムの暗黙的な最小サイズ)
flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ
久しぶりにcssレイアウトでハマってしまった。 floatレイアウトは一般的なレイアウトとしていろいろとノウハウが溜まっているように思いますが、flex box layoutはまだまだ思いもよらない挙動をすることがありますね。 今回ハマったのは「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト」という一言にするとよくわからない感じですが… 要は２カラムレイアウトで、片方は固定幅、もう片方は可変幅の（幅いっぱいになるような）カラムレイアウトであり、可変幅の方の子要素として長いテキストを含んでいるもののレイアウトです。 単純に考えて↓こんな感じで書けば、１つ目の要素が幅100pxの固定になり２つ目の要素が残りをエリアの幅になると思うのですが、そうはなりません…。 <style type="text/css"> .flex { display: flex; wid
僕がネイティブなCSS変数にわくわくする理由
数週間前、CSS変数（より正確にはCSSカスタム・プロパティ）が、Chrome Canaryの「試験運用版のウェブ プラットフォームの機能」フラグ1を有効にすることで利用できるようになりました。 Chromeのエンジニアであるアディ・オスマーニがそのリリースについてはじめてツイートしたとき、多くの否定的で、敵対的で、懐疑的な声が寄せられました。その量は驚くべきものでした。少なくともCSS変数にわくわくしいてる僕にとっては。 これらの反応をざっと見渡したところ、苦情の99%は次の2つの点についてのものだとわかりました。 構文が汚くて冗長。 Sassの変数がすでにあるじゃん。興味なし。 もちろん僕もあの構文は好きじゃありません。それは認めます。でも、あれがいい加減に決定されたものではないってことは理解しておくべきです。CSSワーキング・グループのメンバーは、CSSの文法と互換性があり、かつ将来
Textured Gradients in Pure CSS
We’re going to create a background like this in pure CSS: Of course, the simple version would be to simply create a CSS gradient (and there are tools that make creating them easy): But it just doesn’t look that great, simply because we can only create linear or radial gradients. We want more randomness, something that looks less geometric and predictable. A common method is to choose a real-life p
Styling Broken Images | bitsofcode
Broken images are ugly. But they don’t always have to be. We can use CSS to apply styles to the <img> element to provide a better experience than the default. Two Facts About The <img> Element # To understand how we can style broken images, there are two facts about the way the <img> element behaves that we need to understand first. We can apply regular typography-related styling to the <img> elem
Box-decoration-break | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The box-decoration-break property lets you control how box decorations are drawn across the fragments of a “broken” element. An element can break into fragments at the end of a line, over columns, or at page breaks. .module { box-decoration-break: clone; } The box decoration properties contr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#)
-ms-high-contrast media feature (Internet Explorer)