RedLine Magazine : サーバサイドCSS、Smart*CSSを試してみた
サーバサイドCSS、Smart*CSSを試してみた こちらの記事を拝見して興味津々で試してみました。 >>ウノウラボ Unoh Labs: 「サーバサイドCSS」という選択 >>Smart*CSS | Lism.in 一言で言うと、こういうものらしいです。 Smart*CSSは構造化（階層化、あるいは入れ子）したCSSを動的に変換して出力するシステムです。変換はSmart*CSSが自動でやってくれるので、「手元で変換して、そのファイルをアップ」のような面倒なことは一切必要ありません。 ウノウラボさんのページ内で世の中のCSSを書く人はCドライブに保存して動かない物はいらないと書かれていて、確かにそうだろうなーと思ったけど、幸いにもSmart*CSSに必要なSmartyもローカルにインストール済みだったので、結構気軽に試せました。 Smart*CSSのインストール >>Smart*CSS イ
RedLine Magazine : jQueryでリストを開閉させたい
jQueryでリストを開閉させたい こちらの記事、サンプルを拝見して。 Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript 英文なのだが、上記ページの「Examples」の部分の各サンプルを見れば何がしたいかはすぐに分かると思う。サイトマップだけでなく、いろんな場所で使えそう。動きも気持ちいいし、是非使ってみたいと思ったのだが、実際使ってみるとダダーと下階層のulリストを開くためには左の「+」マークを的確にポチっとしないといけない。またjs無効の際、下階層のulリストはCSS側で「display:none;」になっているので、そのままでは中身が表示されない。 じゃあそれ、jQueryでやってみよう。 もう少し自分好みな感じにできないかなーということで、jQueryでやってみることにした。対象となるペ
RedLine Magazine : [B]RLMの作り方・その１
[B]RLMの作り方・その１ ※RSSリーダーで読まれてる方に分かりやすいようにこれから初心者向けのカテゴリへはビギナーの[B]とか入れる事にしてみます。 RLMって何という話ですが、単純に「RedlineMagazine」ってのが長すぎたので単純に短縮しただけです。発音しにくいとかはスルーの方向で･･･。とりあえずせっかく初心者向けのカテゴリを作ったので、このサイトの作り方でも説明してみます。もし何か参考になる点があったらどんどんパクってください。 幅サイズをどうやって決めたかの巻 まずは構造文書の話ーをしようとも思ったんですが、それはコーディングの説明をする時にした方がいいと思うので、まずは見た目の話。 まず想定画面サイズをどうするか。ログを見て考えました。このサイトを見てくださってる方はおそらくweb関係者の方が多いと思うのですが、結構みなさん画面デカいです。 １ヶ月の統計ベスト10
RedLine Magazine : htmlとxhtmlの違い
htmlとxhtmlの違い htmlとxhtml、両者の違いがイマイチ分からないという方も多いと思う。webに詳しい方には「そんな説明の方法はないでしょっ！お前アホか。」と怒られそうだが思い切って簡単に言ってみる。 htmlとxhtmlは、顔がよく似ている腹違いの兄弟みたいなものです。 htmlさんのお母さんはSGMLさんで、xhtmlさんのお母さんはXMLさんです。xhtmlさんはSGMLさんとXMLさんの話し合いの結果産むと決められた子です。 表面上の顔はよく似てますが、htmlの性格はおおざっぱで自由奔放でとっつきやすい人です。逆にxhtmlさんは細かい事を気にする神経質です。xhtmlさんのお母さんであるXMLさんは顔が広く交友関係が広いので、最近はxhtmlさんの方がweb現場では気に入られています。 ･･･と違いはこんな感じ。両者の違いの詳細についてはいろんなサイトで解説されて
RedLine Magazine : hrタグの使い道を考える
hrタグの使い道を考える このサイトの状況は段組部分の背景をそれぞれの段組をまとめているブロックの背景として表示する定番技を使っているわけだけど、floatを使っているので当然IE以外のブラウザでは背景がちゃんと縦に伸びない(伸びないっつーかそのブロックに高さがない状態になるアレね。) 解決策としてはこれまた定番の clearFIx 技で解決すればいいやと思ってたわけなんだけど、どうもOperaさんの機嫌を損ねたらしく、Operaでだけ背景が表示されないという罠に陥った。 いつもなら「しょうがないやー、brでクリアしてやるかー」なんていう発想にたどり着くわけなんだけど、br タグでクリアするってのも本当はスマートじゃないよなぁと思いとどまった。で代わりになりそうな要素を考えてて思いついたのがhrタグ。 web標準が広まってきて、「構造と見栄えの分離」ってフレーズを遂行しているわけだが、hr
RedLine Magazine ：： フッターリスト・サンプル
フッターメニュー区切りを画像でやってみる サンプル01 サンプルサンプルサンプルサンプルサンプルサンプル 普通にテキスト間に「 | 」を画像化してリスト背景として表示。 今回は li タグの右側に背景画像をつけるというやり方にしてあるので、左側に1つ「| 」が足りなくなるため、最初のテキストに対して span で一番左に同じ背景画像が出るように指定してみた。 フッターメニュー区切りを画像でやってみる サンプル02 サンプルサンプルサンプルサンプルサンプルサンプル テキスト間に適当な画像をリスト背景として表示。 背景画像が「 | 」の場合は1ピクセルなのであまり気にならないが、当然背景画像の幅が大きくなればそれに合わせてcssでpaddingをうまいこと合わせてやる必要がある。 フッターメニュー区切りを画像でやってみる サンプル03 サンプルサンプルサンプルサンプルサンプルサンプル 上記サン
CSSで検索フォームの見た目を変更
CSSで検索フォームの見た目を変更 ネタがなくなってきたので、このブログ内のデザインネタでも。 タイトルの通り、検索フォームをcssで見た目を変えてしまおうという内容。 このエントリの右上部分に検索フォームを置いてるわけですが、とりあえずまずは変更する見た目の画像を用意。私が用意したのはこのinputのテキストフォーム用の画像とその部分のhover時、focus時用の画像(IE6では関係ないんですが)inputのボタン部分の画像の3つ。 こいつが通常時のフォームの背景画像。 こいつがhover時、focus時の画像。 こいつがボタン(のつもり) 元々ボタン代わりの虫眼鏡アイコンはフォーム部分に被せるつもりだったのでそのつもりで書き出し。ということでこんな中途半端な感じの画像になっとります。 XHTMLソース <div id="searchbox"> <form action="xxxxxx
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
