Documentation - Materialize
flash_on Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. group User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and an
clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix
米Yahoo!のフロントエンド エンジニア: Thierry Koblentz氏から、シンプルなスタイルシートで書かれたモダンブラウザ用のclearfix最新版を紹介します。 The very latest clearfix reloaded clearfixとは おさらい: micro clerafix(IE6+) モダンブラウザ用のclearfix最新版 clearfixとは 「clearfix」とはフロートした要素が親要素からはみ出してしまう、親要素の背景が表示されないなどを回避するもので、当サイトでもいくつか紹介してきました。 おさらい: micro clerafix(IE6+) まずは、おさらい。 micro clearfixは、normalize.cssのNicolas Gallagher氏によるもので、2011年にリリースされました。
Responsive Web Css
HTMLとCSSのファイルは「page.zip」として一つのファイルで、自動ダウンロードされます。 ファイルの中身は、下記のようになりました。 HTML HTMLのスケルトンです。 必要最小限のもののみの構成です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="generator" content="Responsive Web Css (www.responsivewebcss.com)" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="Stylesheet" href="index.html.css" /> </head> <bod
CSS、Javascriptを圧縮して読み込み速度を上げよう！「YUI Compressor」
timelapse audio / Inha Leex Hale ブログの表示速度を少しでも速くするために、ブログ内で読み込んでいるJSファイルとCSSファイルを圧縮せんと、「YUI Compressor」というツールを試してみました。 使い方 使い方は非常に簡単。まずはOnline YUI Compressorへアクセスしませう。 続いては「Code」の部分にCSS or JSファイルをコピペ、「File Type」を適宜切り替えて、オプションを選択したら「Compress」ボタンをクリックしましょう。 しばらくすると余計な改行や空白部分が消去された圧縮コードが吐き出されますので、あとは煮るなり焼くなりはんなり。 圧縮されたコードはあとから編集しにくいので、しっかりバックアップをとっておきましょう。あと、デザインなどが崩れる事も考えられるので張り替え後は確認を！（当サイトでは特にデザイン
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
CSSで縦横比を維持したまま画像をリサイズする方法
ホームページ上で画像を表示する場合、 通常は表示する画像のサイズにあらかじめサイズを変更しておいて配置するのが望ましい。 HTMLやCSSでサイズを変えて画面上では小さく表示されていても、 実際には一度オリジナルの画像を読み込むことになるので読み込みの際のデータ量が大きくなり無駄が多い。 また、ブラウザ上でリサイズした場合はリサイズの質が悪い。 とはいえ、状況によっては大きな画像を画面上で小さくしたい場合もあるでしょう。 CSSを使った画像のリサイズ方法を紹介します。 CSSの細かい前提知識は今後このブログで紹介していきます。 画像を指定する場合、高さ、幅のどちらかを基準にしてサイズを決めると思いますが、 決めたサイズのもう片方、高さが決まれば幅、幅が決まれば高さを計算しないといけません。 一般的にCSSで画像を縦横比を維持したままリサイズする場合には、 わからないほうのサイズをautoと
可能性を広げる10のスタイルシート | コリス
ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。 すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。 @media screen and (max-width: 960px) { } 「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウトでもよく利用されます。 「min-width」などのプロパティを使ってMedia Queryを作る際は、ビューポートのサイズを設定して利用してください。 HTML <meta name="viewport" content="width=device-width, initial-scale=1.0"> スマートフォンでは表示するページの大きさをビューポートの幅に（主に）縮小してフィットさせるため
25 Incredibly Useful CSS Tricks You Should Know - WPLoaded
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. 1. Change Text Highlight Color You might not have known this before! With CSS you can control the colors of selected test at least for standards compliant cutting edge browsers l
:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
CSS上級者を悩ませるフォント指定を探究するぜ2011 autumn
2011年9月2日 CSS初心者から上級者まで頭を悩ませるフォント指定のベストプラクティスを模索してみた。 2014年4月28日追記： フォント指定に関する新しい記事を書きました。 CSSのfont-family指定に関する考察 2014年版 先日、CSSによるフォント指定について色々な人と話をする機会があり、せっかくなので、これまでの自分のやり方を、もう一度ゼロから考えなおしてみようと思い立った。 font-familyの指定を考察する CSSによるfont-familyの指定についての世間一般の見解を調べていると、非常に参考になる記事を発見！ font-familyはメイリオが先かヒラギノが先かという命題を本気で調べた 上記のウェビンブログ様の記事中に添付されている資料：日本のコーダーのfont-family指定が、非常に興味深い。これを見ると、ある程度経験のあるコーダーさんたちの中で
[はじめてのjQuery][css] jQueryを使用してhover時の画像にドロップシャドウがつくようにしてみた
jQuery Summit Notes / Robert Banh 今日も今日とてjqueryのお勉強中、おつぱ（ @OZPA ）です。 「ページのトップに戻る」ボタンを実装してみたり、ブログの最上部に位置固定のソーシャルボタンとサイト内検索フォーム内蔵バーを配置してみたりしているわけですが、今回はjQueryを使用して、メインカラムの画像にカーソルを合わせた時にドロップシャドウをつけてみる挙動を仕込んでみました。 メインカラムの画像にhover時ドロップシャドウをつける たまに、背景が白いスクリーンショットや透明なpngなどを貼り付けた際に、これまたバックグラウンドが真っ白な当ブログではどこが境界線なのかわからないということがよくありまして。 こんな画像ですとどこが境界線がわからない。 でまぁ全ての白い背景画像にドロップシャドウを今から付けたりするのは面倒くさいので、jQueryを使用し
![[はじめてのjQuery][css] jQueryを使用してhover時の画像にドロップシャドウがつくようにしてみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a9264928a31685a7c06e095c81bf3909dadcb15/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2F4119057479_c09101901b3.jpg)
CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
Normalize.cssって何？ CSSリセットとは違うの？ どうやって使うの？ といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssの本サイト Normalize.cssのソース Normalize.cssのドキュメント Normal
CSS Frameworkを持つ - ゆーすけべー日記
例えば、Webサービスのフロントエンドのコードを書き始める時にまず何をするでしょうか？ デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。 少なくとも僕はそうですね。 理論的にはHTMLだけでもWebサービスを作ることはもちろんできますが、 見た目を少しでも調整したいとなるとCSSが必要になります。 例えばCSSを使わないHTMLの場合、いくら単純なレイアウトだとしても、 デフォルトのリンクの色を変えたかったり、フォントを変更したかったり、 要素ごとの余白をどうにかしかったりと最低限の要望が出てきます。 こうした最低限のCSSに対するニーズは共通化して自分なりのCSS Frameworkとして持っておくとよいと思います。 近頃、一からCSSを記述しなくなったのもこうした考え方のおかげです。 今Web上で配布されて利用可能なCSS Framworkが非常に増えて
シンプルなもう一つのCSS Framework「inuit.css」 - ゆーすけべー日記
ワディットのHPを改修する際に使ったんだけど、最近気に入ってるCSS Frameworkが「inuit.css」。CSS Frameworkは便利なんだけどどうしても使っていると「それっぽさ」が出ちゃうので（特にTwitter Bootstrapなんかｗ）こまめにみんなが使ってないようなものを探している。 inuit.cssそれ自体は非常に簡素なもので、コアのcssオンリーだとgridレイアウトすら対応してない。ただHTML5の要素の記述もある。特徴としてデフォルトで使っても文字が非常に読みやすいことがあり。大きさ、フォント、マージン、色非常にバランスよく配置、設定されている。また、イメージをマージンつけて左側に回り込ませて配置するといったちょっとしたユーティリティな使い方ができる。img要素にclass="left"を付ければOK。 <p> <img src="http://yusuke
CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log
「CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタ と CLASSセレクタ についてです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
編集中のHTML+CSSをリアルタイムに共有できるオンラインサービス -Cssizer
http://blog.yuku-t.com/entry/20120304/1330851243
Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ
Components · Twitter Bootstrap