CSSには便利な単位がたくさんあります。よく使用する単位として絶対単位（pxなど）や相対単位（em, rem, %など）をはじめ、Gridの単位（fr）やビューポート単位（vw, vhなど）があります。いくつかの単位は使う場所が限られていますが、複数もしくはどこにでも使用できる単位もたくさんあります。 Webサイトやスマホアプリでフォントのサイズ、スペース、ポジション、FlexboxとGrid、要素の幅または高さに使用する場合、どのようにCSSの単位を選べばよいのかを紹介します。 What CSS length unit should you use? 以下は、そのフローの解説です。 フローの入り口は、下記のように分かれています。 ポジショニング、ディテール・エフェクトに適したCSSの単位 スペースに適したCSSの単位 フォントサイズに適したCSSの単位 FlexboxとGridに適したC

font-size-rem.md font-size には rem を使うべきかどうかについての見解 結論 可能であれば Chrome の文字拡大機能をサポートするためにremを使用する。 ただし、実際に Chrome の文字拡大機能を「極大」にして検証することが必須条件。これに時間的・労働的なコストを割けないのならpxを使用したほうがいい。 結論に至った背景 「font-size には rem を使いましょう」という教えが独り歩きしており、実際に Chrome の文字拡大機能を「極大」にして検証していない人が多いため。 font-size だけ rem を指定すればいいという訳ではなく、文字拡大に伴ったレイアウトの変更に耐えうる設計とする必要がある。つまり、font-size だけでなく文字の拡大に依存する余白やサイズなどもフォントサイズを基準とした相対値（remやemなど）で指定する必

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents;

概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは２次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数

スマートフォンサイトでよく使われるメニューに三本線で表示されている「ハンバーガーメニュー」が挙げられます。 ハンバーガーメニューを実装するのはCSSとJavaScript、もしくはjQueryを使用することが多いですが、今回はもっと手軽にCSSのみで実装する方法を紹介いたします。 まずハンバーガーメニューとはスマートフォンサイトなどで用いられるメニューです。 三本線のアイコンがハンバーガーに見えるためそう名付けられました。この三本線のボタンをタップするとメニューが展開し、もう一度タップするとメニューが収納されます。 ハンバーガーメニューについては弊社ブログの過去記事「ハンバーガーメニューのメリット・デメリット」に詳しくまとめてありますのでご覧ください。 コーディングで実装する際は、この三本線のボタンとメニューの二つの要素を記述します。 ボタンが一度タップされているかどうかを判断し、一度タッ

高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。 ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装 その1 2. ネガティブマージンを使ってフッタを最下部に実装 その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装 その1

続編を書きました。CSSも大幅改善してるので、一度見てみてください。 【小数点実装】「(HTML +) CSS」のみを使って、今「もっとリアルな電卓」を作ってみた - Qiita 完成品 まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめに はじめて、CSS カウンター の存在をはじめて知ったときは驚きました。 テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がない と思っていたからです。 Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - Qiita CSSで見出しタグに連番をつけ

Webエンジニアとデザイナーのための CSS Flexbox チートシート

マーケティングトレースを行った次の日は、CSSの初歩的でもないお話です。 CSSのBackground-imageを透過させたい、というのは、Webページ作ってりゃ誰しも思うことです。 img要素やdiv要素であればopacityを設計すればおわりです。 しかしこれがbackground-imageを使うときは、若干話が変わってきます。 というのも、background-imageにはOpacityが適用されません。 まあ、当然と言えば当然です。background-imageは要素じゃないもん。 透過したいからと言って「opacity」でググっても、img要素やdiv要素を投下させる方法ばっか。そりゃそうですよ。background-imageにはopacityが効かないのですから。 サルワカくんもdivとimgのopacityしか説明してくれません。 解決方法があるにはあるのですが、透

Based on my tests, inputmode is indeed supported in Opera Mini and Opera Mobile, which contradicts the Caniuse data above. I’ve reached out to see if we can sync up our findings. But before we go deep into the ins and outs of the attribute, consider that the WHATWG living standard provides inputmode documentation while the W3C 5.2 spec no longer lists it in its contents, which suggests they consid

ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptのテクニックを紹介します。 Prevent Page Scrolling When a Modal is Open 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 簡単なことから始めましょう スマホの場合 この問題を解決するにはJavaScriptが必要 JavaScriptで問題を解決する はじめに モーダルを開いて、スクロールして、モーダルを閉じます。すると、そのページはモーダルを開いた時とは別の場所にスクロール

デザインは奥が深いですね。 Webサイトでよく見かけるUI要素のデザインに一手間加えるだけでぐっとよくなる、ディテールにこだわった素晴らしいデザインのアイデアをTailwindCSSで実装するテクニックを紹介します。

CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない！」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ

CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }

このようにtableを横スクロールさせるには、HTMLとCSSを編集すればOKです。 1、HTMLの編集 まずは、tableを「divタグ」で囲みます。ここでは、そのdivタグに”scroll”というclass名を付けました。 <div class="scroll"> <table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <th>商品名</th> <td colspan="5">インターネット回線</td> </tr> <tr> <th>初期費用</th> <td colspan="5">事務手数料3000円 ＋ 標準工事費0円</td> </tr> <tr> <th>プラン</th> <td>30Mコース</td> <td>50Mコース</td> <td>100Mコース</td> <td>200Mコース</td>

こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html <table class="table01"> <thead> <tr> <th></th> <th>ヘッダー1</th> <th>ヘッダー2</th> <th>ヘッダー3</th> </tr> </thead> <tbody> <tr> <th>項目1</th> <td label="ヘッダー1"><p>項目1の内容<br /> これで長くなった時に対応できます。</p></td> <td label="ヘッダー2"><p>項目1の内容</