スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
Forms -フォーム [ad#ad-2] Skeletonの特徴 スマフォ対応のグリッド Skeltonでは軽量の960pxのグリッドシステムを採用しています。 ブラウザやタブレット、スマートフォンなどスクリーンのサイズが小さくなると、そのサイズに最適なレイアウトに変更します。 Fast to Start 洗練されたベーシックなUIエレメントをあらかじめ用意してあるので、すばやくサイトの制作が始められます。 Style Agnostic SkeltonはUIのフレームワークではありません。最もベーシックなスタイルを提供していますが、あなたの好きなデザインを適用することができる開発キットです。 Skeltonの対応ブラウザ・デバイス Latest Chrome (Mac/PC) Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC) Latest Safari IE9, I
フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは
サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一本吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には食材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい食材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ
外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。 don't use @import 内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。 下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。 @import @import 2つの外部スタイルシートを@importで指定。 <textarea name="code" class="html" cols="60" rows="5">
ツールバーやWebページコンテンツのサイズを正しく表示させる Mozilla Firefox 3(以下、Firefox)では、Webページはもちろん、ツールバーなどのレイアウトにもCSS(Cascading Style Sheets:HTMLやXMLの表示レイアウトを修飾するために用いられる仕様のひとつ)を用いており、CSS内で使用する絶対値はDPI(Dot Per Inch:1インチ内に表現できるドット密度の単位)に依存しています。たとえば、Windows OSで一般的な96dpiの場合、12pxのフォントは16ピクセルとして表示されるというもの。 このCSSから参照されるDPIを制御するのが「layout.css.dpi」という設定名。既定値は「-1」となり、Firefoxが動作するOSの理論値もしくは96dpiが用いられ、「0」の場合はOS側の理論値がそのまま使用されます。何らかの理
CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 February 27th, 2009 Posted in その他 Write comment かなりマニアックではあるが、その筋の人にはすっごく便利なのでは。 SelectorGadgetではCSSのセレクタを書くためのブックマークレットを配布している。CSSのセレクタは慣れるまで書くのが大変である。 しかしこれを使えば「タイトルだけを指定するCSSセレクタ」「このテーブルのこの列だけを指定するセレクタ」なんてのをインタラクティブに指定しながら確認していくことができる。 使い方は簡単で、まずはブックマークを好きなページで起動する。すると右下にセレクタ表示用のボックスが現れる。 次にセレクタに含めたいDOMをクリックする。するとそこが緑になり、さらにそのセレクタにマッチするDOMが黄色
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
Selectors Level 3 W3C Recommendation 06 November 2018 This version: https://www.w3.org/TR/2018/REC-selectors-3-20181106/ Latest version: https://www.w3.org/TR/selectors-3/ Previous version: https://www.w3.org/TR/2018/PR-selectors-3-20180911/ Latest version of Selectors: https://www.w3.org/TR/selectors/ Editor's Draft https://drafts.csswg.org/selectors-3/ Feedback: File an issue on GitHub Editors:
Internet Explorer (以下IE) はCSSを独自に拡張し、ime-mode プロパティをサポートしています (昔の Mac 版等、 Windows 版以外の IE では実装例がありませんでした)。このプロパティを Web ページ上のエディタ (input 要素や textarea 要素) に指定しておくと、そのエディタにフォーカスが当たった時 (キャレットと呼ばれる縦棒が点滅している状態になった時) に IME の状態を強制的に変更してしまう、というものです (詳しい仕様は MDC のドキュメントを参考にしてください)。 前回、ご紹介したように、Firefox 3 では IME の状態管理能力が飛躍的に向上したので、この独自拡張をサポートすることが可能になり、実装しました。 これにより、例えば数字しか入力しなくて良い場所等では、 IME がパスワードエディタの場合と同様に無
この前 以下のようなエントリを書きました CSS の名前の整理 - IT戦記 今回は CSS における この「value（値）」という言葉の意味、そして曖昧さについて書きたいと思います。 6 つの値 CSS において「値」は曖昧な言葉です。 なので、「値」という言葉を使って CSS の説明をするのは非常に効率が悪かったりします。 たとえば、「ここの値って、 hogehoge の意味の値？」「いやいや、ここの fugafuga の意味の値が piyopiyo なんだよ」というように、まったく無駄な会話が繰り広げられるわけです。 ですので、今日からはちゃんと CSS の「値」をちゃんと説明できるように、「値」に以下の 5 つの名前を付けましょう。 Declared values Cascaded values Specified values Computed values Used valu
woork: Using CSS and Mootools to simulate Flash horizontal navigation effect カーソル位置によって自動スクロールする小窓実装ライブラリ。 枠の右端に移動すると、右にズイズイとスクロール、左に移動すると左へスクロールするような小窓を実装するためのライブラリが公開されています。 クリックでデモを表示 次のように、見えている部分と、隠している部分をCSSによって出し分けています。 JavaScriptによってスクロール処理を実装。 横スクロールしていくようなＵＩの実装に使えそうです。 また、サンプルのような大きいブロックではなく、小さい領域で、いくつかの情報を格納するのにも便利そうですね。 mootools+CSSで実装されているようです。
Super Tablesは、テーブルのヘッダを固定表示にし、縦横にスクロールバーを表示させるスクリプトです。
前回はアルファチャンネルを使った透明度の設定について紹介したが、透明度はopacityプロパティでも指定することができる。opacityプロパティはFirefoxやSafariでもバージョン3以前から対応しているので、今回はアルファチャンネルとopacityプロパティの違いについて見ていきたいと思う。また、Firefox 3が新しく対応したCSS 3のtransparentの処理についても紹介する。 なお、透明度に関する規格については、CSS 3の勧告候補CSS3 Color Moduleを参考にしている。 また、今回からは先週リリースされたFirefox 3のBeta 3を利用する。Beta 3では、第3回「CSSで罫線を角丸で表示する（1）」で紹介した「背景画像の角丸表示」に対応したので、確認してほしい。
透明度を設定する スタイルシートで透明度を指定することができれば、半透明にした文字を画像に重ねるといったデザインも簡単に作れるようになる。CSS 3では、アルファチャンネルまたはopacityプロパティで透明度を指定する方法が提案されており、Firefox 3とSafari 3は両方の指定方法に対応している。 今回は、色に関する定義をまとめたCSS 3の勧告候補、CSS3 Color Moduleを参考にしながら、アルファチャンネルを使った透明度の設定について見ていきたい。 RGBAによるアルファチャンネルの指定 CSS3では、RGBによる色指定にアルファチャンネルを加えて、RGBAによる色指定ができるようになっている。RGBAでは次のように、R（赤）、G（緑）、B（青）、A（アルファチャンネル）の値を「,（カンマ）」で区切って記述する。ただし、RGBの値は16進数で指定することが認められ
phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」 という記事が上がっていたのですが、この手の一部トリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで、clip プロパティを使用したサンプルを簡単に紹介してみます。 いきなりですが、サンプル。 clip プロパティで画像トリミングサンプル 通常は画像の一部のみが表示され、マウスオーバーで全体が表示されると思います。 ソースは下記。まずは XHTML ソース。 <p class="clipSample"> <a href="***"> <img src="***" width="240" height="180" alt="" /> </a> </p> CSS は下記のとおり。今回のサンプルは画像のサイズが、240px ×
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
