レスポンシブWebデザインを実装するためのTips

「レスポンシブ」って単語を知らない人でも、ウィンドウをウィンウィンさせてコンテンツがついてくるのを見せながら「こういうのがやりたいんですよね~」とか言っちゃうアレです。
どんなデバイスで見てもいい感じになるようにしろって意味で使われますけど、iPhoneですら1サイズじゃなくなったこのご時世ですよ、面倒な割に気軽に頼まれがちじゃない?

スマホが出だした頃はPC/SPの2パターンあれば満たされたのが、今は…………🙄
何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ????????
とまぁ毎年苦しめられた結果、色々と知見が増えたのでこれまでに調べたり使ったりした「レスポンシブ」を実装するための方法をまとめました。

“レスポンシブWebデザインを実装するためのTips” の続きを読む

[CSS] 縦スクロールのニュースティッカー

縦方向に1件ずつスクロール表示するやつ

See the Pen Pure CSS News Ticker (vertical) by Tenderfeel (@Tenderfeel) on CodePen.

表示エリアの高さ=リスト要素1件の高さ=keyframeのスクロール量 にする。
keyframesに入れてるvisibilityを消すと巻き戻る様子が表示される。
演出として巻き戻すところを敢えて見せるなら消してもよろしいと思う。

4日目 : CSS Programming Advent Calendar 2012

CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。

おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは1つだけです。Chromeでしか動作確認してません。

“4日目 : CSS Programming Advent Calendar 2012” の続きを読む

[css] contentプロパティで挿入できるコンテンツ

clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、
:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。

挿入出来るモノ

大きく分けると3つです。

  • テキスト
  • プロパティの値
  • 画像

“ contentプロパティで挿入できるコンテンツ” の続きを読む

[MooTools] SpriteNavigation Plugin

MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。

spritenavigation plugin

元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。

DEMOはこちら

Image

全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。

navigation

Download(psd file):

“SpriteNavigation Demo Base” をダウンロード nav.zip – 613 回のダウンロード – 41 KB

Creative Commons License

“[MooTools] SpriteNavigation Plugin” の続きを読む

[XHTML]WebサイトのOOP

Webサイトはオブジェクトの集合体。
CSSもオブジェクト指向。

オブジェクトの集合なら、命名規則やデザインパターン作っておけば再利用はしやすくなる筈。
WebSiteでもOOP(Object Oriented Programming)的なこと出来る?
…となんとなく考えた事を適当に羅列してるメモです。まとまり皆無。思考ダダ漏れ注意。

Class

  1. Header -> #header
  2. Sidebar(Menu) -> #sidebar
  3. Contents -> #contents,#wrapper,#container
  4. Form ->#form,#contact
  5. Fotoer ->#footer

Method

  • List (UL,OL,DL) -> #menu,#navi,#navigation,#globalnavi
  • Headering Title (H1~H6) -> #page-title,#sitename,#content-title
  • Text Section -> div.post , div.section , div.entry
  • Buttons (input type=”button”,button tag, block style Ancher) -> #submit,#reset
  • Input (form elements)
  • Copyright (address) -> #copyright
  • Image (floating style, ancher style)
  • Table

Property

  • Inlines (strong,em,tt,code…etc)
  • Blocks (div,p,address,blockquote…etc)
  • String (plain text)

4BOXとか5BOXとかのレイアウトテンプレートは中身が空のクラス、つまりこんな状態です。

class Header {
}

“[XHTML]WebサイトのOOP” の続きを読む

XHTMLコーディング過程を晒してみる(画像で)

恥を忍んでつらつら過程の画像だけ並べてみる。
画像は全部等倍で、ソースは貼って無いです。
架空じゃないから実際のサイトで見れると思いまする。

ラフデザイン。
ラフデザイン

2カラムでメインメニューは左?ど真ん中にタブのメニュー。
メニューが2箇所あるので、コンテンツをメニューで挟むことにする。
コンテンツの両脇にグラデーションのシャドウって定番だよなあ。

※デザインはデザイナーが作った

“XHTMLコーディング過程を晒してみる(画像で)” の続きを読む

[JS]Table内セルを自動的にストライプにする

1行間隔でストライプとか、何行おきかで線が引いてあるTableをたまに見ますが、
いちいちclass追加してると面倒なのでjavacript使った方が早いよね。
っていうことでそういう感じのことをするスクリプトのサンプル。

左:1行間隔でセルの背景色変える
右:3行間隔で線を引く

“[JS]Table内セルを自動的にストライプにする” の続きを読む

[CSS]Safari3.X用CSSハック

Safari3.1登場。爆速表示で非常に快適なブラウザです。
FireFoxがカスタムし過ぎか最近重いからこの速さはかなり新鮮。

FireFoxでチェックしながら作ってたら大抵Safariでも同じ表示になるんだけど、
今作ってるサイトでSafariがIE6系と同じ表示になる現象が発生したので
Safariにだけ適用するCSSハックを探してたらいいものがありました。

CSS Filter: Safari CSS Hack

Not that Safari 3.0 on Windows is a grade-A browser yet, and not that I have figured out any reasons to need to hack for this browser yet, but two good potential CSS filters include using :first-of-type and -webkit-min-device-pixel-ratio.

CSS, JavaScript and XHTML Explained » Targeting Safari 3 with CSS and JavaScript: Safari3 Hacks & Filters (2008-04-15)

“[CSS]Safari3.X用CSSハック” の続きを読む

[CSS]透過PNGと透過フィルターの使い方

要素を透過させる場合、アルファチャンネルPNGかCSSのフィルターどちらか使えば作ることが出来る。
アルファチャンネルPNGはPNG24とかの保存形式で、背景無し(またはマスクつき)の画像を保存すれば作成出来る。
Div等の背景を透過させる場合、アルファチャンネルPNGで80%くらいに透過させた画像を背景にすると、フィルターと変わらない効果を得られる。

透過フィルターを使った場合、中の要素まで透過してしまうという問題がある。
positionとか色々CSSを駆使すれば回避できないこともないが、アルファチャンネルPNGを使えば中の要素が透けることはない。

以下サンプル

解説は続きに。
“[CSS]透過PNGと透過フィルターの使い方” の続きを読む

[CSS]スタイル優先順位の個別性と計算方法

クリエイターが身につけておくべき新・100の法則という本から紹介。
CSSは下に書いたものが優先されるプログラム的な仕様のほかに、優先順位を決めるルールがある。

よく知られてるのは以下の基本ルール。

  • CSS作成者による優先順位。
    1. Webページ製作者が作成したCSS
    2. Webブラウザ使用者が作成したCSS
    3. WebブラウザのデフォルトCSS
  • 記述位置が下のものが優先される。
  • !important宣言の付いたスタイルが最優先される。
    !importantが付くと優先順位が変わる。

    1. Webブラウザ使用者が作成したCSS(!important有)
    2. Webページ製作者が作成したCSS(!important有)
    3. Webページ製作者が作成したCSS
    4. Webブラウザ使用者が作成したCSS
    5. WebブラウザのデフォルトCSS

さらに、スタイルの個別性を決める数値というものが存在する。

“[CSS]スタイル優先順位の個別性と計算方法” の続きを読む