TEST CORDING » Sass:共通のプロパティをまとめる様々な方法をCSSと比較してみた

2012/10/17 3087 users Sass Orange color プロパティ CSS

今回のエントリーでは、 Sass による共通のプロパティや設定をどうまとめるかについて書いてみます。結局どうやって書くのが安定しているのか？ ということを試行錯誤する際に参考にしてみてください。 CSS 元となるCSSソース div.container h1 { color: orange; font-size: 20px; } div.container ul { font-size: 20px... 続きを読む

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference | HTML5Experts.jp

2015/03/09 696 users CSS HTML5Experts.jp

連載： Frontrend Conference 特集 (4)この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきまし... 続きを読む

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference | HTML5Experts.jp

2015/03/05 696 users CSS HTML5Experts.jp

連載： Frontrend Conference 特集 (5)この記事は、「Frontrend Conference The Final」のセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1の... 続きを読む

CSSを書く際の5つのテクニック:phpspot開発日誌

2006/09/11 423 users CSS phpspot開発日誌 line-height ヤツ

CSS tips and tricks at The Blog Herald CSSを書く際の5つのテクニック。 1. サイズ指定の際はピクセルを使うな。 body { font-size: 62.5% } p { font-size: 1.2em; line-height: 1.5em; } px指定してしまうとブラウザの文字サイズに反応しなくなってしまうというやつですね。 2. 階層構造はイン... 続きを読む

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

2022/06/07 387 users rem height width マージン アクセシビリティ

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility ... 続きを読む

[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法 | コリス

2011/02/02 322 users コリス border-radius text-shadow

ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。ホバー時のキャプチャ実装のポイントスケラｰビリティ文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小アジャスタビリティpadding, font-sizeを変更することでサイズ調整可能フレキシビリティあらゆるHTML要... 続きを読む

JSONP WebAPIを爆速で使いこなせるフレームワーク - Yahoo! JAPAN Tech Blog

2012/08/10 283 users フレームワーク 爆速 Yahoo デベロッパーネットワーク

pre { font-size: 14px; font-family: monospace; } Yahoo!デベロッパーネットワークの中野(@Hiraku)と申します。 「WebAPIの魅力を存分に宣伝せよ」という使命を受けまして、これから何度かTechblogを書くことになります。以後、お見知りおきを。 さて、Yahoo! JAPANが公開しているWeb APIはたくさんありますが、JSON ... 続きを読む

CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor

2022/01/31 225 users フォントサイズ CSS CLAMP レスポンシブ対応 登場

Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォント... 続きを読む

レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス

2019/03/10 218 users padding ブレークポイント margin Sass 一元

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSass...記事の続きを読む 続きを読む

【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう

2017/05/08 189 users vmin Photoshoptips CSS ギャ 見出し

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 about contact スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの 大きな文字 を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャ... 続きを読む

[CSS]日本語と英語で異なる最適なフォントサイズの指定方法 | コリス

2007/04/10 176 users line-height コリス フォントサイズ CSS 英語

日本語・英語のサイト制作に使用しているCSSのフォントサイズの指定で、2007年用デフォルトとしているものです。 %指定を採用している理由の１つは、font-size、line-heightとともに組み合わせにより微妙に異なり、その組み合わせの最適な値を採用するためです。 日本語サイトのフォントサイズの指定 英語サイトのフォントサイズの指定 line-heightの指定 日本語サイトのフォントサイ... 続きを読む

ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた) : Web Design KOJIKA17

2011/03/09 174 users チートシート normal ブラウザ font-weight

ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた)March 9 2011 この記事は約2分で読めます。CSSリセットを改変している時に、「CSSリセットは本当に必要か？」ということを疑問に思うようになってきました。 例を挙げるとh1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}h1.title {font-weight:b... 続きを読む

CSSの数学関数min()、max()、clamp()の基本的な使い方

2021/11/04 162 users CLAMP Calc ＭＡＸ min CSS

IEをサポートから外すと、CSSの便利な新しいプロパティが使用できます。その中の1つ、いや3つがmin(), max(), clamp()です。 数学関数といえばcalc()が便利ですが、さらに便利なのがこの3つです。要素の幅指定、padding値の管理、font-sizeの定義など、レスポンシブ対応で大活躍します。min(), max(), clamp()の基本的な... 続きを読む

CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator

2022/05/31 158 users CLAMP CSS 関数 メディアクエリ スクリーン

Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、と... 続きを読む

熟女のアプリ作ってアップルと闘った話 - Gloomy blog

2013/03/29 142 users アップル Gloomy blog 熟女 アプリ target

つい先日おっぱいのアプリ「乳師」を無事売却したことを<a href="http://gloomy.sakura.ne.jp/gloomyblog/2013/03/post-17.html" "="" style="font-size: 13px;" target="_blank">このブログでお伝えしたばかりの中、このようなタイトルの記事を更新するのは誠に不本意なのですが、再度アップルと争うことに... 続きを読む

setTimeout() vs ハッカー、仁義なき戦い - 株式会社CFlatの明後日スタイルのブログ

2014/08/17 112 users counter setTimeout head 仁義 HTML

2014-08-18 setTimeout() vs ハッカー、仁義なき戦い JavaScript 早速ですが、以下のHTMLを見て下さい……。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>サンプル1</title> <style> #counter { font-size: 3em; font-family: monos... 続きを読む

[CSS]読みやすさのポイントは縦のリズム、見出しのレベルがひと目で分かるようにスタイルするチュートリアル | コリス

2012/11/05 103 users コリス padding margin ひと目 チュートリアル

読みやすいウェブページの大切なポイントの一つは、縦のリズムです。ウェブにおける縦のリズムはfont-size, line-height, margin(padding)の3つの要因からなっています。 この3つの要因とデザインを組み合わせ、見出しのレベルがひと目で分かるようにデザインされた見出しを実装するスタイルシートのチュートリアルを紹介します。 Heading Set Styling with ... 続きを読む

見出しやパラグラフのフォントサイズや行間をemベースで簡単に設計できるオンラインツール -Em Baseline Generator | コリス

2013/04/11 92 users パラグラフ コリス フォントサイズ 行間 プレビュー

emベースで見出し、パラグラフ、リストなどのfont-size, line-heightなどを設計できるオンラインツールを紹介します。 Em Baseline Generator 使い方は簡単です。 ベースとなるfont-sizeとline-heightを設定します。 font-sizeとline-heightを設定 設定した値は、すぐに右のプレビューに反映されます。 見出し、パラグラフ、リストな... 続きを読む

CSS3からの新しい単位「rem」をIE8でも利用できるようにするスクリプト -REM unit polyfill | コリス

2014/04/10 89 users rem コリス スクリプト フォント 単位

当ブログで紹介した「フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック」でこれからのfont-sizeの単位に「rem」を使う方法など、CSS3の新しい単位「rem」は非常に魅力的ですが一つ問題があります。 それは「rem」はIE8をサポートしていないこと。 ここで紹介するのは、その問題を解決するIE8でも「rem」を使えるようにするスクリプトです。使い方はスクリプトを外部フ... 続きを読む

[CSS]もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ | コリス

2018/05/16 72 users コリス border button要素 CSS デフォルト

フォームをスタイルするのが苦手、という人は少なくないと思います。 中でも、button要素はお問い合わせのようなフォームに限らず、さまざまなページに使用される使用頻度が高い要素です。 button要素はfont-sizeを適用するだけで見た目が大きく変わり、「border: 0;」を適用するとブラウザごとに異なる見た目になります。 そんなbutton要素のデフォルトのスタイルを美しくするために、b... 続きを読む

iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker

2011/03/30 64 users iOS padding iPhone Safari 隙間

結構前に書いたの公開してなかった。iOSのSafariでなぜか特定のfont-size（11px、10px、9px）のときだけマルチバイトの幅計算がおかしいのか、折り返し位置がずれるという件。DemoこれをiPhoneで見るとこんな感じになる。こんな感じ。11px、10px、9pxのときに右側に隙間が空いてるがわかると思います。これは特にpaddingとかとってるわけではなくて、このfont-si... 続きを読む

続・iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker

2011/06/03 33 users iOS Demo iPhone Safari span要素

前書いたiOSのSafariで幅計算がおかしくなる件、もうちょい調査してみた。 どうもfont-sizeが11px、10px、9pxのときにマルチバイト一文字につき、offsetWidthの値がそれぞれ1pxづつ大きい値になるというバグっぽい。 「あ」の文字のspan要素のoffsetWidthをJSで取得するデモ。 Demo これiPhoneで見るとこうなる。 なんかIEでもfont-sizeが... 続きを読む

[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート | コリス

2018/07/20 29 users rem コリス return line-height CSS

// Function for converting a px based font-size to rem. @function calculateRem($size) { $remSize: $size / 16px; //Default font size on html element is 100%, equivalent to 16px; @return #{$remSize}rem; } @function calculateNum($lheight) { $numSize: $lheight; //Default font size on html element is ... 続きを読む

Gmail で本文表示を等幅表示にする

2005/03/18 26 users Gmail Bugzilla Monospace take

take さんのコメントによると、Gmail の本文を等幅フォントで表示するには UserContent.css に div.mb { font-family: monospace; } div.mb { font-size: 100% !important; } と書いておけばよいそうです。font-size の方は文字を大きくするためのおまけです。これで Bugzilla のメールなどが見やす... 続きを読む

女が教える「結婚すると後悔する女」 これはためになる モテたがり症候群　モテる方法教えます

2012/10/23 24 users 症候群 large strong span 方法

<a href="http://netaatoz.jp/archives/7222420.html target="_blank" title="<strong><span style="font-size:large;">女が教える「結婚すると後悔する女」 これはためになる </span></strong>">女が教える「結婚すると後悔する女」 これはためになる(ねたAtoZ) 付き合っていると... 続きを読む