CSS Font Stack - The long awaited CSS font stack resource.
What are Web Safe Fonts? Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.
スマホ用サイトに便利！ リンクを表す矢印をCSSだけで作る方法
去年地元のイベントのホームページを作ったのですが、Google Analyticsで調べてみると、スマホからのアクセスが全体の3/4もありました。 スマホでも問題なく見れたのですが、小さくて見にくいので、スマホで見た場合に1カラムになるなど若干スマホに対応しました。 その際にリンクであることを表す矢印をCSSだけで作りました。スマホはマウスを乗せるという行為がないので、リンクであるということがすぐに分かるようにするのは大切ですね。 Webフォントでもいいのですが、矢印１つのためにWebフォントを読み込むのはパフォーマンス的にどうなのかと思うのでCSSにしました。 他のサイトでもよく紹介されていますが、とても便利なので解説します。 サンプルを用意していますのでご覧ください。 では解説していきます。 HTML まず、HTMLです。 <ul id="menu01"> <li><a href="#
ブラウザによって色や種類の違うボーダーの交わり方が違うので擬似要素使ってみる
見出しなんかで、左と下にボーダーをつけているサイトをよく見かけます。ボーダーの種類が同じで、色も同じだと問題ないのですが、種類や色が違ってくると交わっている部分がななめになり個人的には気持ち悪いです。 で、どちらかのボーダーを擬似要素でつければきれいになるって話を書こうと思ったのですが、ブラウザによって交わり方が違うことに気付きました。 ちなみに先ほどのはChromeの最新バージョン（記事を書いているときの）です。バージョン 28.0.1500.95 mになるようです。このスクリーンショットはPCはWindowsのものですが、Macでも同じ感じでした。 拡大するとこんな感じです。 交わる部分が斜めになっています。これを利用して三角形や台形を作ることができます。三角形の使い方はこの辺の記事をぜひご覧ください。 オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ｜Webpark
CSSだけで作るamazon風な縦型メガメニュー
メインカテゴリー1 メインカテゴリー1 サブメニュー1-1 サブメニュー1-2 サブメニュー1-3 サブメニュー1-4 サブメニュー1-5 メインカテゴリー2 メインカテゴリー2 サブメニュー2-1 サブメニュー2-2 サブメニュー2-3 サブメニュー2-4 サブメニュー2-5 サブメニュー2-6 サブメニュー2-7 メインカテゴリー3 メインカテゴリー3 サブメニュー3-1 サブメニュー3-2 サブメニュー3-3 サブメニュー3-4 サブメニュー3-5 サブメニュー3-6 サブメニュー3-7 サブメニュー3-8 サブメニュー3-9 サブメニュー3-10 サブメニュー3-11 サブメニュー3-12 メインカテゴリー4 メインカテゴリー4 サブメニュー4-1 サブメニュー4-2 サブメニュー4-3 サブメニュー4-4 サブメニュー4-5 サブメニュー4-6 サブメニュー4-7 サブメニュー4
[CSS]パラグラフやリストなどのテキストの下にできてしまう意図しない余白を解決する方法
p, ul, ol, dl などのテキストの下にできてしまう意図しない余白を解決するうまい方法をCSS-Tricksから紹介します。 下記は各ポイントを意訳したものです。 Spacing The Bottom of Modules 上記のコードはシンプルで、divをラッパーとして、見出しとパラグラフを配置しているだけです。 HTML <div class="module"> <h3>Module</h3> <p>Pellentesque habitant morbi tristique senectus...</p> </div> スタイルシートもシンプルです。 CSS html { background: #333; } .module { width: 20rem; padding: 1.5rem; margin: 1.5rem auto; background: white; } h
普段使ってるCSSのパフォーマンスとメンテナンス性をアップさせるOOCSSベースの超軽量フレームワーク -Kraken
オブジェクト指向CSS（OOCSS）のコンセプトは普段使ってるCSSのパフォーマンスとメンテナンス性を向上させること。 そんなOOCSSをベースに設計された、モバイルファーストの拡張性も備えた超軽量フレームワークを紹介します。 Kraken Kraken -GitHub オブジェクト指向CSS（OOCSS）とは Krakenの特徴 Krakenのデモ オブジェクト指向CSS（OOCSS）とは Krakenはオブジェクト指向CSS（OOCSS）ベースで開発されています。 Krakenで採用しているものを例に、簡単に説明します。 The Kraken Way 大きいブルーのボタンのスタイルを定義する際、一つのclassやidなどで定義することもできますが、OOCSSでは「ボタン=btn」「大きいボタン=btn-large」「ブルーのボタン=btn-blue」とします。これは煩雑なように見えます
文字列を省略して「…」を付与する方法 – CSS/jQuery | DevelopersIO
通常、設計・デザインの段階であらかじめ表示する文字数の上限を決めておき、PHPやRuby、Javaなどサーバサイドで表示する文字列を加工することが多いかと思います。 しかし、この方法だと動的に変化する領域を基準に表示する文字数を制限する場合や、文字サイズや表示領域のサイズに合わせて上限を算出する場合に限界があります。 そこで、クライアントサイドで表示領域から文字列がはみ出す場合、文字列を省略して省略記号「…」をつける方法を紹介してみたいと思います。 実現方法として以下の2つの方法があります。 text-overflowプロパティを使う jQueryで表示領域の幅・高さに合わせて文字列を加工する text-overflowプロパティを使う text-overflowプロパティを用いると、文字列が表示領域からはみ出してしまった場合、はみ出した文字列を省略記号「…」で省略することができます。 尚
[CSS]レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック
中心箇所を選定 画像は天地左右にクロップ可能なので、中心となる箇所をグリッドから決定します。 HTML HTMLは画像を配置するimg要素の他に、クロップするためにdiv要素が二つ必要です。 <div class="focal-point"> <div><img src="guy.jpg" alt="guy"></div> </div> div要素を余計に使用することはよくないことですが、実装を簡単にするために使用しています。 クロップする箇所を指定するには、classを追加します。 <div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </div> 右3、上3は、上記のグリッドから算出してもので、右3上3にクロップします。 CSS まずは、ベースとなるスタイルシートです。 * { marg
今更だけどdata URI Schemeって何？ – poyosi.com
こんにちは、@poyosiです。皆さんdata URI Scheme使ってますか？ 私は全然使ってません。 data URI Scheme（データ ユーアールアイ スキーム）自体はかなり昔からありますが、知っておいて損はないと思いますので、おさらいの意味も込めて書きたいと思います。 そもそもURI Scheme（ユーアールアイ スキーム）とは？ data URI Schemeのお話をする前に、そもそもURI Schemeって一体なんなの？というところを簡単にご説明したいと思います。 一般的にURI Schemeはあまり聞きなれないワードかと思いますが、実は身近なところで広く使われています。 例えば、Webサイトにアクセスするときに「http://exsample.com」というURLをブラウザに入力して表示させますよね？ このURI（URL）先頭部分に記述される「http」のような「どのよ
Media QueriesがIE8で効かない場合の対処法
iPad 向け、iPhone 向けにWEBサイトの最適化を色々と試しながら、 「まだまだ奥が深いなぁ、Media Queries…」 と思っていた最中、IE8 で落とし穴です > < IE8 ではもともと Media Queries が効かないため、css3-mediaqueries.js を利用して <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> と <head> 内に記述してあげる必要があるのですが、 それでも、IE 8で Media Queries が効かない。。。 原因を色々探していましたが、今回の直接の原因以外でも 結構色々なサイトで同様の事例が紹介されているようでしたので
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
CSSセレクタのパフォーマンスへの影響 - MOL
ASCII.jp：30分でできる！Webサイトを高速化する6大原則 高速化する6大原則として『4.CSS セレクターは短く最適化せよ！』とこの記事では挙げられているのですが、原則というのはちょっと言い過ぎではないかと。少なくとも『3.HTTPリクエストは最小にせよ！』などと同列に考えるのは避けた方が良いかもしれません。 というのも、ハイパフォーマンスWebサイトの著者であるSteve Soudersはこんなことを言っています。 CSSセレクタを最適化するために時間を費やすのは価値のあることだとは思わない。もし、明日起きて世界中のサイトのCSSセレクタが奇跡的に最適化されていたのなら、私は遠くに行ってこう叫びたい。『誰も気づいてないですやん！！』 High Performance Web Sites :: Performance Impact of CSS Selectors Steve S
CSSをシンプルに書くことができるLESS使ってみた
CSSをシンプルに書くことができるLESS使ってみた CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 投稿日2011年12月13日 更新日2011年12月13日 ネスト（階層）化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Demo: Multiple Borders with CSS 2.1 – Nicolas Gallagher
Icons | Font Awesome
Sass/SCSS入門 (全15回) - プログラミングならドットインストール
http://sakurachiro.com/_exercise/html_css/juxtaposition-of-definition-list/
ツールチップ（吹き出し）を実装するチュートリアルやプラグイン
