タグ: css

lightbox系のヤツでレスポンシブでもなんとかしたい

lightbox系の画像拡大のコンテンツがあるのをレスポンシブ的な感じでやった時、

最初、Lightbox 2で試してみたけど、

かなり大きなサイズの画像だと、スマートフォンのブラウザいっぱいいっぱいになって、どうしようもなかった。
色々試した結果、軽さもあって、ColorBoxがいいかなと。NETEYE Touch-Galleryは、なんかバギーな印象で今回は見送った。ColorBoxもSettingsがデフォルトのままだと、Lightbox2のデフォルト同様いっぱいいっぱいになってあわわ状態ColorBoxのSettings見て、

とかでもスクロールはするんだけど、やはり大きい。うーむ。デベロッパーツールと格闘しながら、colorbox.cssの.cboxPhotoの

とかにしたら、だいたい希望通りになった。あとは微調整して。ターゲットブラウザでの動作とかちゃんと調べてご利用は計画的に。

Drawter.com – DrawAble Markup Languageに萎えた【期待age】

リーダーチェックしてたら、
ブラウザだけでCSSレイアウトに対応したページをさくさく作ることができる『Drawter』 | 100SHIKI.COM
というのを発見。
百式さんのスクリーンショットもいい感じだし
「こりゃあ、要チェックですぜ!先輩!」ってな訳で見てみた。
なんか使いどころあるかも知れないじゃない!
確かに、作者さんのJavaScript力はスゴいかもしれない。
JQuery作品としてはかなり優秀な作品なんじゃないかな?

それっぽいのを作ろうとしている所-1枚目

それっぽいのを作ろうとしている所-2枚目

配置方法は一応選べる

Auto floatで生成してみたコード

  • charsetの前にtitleタグ来た時点で萎える
  • Auto sizesで生成したらposition: absolute;連発
  • JQuery作品として見るにはいい
  • Dreamweaver持っている人は見るのは時間の無駄になる可能性あり
  • まだ使えね〜
  • でもそのうちこんな風になるんだろうな

マークアップエンジニアという言葉に釣られてなんか書いてみるテスト

大工とマークアップエンジニア 〜宮内寿和を知って〜|groowebとか
アクセシビリティ講義で実際に音声読み上げブラウザを使わせてみたよ – 我流天性 – がらくた屋とかに
釣られてなんか書いてみるエントリー。

あえて、マークアップなんてどうでもいいと書いてみる

今そのページを見てる人にとって、マークアップなんて結構どうでもいいと思っている。
「そのうちソフトでできるようになるんじゃないの?」とか
文字サイズを大きくしたり小さくしたりして主要ブラウザで崩れなければそれでOKじゃない位の勢いで。
大多数の人がソースなんて気にしてない。大多数の人が読み上げ式ブラウザ使ってない。
大工さんの作る家と違ってWebサイトは数年したらリニューアルだろみたいな。
そもそもHTMLからXML準拠のものに準拠させたのがXHTMLですが、
データの再利用化とか言われてましたが、再利用化されてるんでしょうか?
確かに、スクレイピングするときとか便利かも。
しかし、発信者側から見たらAPI利用した方がスマートじゃね〜。とか思ったり。
プロボの中の人は、grooweb|福岡天神で働くWEBエンジニアのブログの中の人や我流天性 – がらくた屋の中の人に勝るとも劣らない位の勢いでマークアップにこだわっている。
どうしてでしょうか?
簡潔に言えば、「それが仕様だから」なんです。
ユーザーエージェントも仕様に準拠しようとして作ろうとしてるんだろうから(そうでないのが厄介だよね)
仕様に準拠した(X)HTML書こうとするのは当たりまえじゃないと?
確かに現在、携帯とか「えっ!外部CSSダメと?」とかいうのもあるので、一筋縄ではいかんかもしれん。
でも、もうどんなユーザーエージェントで閲覧されるかわからん時代に突入しているのでは?
Webサイトって、印刷物と違うから最終的な見た目とかは、ユーザが決めるモンやろうもん。
そんな中でもキチンと意味の通るWebサイト作りたい訳で。
ユーザビリティやSEO、アクセシビリティは当然いい方がいいに決まってるし。
欲張りだから、できるだけ良くしたいw
ワンパクの阿部さんのプレゼン真似れば、
「【使いやすいWebサイト】と【使いにくいWebサイト】どっちがいいですか?」ということで。
しかも、ユーザビリティやSEO、アクセシビリティって、方向性はいっしょだと思うし。
そういうのが「あたりまえ」と思うと、「他でちゃんと勝負できんといかんね〜」と自分に言い聞かしながら、
そういった意味で【どうでもいい】と言ってみたw
そんな40歳の晩秋。

自動リロードについて私の場合

vimもemacsも使いこなせない西嶋です。
どちらも保存したら、ブラウザをリロードする技が流行ってるようですね。
確かに、一度にリロードできるっていうのは、魅力的。私は、どうしてるのかと言うのをちょっとだけ。
自分の場合は、レンダリングの正しそうなブラウザなんかで確認して、後でおちゃめなブラウザの調整をするという手法でやってます。
CSSを書く時には、CSSEditというのを使ってまして、これのプレビュー機能が素晴らしいのでありまして、これに頼ってます。
おちゃめなのは結局手動でリロードさせてる次第ですが・・・。

  • CSSファイル画面とプレビュー画面が別(デュアルモニターのときに特に便利)
  • プレビュー画面もタブ
  • 反応がリニア(保存しなくても反映される)
  • インスペクタというのも付いている(手書きで書いちゃうので今ひとつ使いこなせてない)

「Dreamweaverがこんなになったらいいのにな」というのを妄想してみる

CS3やっと購入しました。 まだまだ使い込んでないのでよくわかんない部分もありますが、自分なりに、こんなのあったらいいなというのを妄想してみました。
自分はMacユーザーなので、Macユーザー目線で書いてます。

コードヒントの候補の選択時にキーバインドが効く

画像:Dreamemweaverコードヒント

  • Ctrl+N で下の候補に
  • Ctrl+P で上の候補に

Macユーザーだったら、Cocoaアプリのキーバインドに慣れてると思うんですよ。やっぱ。
自分の場合、コーディングスタイルは、コードビューで書いて行くスタイルで、あんまりホームポジションから離れない方が好ましいですし。
Windowsユーザーの場合も考えてみると、他のショートカットとかぶってますね。どうすりゃいいのかな?

コードヒントの出現順序が、携帯の文字変換のように、使ったもの順序で出てくればいいのに

CSSEditというエディターも大好きで使ってますが、これの好きな部分のひとつに、Dreamweaverで言うところのコードヒントの出方があるんです。
画像:CSSEditコード候補出現の様子
出現順序が、携帯の文字変換のように予測して出現します。
詳しくは知りませんが(笑
最近使ったものから出てくるし、使用頻度も見てるんだろうか?
とにかく、使いやすい。
しかも一度引っ込んでもリアルタイムで出てくるんですよ。
また候補を出したりするショートカットとかいらん訳です。
しかーし、やっぱりこいつも候補出て来たとこでのキーバインド効かないんだよなー。
LaunchBarは、ちゃんと効いてくれて嬉しいのになー。
画像:Launchibar

CSS Nite in FUKUOKA Vol.2終了しました

CSS Nite in FUKUOKA
CSS Nite in FUKUOKA Vol.2終了しました。
2007年7月18日に、イムズホールにて開催しました。150名弱の方に参加して頂きました。
CSS Nite in FUKUOKA Vol.2の会場の様子
ご参加して頂いた方々、ご協力頂いた方々、ほんとうにありがとうございました。
個人的にまたもや反省点は沢山ありますが、「生きてて良かったー」というのを実感できた一日でもありました。
次も早い時期になんかやります。福岡で働くWebの人々 をよろしくです。

Movable Type 4 のCSSが気になって

以前からCSSについても多くのことを学ばせてもらったMovable Type先生
K氏とそういった話をしてたら、Movable Type 4 のCSSが気になって仕方ない。
ベータ版をダウンロードさせてもらいました。
MT4 Beta Download Movable Type Beta
未だインストールもしてなくて、ファイルを見ただけですが、
今のとこ、base-weblog.css に変更はなさそう。
今は、ちょっと余裕がないけど、下記のcssファイルは、よくよく見てみたい。

  • fonts.css
  • reset.css
  • structure.css
  • tableselect.css
  • utilities.css

今回も何か新しい技が潜んでいたりするのか?ワクワクです。

id、classの最近の自分の傾向

id名、class名の最近の自分の傾向|CSS Happy LifeClass名とID名の命名規則(2) | Blog hamashun.comを真似て自分のためにも書いてみよう。

idとclassの使い分け

idを使うところ

  • ワイヤーフレームでパーツが決まってる部分(インターフェイス名とかコンテナ名とか)
  • HTMLファイル対CSSファイルが1対1の関係でない場合に、ページを判別させる場合

上記以外ではclassを使う。
サイトの規模が大きければ大きい程、class名がかぶったりする可能性が高くなると思うんだけど、class名を考える時間ももったいない訳で。
class名がかぶっても良いように、css側のセレクタは、パーツのidから記載するようにしているな。
あんまり子孫セレクタ長過ぎるのもどうかと思いますから、先にインターフェイス名とかコンテナ名を決める事が重要ですよね。

命名規則
最近の案件だと、@importとか使って、古いブラウザには、css読み込ませない。という手法が主流だと勝手に思ってますが、その場合だと、大文字小文字、アンダースコア、ハイフンも使える訳でして。そうなると選択肢も多いですよね。選択肢が多いということは、プログラム側とhtml側で使い分けすることも可能ですよね。
例えば、プログラム側はラクダ型でhtml側はハイフン型使うとか。

何にも制約がなければ、個人的には、ラクダ型が一番好きかも。
理由は、htmlファイルをガーッと見た場合に、クラス名とか見つけやすいような気がするんですよね。
ファイル名には、アンダースコア使 ってるでしょ?他のタグや属性も小文字でしょ?そんだけなんですけどね。
あと、id、class名に見た目の意味より役割の意味を付けた方がいいというのも、よくわかりますが、やはり誰が管理/更新するのかが重要で、その人がわかりにくかったらダメだと考えてます。

リストタグの中に画像入れたけど下に隙間ができちゃったときの対処(IE6)

リストタグに画像を入れてナビゲーションバーにすることもあると思います。
※Daniel Nolan氏のImage Rollover Codeなどを利用する場合。
しかし、IE6では、画像の下に隙間が出来ちゃいます。
これは、確か画像がインライン要素で、行間をもってるからだったような・・・。
そんなときは、隙間ができちゃう画像にdisplay: block;するといいみたいです。
簡単な例は、下記の通りです。

■HTML

■CSS