[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる
CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅（vw）に対して自動で変化させるスタイルシートの記述を生成するオンラインツールを紹介します。 例えば、768px以下はすべて1rem、1920px以上は2rem、その間はvwに対して変化する、という指定が簡単にできます。 Responsive font calculator ツールの使い方は、簡単です。 Units フォントのサイズ指定に使う単位を「px, rem, em」から選択。 Selector 「font-size」を適用するセレクタを記述（id, class など)。 Font-size フォントが拡大縮小する範囲を指定。 Viewport width フォントのサイズに対応するビューポート幅を指定。 Options コメントの有無、サイズの最大値を超えないように指定 スタイルシートは
![[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる](https://cdn-ak-scissors.b.st-hatena.com/image/square/1cd72c10cbf289cd889d716004dc41c5e78c5fab/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017031001.png)
font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する - Qiita
スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき
[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要
レスポンシブ用のMedia Queriesを使う時に「@media (min-width: 400px) {}」のように「px」を単位に使用している人も多いと思います。しかし、px指定には注意が必要です。 Webページでよく使用される条件で検証を行い、Media Queriesでなぜpxを使ってはいけないのか、そして何が適しているのかが分かる検証記事を紹介します。 PX, EM or REM Media Queries? 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 はじめに pxとemとremの検証方法 検証1. html要素でfont-sizeを指定 検証2. ブラウザでズームが可能 検証3. ブラウザでフォント設定が変更可能 検証の結果 はじめに あなたはMedia Queriesで使う単位にpx, em, remのどれが一番
![[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebb660a3174b5d3836e1ab0370b94c0ac1d1e64a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016032901.png)
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
Hamburgers
Table of Contents Usage Sass Customization Accessibility Browser Support Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Download and include the CSS in the <head> of your site: <link href="dist/hamburgers.css" rel="stylesheet"> Add the base hamburger markup: <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></spa
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10 - NxWorld
画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis
[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル
レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 デモページ HTML HTMLの基本構造です。 <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery</a></li> <li><a href="#0">Web</a></li> <li class="current"><em>Project</em></li> </ol> </nav> nav要素で実装し、各アイテムはol要素に「.cd-breadcrumb」で基本のスタイルを適用します。 基本のスタイル 基本のスタイルでは各アイテムを並らべるために「display: inline-block;
![[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/dba8baab2483c01e8847e7d49e2ec8f98db95ffb/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072501.png)
単なるCSSリセットではなく、レスポンシブ対応のWeb制作を見据えたテクニックがいろいろ盛りこまれたスタイルシート -Marx
CSSリセットと呼ぶべきか、もしくはフレームワークと呼ぶべきか、非常に迷うのですが、そのどちらにも利用できるスタイルシート「Marx」を紹介します。 単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれており、コードを一行ずつ勉強したいですね。 Marx Marx -GitHub Marxの特徴 Marxのデモ Marxの中身 Marxの特徴 JavaScriptやclass付けを使用しないraw CSS すべてのブラウザに一貫したレンダリングを提供 クリーンなタイポグラフィ ナビゲーションやボタン、フォームなど、カスタマイズ可能 レスポンシブ対応 シンプルでミニマルなデザイン ファイルサイズは、7.7kb CSSリセットとしてはスタイルが少し多く、ページ作成のフレームワークとしては足りない感じです。 Marxのデモ デモペー
reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。 「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。 sanitize.css sanitize.css -GitHub sanitize.cssとは sanitize.cssの対応ブラウザ sanitize.cssのスタイル sanitize.cssの注目すべきスタイル sanitize.cssの適用 sanitize.cssとは sanitize.cssはHTMLのあらゆる要素を各ブラウザでの差異をなくし、整合性をもたせてレンダリングさせるスタイルシートで、ライセンスはCC 0で利用できます。 有用なデフォルトはそのまま 多
Flexboxの勉強にも実務にも役立つ！レスポンシブ対応の柔軟なグリッドが簡単に実装できる -Flexbox Grid
企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できるスタイルシートを紹介します。 Flaxboxを勉強したい初心者から、簡単に使いたいと考えてるベテランまで、勉強にも実装にも役立つ便利なスタイルシートです。 Flexbox Grid Flexbox Grid -GitHub Flexboxの各プロパティの解説は、下記ページをご覧ください。 最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Flexbox Gridで実装された柔軟なグリッド Flexbox Gridの使い方 Flexbox Gridで実装された柔軟なグリッド Webデザインで使うさまざまなグリッドをclassをちょちょいと加えるだけで実装できます。
[CSS]classの命名など気になるテクニックがいろいろ取り入れられているレスポンシブ対応のフレームワーク -Skyline
大規模サイトから個人のポートフォリオやブログまで、さまざまなデザインをサポートするための汎用性に優れたアーキテクチャで設計されたCSSのフレームワーク「Skyline」を紹介します。 Skyline Skyline -GitHub Skylineでは気になるCSSのテクニックがたくさん使われています。 classの命名にはBEM、リセットにはnormalize.css、印刷にはHTML5 Boilerplate、コンポーネントのアイデアはBootstrap、そしてSCSSで書かれたオブジェクト指向のCSSです。 「BEM」とは、ブロック（Block）、エレメント（Element）、モディファイア（Modifier）の頭文字をとったもので、各要素を3つのどれかに必ず属するものとして考えます。 例えば、ページにはヘッダ・コンテンツ・フッタのブロックがあり、ヘッダブロックにはロゴ・メニュー・検索
![[CSS]classの命名など気になるテクニックがいろいろ取り入れられているレスポンシブ対応のフレームワーク -Skyline](https://cdn-ak-scissors.b.st-hatena.com/image/square/37463756dccf14512c52c834de3cac5e31271455/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011901.gif)
グリッドからナビゲーション、スライダー、フォームなど、レスポンシブ対応のさまざまなコンポーネントが利用できるフレームワーク -Responsive Framework
グリッドからナビゲーション、スライダー、フォームなど、レスポンシブ対応のさまざまなコンポーネントが利用できるフレームワーク -Responsive Framework
[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。 デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種
![[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5d222ae06cf2d58d2b7bc17660d161a7352606d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102201-01.png)
[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider
デモページ：Standard 操作は左右のナビゲーション、矢印キーを使ったキーボード操作にも対応しています。 外観はCSSのテーマファイルで変更することができ、アニメーションの変更、ビュレットのナビゲーション、サムネイルのナビゲーション、フルスクリーンスライダー、video/audioもサポートしています。 デモページ：Using API デモページ：Using Events デモページ：Multiple Sliders ダウンロードファイルに含まれているデモは、Retina用の画像も用意されています。 デモを幅480pxで表示 Ideal Image Sliderの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートを外部ファイルとして記述します。 「default.css」はスライダーの外観を定義したデフォルトのテーマです。 <head> ... <link rel="s
![[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/c553218678c826bd3f32579ee04c4e31354c3815/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091003.png)
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
[CSS]レスポンシブ対応、スクリプト無し、完成度も非常に高いタブコンテンツを実装するテクニック
スクリプトは一切使用せず、デスクトップ時はタブコンテンツ、スマフォ・タブレット時はタブをスケールダウンに変更してコンテンツを表示するスタイルシートのテクニックを紹介します。 単にレスポンシブ対応のタブというだけでなく、コンテンツの切替やタブのホバーエフェクトなど、非常に完成度の高いタブコンテンツに仕上がっています。 スケールダウンの仕組み 実装はこんな感じになります。 HTML まずは上部のコントローラー、このラジオボタンで各タブの動きを制御します。 デザインを変更して利用したり、タブのみにしたい場合は非表示にするのも有りですね。 <!-- TAB CONTROLLERS --> <input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked> <input id="panel-2-c
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS![[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/17cdfacd1e45aee2b86d8c20988b611f663292c4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061001.png)
Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ
iOS, Androidのさまざまなスマホ・タブレットのサイズやCSSでの値が一覧できるサイト -mydevice.io
