HTML5とCSS3の機能や役割や対応ブラウザなど、実装に必要な情報がすぐ分かるコーダー必読のリファレンス本
今持ってるリファレンス本は、最新のHTMLとCSSに対応していますか？ HTML5の要素とCSS3のプロパティについて、機能や役割や対応ブラウザなど実装に必要な情報がコンパクトにまとめられたリファレンス本を紹介します。 本書は2018年6月時点の最新情報が掲載されており、IE11, Edge42をはじめとする各ブラウザの対応状況も掲載されています。 リファレンス本の大切なポイントの一つが、使いやすいこと。 HTML5とCSS3の完全版だとそれなりに分厚いのが想像できると思います。本書は512ページとけっこうな分厚さなのですが、どのページでも見開きが簡単にできます。手で押さえておく必要はありません。 四六判なので、キーボードの横に置いても邪魔にならないでしょう。
CSSでかわいいチェック柄 - Qiita
画像を使わず、CSSだけでかわいいチェック柄を作りました。 オタクだからチェック柄が大好きなんだよな 1. ガンクラブチェック .container1 { padding: 150px 15px; background-color: white; background-image: repeating-linear-gradient( 30deg, rgba(255, 250, 250, 0.50), rgba(255, 250, 250, 0.50) 20px, rgba(84, 74, 71, 0.50) 20px, rgba(84, 74, 71, 0.50) 40px, rgba(255, 250, 250, 0.50) 40px, rgba(255, 250, 250, 0.50) 60px, rgba(255, 236, 71, 0.50) 60px, rgba(255, 23
[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説
ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。 今までは非常に長いCSSが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filter CSS property 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アップデート 2020/6/8: サポートブラウザを現在の状況に変更しました。 「backdrop-filter」だと、一行のコードで実装できる ガラス効果のさまざまなスタイル backdrop-filterののサポートブラウザ 「backdrop-filter」だと、一行のコードで実装できる 私はbackdrop-filterとい
![[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7ef7a471fc9cc3dadd100b1fcf89855ae665c80/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018060803-01.jpg)
flexboxで横並べ＋折り返しによる余り要素について考えてみる - Qiita
下記のように、2つを横に並べて、3つ目は折り返して…のようなものがあったとします。 これが、もしも奇数だった場合は、どうするべきでしょうか。 一覧の実装の最後のページなど、個数が不確定の場合に起こる問題です。 そして、いくつかパターンが考えられると思います。 今回は、このいろいろなパターンをどのように実装すればいいか、ということをまとめてみました。 HTMLの構造については、常に下記のものを使用します。 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul>
CSSのcalc()関数の使い方のまとめ -レイアウト・要素の配置・フォントサイズの定義など
calc()関数を使用すると、レスポンシブ対応ページのレイアウトや要素の配置、ビューポート幅に基づいた相対的なフォントサイズの定義などが期待通りに実装できます。 Webページやスマホアプリの実装に役立つcalc()関数の使い方を紹介します。 calc()関数はOpera Miniを除くすべてのメジャーブラウザ（IEを含む）にサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 Calc() function with Use Cases 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 calc()関数とは calc()関数を使おう calc()関数の使い方: 相対的な固定要素の配置 calc()関数の使い方: 天地左右の中央に配置 calc()関数の使い方: ビューポート幅に基づいた相対的なフォントサイズ ca
Web Animations APIを使った波紋アニメーション(ripple effect) - Qiita
CSSアニメーションを調べていたらWeb Animations APIというJavaScriptで同じことができることがわかったので、勉強も兼ねて簡単なライブラリを作ってみました。この記事はその時得た知識のまとめです。 Web Animations APIについて CSSのAnimationsとTransitionsをJavaScriptで実現できるAPIです。 現在は、ChromeとFirefoxで実装が進められています。 Safari(WebKit)とEdgeについてはTodoには入ってますが、まだ実装されていません。 web-animations-jsというpolyfillがあるので、そちらを使うとSafariやEdgeでも使えます。 成果物 今回作成したライブラリはパルス（波紋）のアニメーションです。 CSSアニメーションでも簡単に実装できます。これをJavaScriptでやります
CSS3 animationで絵文字をよりエモくする方法 - Qiita
この記事は NIFTY Advent Calendar 2017 の4日目の記事です。 3日目は @nyangu さんの Elasticsearch6.0のRolling upgradesを試してみる でした。 以下、箸休めの気分でお読みください。 はじめに 語彙力がない Twitterで「とても良い、尊い」といった表現をするときに「天に召される絵文字」と「合掌している絵文字」と「きらきらした絵文字」とを連打しがちになる。 あまりにも表現がワンパターンなので、少し表現力をつけようと思ってブログを書いてみても、どうしても絵文字を連打したくなってしまう。感情の奔流を書き表す語彙力がない。 言葉による表現を豊かにできることが一番だとは思うが、今回は絵文字を連打しがちな私にもできる方法で表現の幅を増やしてみたいと思う。 絵文字を導入する サイトにTwitterの絵文字を導入する Twitter以外
Solved by Flexbox — クリーンでハックのない CSS
イントロダクションCSSには長らく適切なレイアウトメカニズムが不足していました。トランジション、アニメーション、フィルタ、これらはすべて素晴らしくて有用な言語への追加機能ですが、しかしWeb開発者が不満だった、永遠に続くようにも思われた主要な問題に対処するものではありませんでした。 Flexboxに感謝します。ついに我々は解決方法を手に入れました。 このサイトはCSSフレームワークではありません。その代わり、CSSだけでは解決するのが難しい、あるいは不可能だった問題が、今やFlexboxでとても簡単になった事例のショーケースとなることが、このサイトの趣旨です。また、Internet Explorer 11の最近のリリースとSafari 6.1により、今やすべてのモダンブラウザがFlexboxの最新仕様に対応しています。 以下のデモをご覧ください。Webインスペクタでスタイルを眺めるか、また
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
かゆいところに手が届く！Flexboxを使った便利な小技
2017年9月14日 CSS 要素を横並びにする時に便利なFlexbox（フレックスボックス）。みなさん、使いこなせていますか？今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します！ ↑私が10年以上利用している会計ソフト！ 画像とテキストを互い違いに表示 See the Pen Flexbox – row-reverse tip by Mana (@manabox) on CodePen. まずは画像とテキストが入るボックスを作成。それらを囲む .box という div を用意しました。 HTML <div class="box"> <img src="images/iphone1.jpg" alt=""> <div class="box-text"> <h2>見出しが入ります</h2> <p>テキストが入ります</p> </div> </div>
マルチカラムレイアウトとは？columnプロパティについて - Qiita
先日CSS3を改めて勉強していて、「え、知らない！」というプロパティがあったので、 ちゃんと理解するという意味でまとめてみようとおもいます。 CSS3といえばbackground系のプロパティやアニメーション…shadow…角丸…などなどありますが、 その中にレイアウトに関する仕様もありました。 それが、マルチカラムレイアウトです。 マルチカラムレイアウトと言ってもピンとこないかもしれません。 具体的にはこんな感じのレイアウトです。 このような、横並びでテキストを流し込むレイアウトを組むとき、divまたはpなどを2つ用意して、floatなどで組んでいたかと思います。 それを分けること無く、ひとつのボックスで複数の段組みを作るレイアウトをマルチカラムレイアウトと言います。 例として上の画像をあげましたが、上の場合だとこのようなソースで実装しています。 <div class="containe
CSSプロフェッショナルのためのTIPS - Qiita
CSS ProtipsというTIPS集があって、これ一応日本語訳が既にあるんだけど、露骨に機械翻訳で何言ってるのか全くわからないので全編日本語訳した。 あれ、あんまり変わってない気がしてきたぞ。 CSSの便利な小技・テクニックのまとめ Awesome CSSのプロフェッショナルになりたい人のためのTips集を紹介するよ。 CSS以外のAwesomeリストを探したいときは@sindresorhusをフォローしよう。 目次 テクニック サポート 翻訳 手伝いたい テクニック CSSリセット 異なるブラウザ間でスタイルの一貫性を保つには、CSSリセットが役に立つぞ。 NormalizeのようなCSSリセットのライブラリを使用するか、もっと簡単には以下のように書ける。
2017年、CSSでこれをやりたかったが実現できる新しい3つのテクニック
CSSには数多くの新しい機能が準備されています。その中でも2017年の今年に学んで、身につけておきたい3つのテクニックを紹介します。 3つはすべて有用で、Webサイトやアプリを作成する際に必ず役立つと思います。 3 New CSS Features to Learn in 2017 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 @supportsを使った条件付きCSS Float, Flexboxの後継者「CSS Grid Layout」 プロパティを変数で指定 すべてのブラウザにサポートされていない場合 @supportsを使った条件付きCSS @supportsを使用したCSS Feature Queries（W3C）は、特定のCSSのスタイルを指定したユーザーエージェントに対してのみ適用することができる条件付きのCSSを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frontend Weekly Vol.215 - Frontend Weekly
たった3行で実現できるCSSの上下中央揃え（Flexbox） - Qiita
GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.
CSS だけで画像の切り抜きをうまくやる - Qiita