例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です。 こういったレイアウトをセマンティックなHTMLで実装できるようになるdisplay: contents;の基礎知識と使い方を紹介します。 How display: contents; Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 【更新】 2021/9/4: 現在の環境に合わせて、内容をアップデートしました。 まずはおさらい、CSSのボックス モデル 「display: contents;」を使用すると、どうなるか 「display: contents;」について詳しく解説 「display:

エラーの発見や回避、フォーマットの一貫性、重複の回避。チームでCSSを書くときにの生産性とメンテナンス性をあげたいときに便利なツールが「Stylelint」です。特徴と導入方法を解説します。 フロントエンド開発はすでに円熟期に入っており、コード品質管理ツールの使用も増えてきました。このことがよく表れているのは、JavaScriptのエコシステムです。JavaScriptにおけるLintツールは、フロントエンド開発者がコードの正しい構成と一貫性を保証するために使われます。ツールに関する最近の調査では、開発者の大多数がJavaScriptでLintツールを使っていると答えました。 CSSコーディングでは、コード品質管理ツールの使用に向けた動きはいくぶん緩やかで、同様の調査では開発者の大半がワークフローでCSSのLintツールを使っていないと答えました。 この記事では、スタイルシートにおけるli

Photoshopのデザインからコーディングをするとき、CSSについては今までエクステンションのCSS3Psというのを使っていたのですが、 最近動かなくなったようなので代替をさがしたお話です。 今まで使っていたCSS3Ps レイヤーを選択して、エクステンションのCSS3Psのウィンドウを押すだけで、CSSを吐き出してくれていたのですがサイトが無くなったのか表示されなくなりました。 CSS3Ps いつもこれでCSSをコピーしていたので困りました。 既存の機能であったCSSをコピー それで他にCSSを吐き出してくれるエクステンションはないかと調べたのですが、既存の機能でありました。 Windows：レイヤーを右クリック→CSSをコピー 知らなかった！ コピーすると以下のようにペーストできるようになります。 .角丸長方形_1 { border-radius: 5px; background-co

Webページやスマホアプリをはじめ、レスポンシブ対応ページなどで役立つ、CSSのあまり知られていない仕様や少し高度な使い方を紹介します。 Lesser known CSS quirks & advanced tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 垂直方向のpaddingは要素の幅に対して相対的 02. マージンの相殺が適用されない条件 03. 不透明度でz-indexの積み重ね順序を変更できる 04. CSSのカスタムプロパティ（変数） 05. vertical-align: top | middle | bottom 06.「height: 100%;」の挙動 07. idとclassの詳細度 08. 属性のターゲティング 09. 複数の値を指定する場合、垂直、水平の順番になるとは限らない 10.

テキストとアイコンを横並びさせたボタン、カテゴリのテキストを配置したラベル、ラベルが長いフォームなど、これらのテキストが長いとレイアウトが崩れてしまうことがあります。 レイアウトが崩れてしまう予期せぬコンテンツに対応するためのスタイルシートのテクニックを紹介します。 Handling Long and Unexpected Content in CSS イラスト: Girls Design Materials 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 左右どちらかにアイコンが配置されたボタン 02. ラベルに重なってしまうフォームのボタン 03. テキストが長くてスペースに収まらない場合 04. リンクが長くてはみ出してしまう場合 05. タグのテキストが長くてはみ出してしまう場合 06. 両端揃えのテキストが長い

CSS Gridは便利なレイアウト手法ですが、IE 11にも対応する場合はベンダープレフィックスの付与や古い記法への対応が必要です。ベンダープレフィックスの付与や古い記法への対応を自動で行うのがAutoprefixerなのですが、2017年から2018年にかけてIE 11向けのGrid対応が大きく向上したことをご存知でしょうか？ 最近のAutoprefixerを使えば、次のようなメリットがあります。 IE 11向けに手動で書いていた-ms-grid-column-span、-ms-grid-row-spanを手動で書かなくてよい IE 11で非対応のgrid-template-areas、grid-areaを変換可能 gap（旧名grid-gap）をIE 11向けに書き出し可能 repeat()をIE 11向けの旧仕様で出力可能 ▲ AutoprefixerによるCSS GridのIE 1

凄く今更な話だけれども、数年くらいWEB制作から離れていると見落としがちな常識の転換。 旧世代CSS：要素の幅・高さはあらかじめ余白と境界を引いた値にしよう CSSで要素に対して幅や高さを指定する際に、要素の周囲を囲むborderの太さならびに境界内部の余白paddingの値は、あらかじめ目星をつけておかないといけない。というのも、widthやheightといったプロパティで指定された値に、borderとpaddingそれぞれの幅を加えたものが要素が親要素内で占有する大きさとなるからである。 旧padding,border計算方法 上図の例で言うと、要素に対してwidthとheightで指定された幅200px高さ150pxという値は、余白paddingや境界線borderの幅がいくら変わっても保証される。その代わり要素自体の大きさは指定幅に加算されていくので、たとえば親要素の幅が400px

Web制作を自分で行い始めたとき、たとえば、h1、a、ul、liなどが、ブラウザごとの見え方が少しずつ違っていることに気づくと思います。 リセットcss（reset css）は、その違いをあらかじめリセットして、CSS制作を効率的にすることが目的です。 自分で設定するのもよいですが、「このタグはこういう設定にリセットしたらよいよ」っていう雛形を作っている人たちがいらっしゃいます。 そこで、人気のリセットCSSをご紹介します。 リセットcssのメリットとデメリット メリット ブラウザごとの表示の違いを、最小限に抑えることができる ブラウザごとの差異を気にせず、自分がスタイルしたい必要な部分だけスタイルすれば良い デメリット CSSの分量が多くなる リセットしっぱなしで、スタイルを当てていない要素がダサくなる といった感じでしょうか。まぁ、CSSの分量が多いといってもたかが知れているとは思いま

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch

フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。 ではサンプル１からコードを紹介していきます。 サンプル１ 二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 HTML では、HTMLから。 <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">はい</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">いいえ</label> </div> 特に問題

Form系要素スタイルの初期化 ブラウザのForm系要素の初期スタイルをはがすときには、appearance: noneをあてつつ、backgroundやborderなどのリセットをする。 select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; margin: 0; padding: 0; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; } しかし<select>だと、WebKit系のを除けば、-moz-apperanceとしているFirefoxでさえも、選択

毎回やり方を忘れてしまうので自分用のメモです。 ※スマホ用でやってるので、IEなどのブラウザでは確認してません スマホで、よく「テキストの前後にアイコンを置いて～」ていう、ボタンを作ることがあると思います。 ただ、アイコンとテキストの並びをベースラインで合わせてしまうらしく、バランス悪いことになってしまいます。 <p class="map"><a href="#">地図を表示する</a></p> p.map { background:#555; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } p.map a { display:block; padding:13px 10px; color:#FFF; font-size:12px; line-height:1.4; text-align:

2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

CSS Reference is free and always will be! Please whitelist us in your ad blocker. Thank you! A free visual guide to CSS Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

Webサイトのデザインもコーディングもやるべきタスクがどんどん増えてきました。それらの手間がかかる面倒な事は、楽にできるツールやサービスを利用することで効率化がはかれます。 CSSの制作、確認、検証に役立つ便利なオンラインツールやサービスを紹介します。

CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ

ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな

HTMLの各要素のブラウザごとに異なる差異をなくすために、ブラウザのスタイルを初期化するリセットCSS、初期化ではなくノーマライズ（正常化）するノーマライズCSS。 定番のスタイルシートから、最近リリースされたものまで、リセットCSSとノーマライズCSSを紹介します。 イラスト: Girls Design Materials 定番も最近のWeb制作にあうようバージョンアップされており、Web制作者は要チェックです！ 下2つは通常のリセットとは異なるアプローチのスタイルシートです。 ress Normalize.css sanitize.css Marx Reset CSS minireset.css css-wipe Cleanslate Unreset CSS ress -GitHub normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、ブラウザごとに異なるH