Media QueriesとjQueryを使って、スマートフォンでアクセスした時だけナビゲーションメニューを上に隠す
シンプルで良かったので一応メモ。レスポ ンシブWebデザインのTipsです。Media Queries とjQueryを使用して、スマフォでアクセス した時だけ、邪魔になりがちなナビゲー ションメニューを上に隠す、みたいな手段。 割と良かったので参考までに記事に備忘録 として残しておきます。 隠すというと語弊があるんですけど・・・凄くシンプルな方法です。 Pull-Down-for-Navigation 通常のPCでは普通のナビゲーションですが、スマートフォンの場合、このように上に隠れています。しかし、タップで降りてくる、引っ張る、などのギミックではありません。 まずはデモをご覧下さい。 Sample QRコードでもアクセス出来ます。 Media Queriesの内容はだいたい予想が付くと思いますのでjQueryだけ。これもかなり単純ですが。 function checkWidth ()
OOCSS（オブジェクト指向CSS）のススメ | hijiriworld Web
【OOCSS】 <div class="box box-red"></div> <div class="box box-blue"></div> .box { width: 50px; height: 50px; } .box-red { border: 1px solid red; background-color: #FFCCCC; } .box-blue { border: 1px solid blue; background-color: #66CCFF; } といった感じです。 いままで「OOCSS」という言葉を知らなくても、マークアップエンジニアや、ある程度経験のあるWebデザインナーであれば、効率化を図るために自然にやっていることではないでしょうか？ この考え方を体系化してまとめたものがOOCSSです。 では次にOOCSSがどのような考え方のもとに設計されたのかを見ていきまし
JavaScript無しで作るレスポンシブなコンテンツスライダー・CSS3 Responsive Slider
使えそうだったので参考にしました。 JavaScriptを使わず、CSSのみで動作 させるレスポンシブWebデザイン対応 のコンテンツスライダーのサンプル です。軽量化にも繋がりそうですね。 CSSのみで作られたレスポンシブなコンテンツスライダーです。これはちょっと覚えておきたい。 ちょっとこの発想は無かったですけど、確かに簡単なコンテンツスライダーならCSS3使えばJSはいりませんし、そのままレスポンシブWebデザインに対応させれば、あとはCSS3が使えないブラウザ向けにjsを書くだけ、という手もありますね。 以下サンプルです。レスポンシブWebデザイン対応の確認はresponsivepxでどうぞ。 Sample ※responsivepxで簡単に確認出来ます。 jsfiddle iPhoneのキャプチャ ナビゲーションのサイズはモバイルの際は大きくしないとですね。 まず、スライドの作成
納期間近でIEで崩れてる！ そんな時にも慌てないCSS開発のワークフロー
まだまだIE7、そしてIE6のユーザーをターゲットに考えているウェブサイトは多くあると思います。 そんなIEユーザーをターゲットに含めたウェブサイトを制作する上で、より効率的にCSSの開発が行えるワークフローを紹介します。 Cross-Browser CSS Development Workflow [ad#ad-2] 下記は各ポイントを意訳したものです。 1. リセットかノーマライズか 2. 基本的なレイアウトはIEで 3. 最後の確認もIEで 4. 最後の手段：IEのみスタイル 5. 問題に取り組み続ける 6. おわりに 1. リセットかノーマライズか IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。 CSSリセットとは CSSリセッ
2012年のMedia Queries
2011年にはMobile Firstという手法が浸透した。当初は多分に技術的な事情によるもので、先に低解像度向けのスタイルを書くことによって、高解像度向けのスタイルで使われる大きな画像を読み込まれないようにするというテクニックでしかなかった。しかし、結果としてコンテンツ重視でCSSを書きやすくなることがわかり、急速に浸透することになった。Media QueriesはそんなMobile Firstの中核をなす技術だが、その使われ方は限定的なもの(ほぼmin-widthとprintだけ)だ。2012年にはそこらへんも変わってくるんじゃないかと思う。 @media screen and (min-width: 481px) { /* do something */ } こういった強く「スマートフォン」を意識した書き方をするのではなく、コンテンツに応じて切り替えポイントを探る必要があるだろう。例
@silent directive coming soon to Sass?
Compass開発者のChristopher M. EppsteinがSassに@silentというディレクティブを追加してた。どうやら待望の出力CSSに含めないCSSルールを書けるようになるもののようで、これがマージされれば思う存分@extendまくれそう。 カラム定義も $col: 60px; $gap: 20px; @function column-width($i) { @return ($col * $num) + ($gap * ($num - 1)); } .column { @silent; margin-right: ($gap / 2); margin-left: ($gap /2); float: left; } #main { @extend .column; width: column-width(9); } #sidebar { @extend .column;
Sass で Singleton を実現し、安心してクラスを再利用する | nodot
この article は Less & Sass Advent Calendar の23日目のエントリーとして書かれています(あれれ?!)。 概要 CSSメタ言語を導入する目的の一つにリソース再利用性の実現というものがある。Sass の場合、mixin や extend によって実現している。特に extend によるスタイルの継承は強力である。 しかし再利用できるようなクラスをまとめたライブラリを import して利用すると、実際には使われていないクラスも出力されてしまい、ファイル容量が無駄に肥大する。使うクラスだけコピーするとか、使わないクラスは削除するなどの手動管理は手間がかかる。 そこでクラス自体を出力するような mixin を作れば、必要なクラス定義だけを include でき、不要な CSS コードを出力しなくて済む。しかし、extend したいクラスを必要になる度に inc
俺の CSS リセット: 2011 冬
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違
画像を一切使わずCSSで描かれた「けいおん！」の澪がマジですごい！
今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん！」の秋山 澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。 「けいおん！」（K-ON!）は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動を行っていくストーリーで人気のかきふらい氏による4コマ漫画作品です。2年前にアニメ化、今月12月より映画が公開されている人気作品ですね。秋山 澪はその作品に登場するキャラクターです。その秋山 澪をまったくの画像なしで、html+CSSのコードだけで表現しています。 私も以前にCSSでドラえもんなど様々な作品を描いたりしましたが、はっきりいってhtml+CSSのコードだけで絵を描くのはとても大変です
“Mobile first” CSS and getting Sass to help with legacy IE – Nicolas Gallagher
Taking a “mobile first” approach to web development poses some challenges if you need to provide a “desktop” experience for legacy versions of IE. Using a CSS pre-processor like Sass can help. As of Sass 3.2, there is another way of catering for IE, described by Jake Archibald. One aspect of a “mobile first” approach to development is that your styles are usually gradually built up from a simple b
CSS box-shadow Can Slow Down Scrolling
By Ross Allen Working on one of the Chromebooks Google lets you borrow on Virgin America flights, I noticed scrolling down the page on my airbnb.com dashboard was much slower than on my normal laptop. I chalked it up to weak Chromebook hardware, but other sites were scrolling just fine. box-shadow had caused slow scrolling on our search results page before, so I did some investigation. I used Chro
SVGのフィード・アイコン
背景を完全に透明にして白い丸と円弧の部分だけのフィード・アイコンを作ってみました(上の画像は背景がオレンジ色になっていますが、CSSで背景色を指定しているだけです)。Wikimedia CommonsにあるSVGアイコンをエディタでいじっただけですけどね。SVGファイルのソースにコメントとして書いてあるように元ファイルと同じくMPL/GPL/LGPLのトリプル・ライセンスです。 Demo: SVG Feed Icon SVGファイルのソースはデモ・ページの最後に載せてあるのでそれをHTMLファイルにコピペしても良いですし、普通にドラッグ・アンド・ドロップや右クリックで保存してimg要素で参照しても良いでしょう。このページやデモ・ページではData URIスキーム化したものを直接使っています。500バイト強の小さなものなのでData URIスキーム化して使うのが良いと思います。 アイコンの丸
Fully fluid, responsive CSS carousel – CSS Wizardry
31 October, 2011 Fully fluid, responsive CSS carousel Written by Harry Roberts on CSS Wizardry. Table of Contents Demo The fluidity CSS powered Update Wait, CSS?! If you follow me on Twitter you’ll know I’ve been pretty enthused about this fluid CSS carousel of mine. There are two aspects to it; the fluidity and the CSS functionality. Demo The demo features photos of me, taken on various mountains
Reset vs Normalize
CSSの記述法として、ブラウザごとの違いを「Reset」して一から指定するという方法が長らくマジョリティを占めていました。まだまだその方向で書いている人が大半ですが、「Normalize」するという方法を採る人達も増えています。なぜリセットではなくノーマライズなのかというような話をなんとなくダラダラ書いてみたい感じです。 以下、リセットはYUI 2のCSS Resetを、ノーマライズはNormalize.cssをイメージして読んでみてください。 リセットとノーマライズ まずは両者の違いから。リセットはなかったことにするというもので、ほぼ全ての要素に対するスタイル指定を排除しブラウザごとの違いを吸収するものです。対してノーマライズはブラウザのデフォルト・スタイルシートを生かしつつ、各ブラウザ間の挙動を擦り合わせるものです。リセットが負の方向で統一しているとすれば、ノーマライズは正の方向で統一
PhantomJSからCSS Lintを使う
CSS LintのCLIはNodeやRhinoから使うようになっているので、Windowsだとちゃんと動くようにするまで結構面倒です(勿論ちゃんと動かせるようにはなります)。また、僕の場合はそもそもCSS Lintしか必要としていないので、Nodeを入れるのはちょっと大げさな気もします。そこでPhantomJSからCSS Lintを使うスクリプトを書いてみました。 var fs = require("fs"), f = phantom.args[0], css = fs.read(f); if (phantom.injectJs("csslint.js")) { var i, r = CSSLint.verify(css), l = r.messages.length; if (l > 0) { for (i = 0; i < l; i++) { var e = r.messages[i]
Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute | HTML5 Doctor
NOTE: (6/11/2013) The definitions of cite and blockquote in HTML have changed. For the latest advice on using these elements refer to cite and blockquote – reloaded Given HTML’s roots in the academic world, it should be no surprise that quoting is well-accommodated in the elements <blockquote> and <q>, with their optional cite attribute. In addition, there’s the <cite> element, which over the last
(S)CSSの書き方メモ
HTML5時代に向いていそうな(S)CSSの書き方を模索しています。SCSSで書くのでモジュール式に色々分割した方が良さそうだな……とか色々試してますが、なかなかこれ！ というものに辿りつけません……。ということで、ここ最近の書き方をメモがてら晒してみる試みです。 実際にこのサイトで使っているSCSSファイルを抜粋しつつ列記していきます。 style.scss style.cssになるSCSSファイルではCSSは書かないようにします。ただし例外としてCSS文法での@importルールはその必要性からここに書きます。Webフォントなんかで使いますね。それ以外はSCSSの@importでモジュール化した各種SCSSファイルを読み込んでいきます。 @import url("http://fonts.googleapis.com/css?family=Pacifico"); @import "va
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Chrome Fix (Chrome alone css hack)
見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト
PageSpeed Insights