価格表CSS
飲食店などのwebページで価格表を表示するときのCSS
http://qitailang.small.jp/webtech/price_line/sample.html
<dl class="price"> <dt>フィレステーキ</dt><dd>¥2,000</dd> <dt class="description">A5ランクの神戸牛を使っています</dt> <dt>フォアグラのソテー</dt><dd>¥2,000</dd> <dt>白身魚のムニエル</dt><dd>¥2,000</dd> <dt>伊勢エビのソテー甲殻類のソース</dt><dd>¥2,000</dd> <dl>
dl.price { overflow: hidden; list-style: none; width:350px; } dl.price dt { clear:both; float: left; width: 100%; padding-right: 6em; background: url(dot.gif) repeat-x left center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } dl.price dt span { background-color: #FAF6DB; } dl.price dt.description { font-size: 80%; padding-right: 0; background: none; } dl.price dd { width: 6em; margin-left: -6em; float: right; text-align: right; } dl.price dd span { background-color: #FAF6DB; }
dot.gif 2px X 1px
dt,ddのテキストを<span>で括るのをjQueryで自動化した。
<script type = "text/javascript" src = "jquery-1.10.2.min.js"></script> <script type = "text/javascript"> $(document).ready(function() { $("dl.price dt,dl.price dd").wrapInner("<span></span>"); }); </script>
連続するリスト項目を1〜8列に等間隔カラムで表示する。
sample1
sample2(簡易レスポンシブ - 479px以下1カラム表示)
ステップ1
リスト構造は下のように単純なものである。これを短いCSSで均等に横並びカラムで表示することにする。
リスト項目を1列から8列表示までできるようにするとき、何列で表示するかを class="cols-3" のようにクラス名で指定することにする。
カラムの幅は単純にパーセントで指定する (^^ 計算きらい~
カラムの背景色やボーダーなどで装飾するためにカラムの内側いっぱいに子要素を作るが、HTMLにいちいち書くのは面倒なのでjQueryで作ることにする。(マークアップよくミスする orz)
また、行ごとにカラムの高さをそろえるために、jquery.matchHeight.js を使うことにする。
ステップ2 ~ レスポンシブへの足がかり
下のCSSを加えることで、簡単に767px以下と479px以下で列数を減じてみた。
本当は列を減じるのにパーセントを変えるのでなくクラス名を変える方が筋のようだが...
参照サイト:
http://www.idia.jp/report/how-to-equally-display-the-horizontal-list/
jquery.matchHeight.js
http://brm.io/jquery-match-height/
発想は参照サイトからいただいた<(__* ただしかなり書き換えてIE8未対応の:nth-child()疑似要素も使わず、シンプルにしたつもり。列数をクラス名で指定することにしたら、モニターサイズに応じて列数を調節すればいいんじゃ?というわけで中途半端なレスポンシブCSSまで書いてみることになった(恥)。
別にリスト項目でなくても、div要素でも少しCSSを書き換えればよいと思うので、レスポンシブデザインへの足がかりにならないかと思い書いてみた。あと今一 view port というのが理解できてないので処置していない。
軽量かつ固定幅でも可変幅でも使えるグリッドCSS
sample1(固定幅)
sample2(可変幅)
sample3(簡易レスポンシブ)
固定幅レイアウトにもリキッドレイアウトにも応用できるグリッドCSSを作ってみた。特徴は、
- 個々のカラム幅をパーセントで指定するので、固定幅レイアウトにもリキッドレイアウトにも応用できる。
- カラム間の余白(ガター/溝)はピクセル単位で指定できる。
- 1行ごとにカラムの高さを揃えることができる。
- ソースの入れ子記述を最小限にした。
- IE8以降に対応。
とりあえず
1行の横並びカラムは下のような構造になる。後で、個々のカラムの内側や1行全体の外側に余白を設けるためいくつか子要素や親要素などを作り多重の入れ子になるが、最終的には下の記述のみですませたい。
カラム幅は単純にパーセントで指定し、1行のカラム幅の合計が100%になるようする。
floatで横並びさせる。
1行の横並びカラムの囲い。1カラム分のpaddingだけはみ出るので、それだけ左マージンをネガティブで広く取る。
このままではカラムの実際幅がカラム指定幅 + ガター幅になって行をはみ出してしまう。そこでカラムの実際幅 + ガター幅がカラム指定幅になるようにする。そのためにカラムを box-sizing:border-box; とする。
次にカラムの内側一杯に子要素を作る(<div class="inner">)。カラムのバックグラウンドカラーやボーダー、パディングは実際はこの子要素に対して行う。
外側にもガターを作る
上のやり方では grid の幅いっぱいにカラムが並ぶ。そこで必要に応じて、外側にもガターを作ることにする(<div class=grid-outer> </div>)。そのためには、grid を囲う親要素を作り適当なpaddingを指定すればよい。外側にガターを作りたいときもあるしそうでないときもあるので、指定することにする。つまり<div class="grid out-gutter">にだけ外側ガターを作る。
カラムの高さを揃える
好みの問題かもしれないが行ごとにカラムの高さを揃えてもよい。そのためには jquery.matchHeight.js というプラグインを使うのが簡単だ。jquery.matchHeight.js はデフォルトで行単位でブロックの高さを揃えてくれる。
使い方は下のスクリプトを記述すればよい。
ソースをシンプルにする
innerクラスやgrid-outerクラスのブロックを作ったことで、ソースが多重の入れ子になってしまった。読みやすさとマークアップ時の書き間違い防止ため、一番最初に示した単純なコードだけですませたい。
そのためにinnerクラスとgrid-outerクラスをjQueryを使って自動的に挿入するようにする。
外側のガター追加は<div class="grid out-gutter">に対して行う。
単純になったHTMLソースを再掲。
javascriptの順序があるようなので matchHeight の記述も再掲する。
レスポンシブへの足がかり
479px以下のモバイルを想定して、簡単にレスポンシブ・レイアウトにも対応させてみた。ここでは479px以下はすべてのカラムの指定幅を100%にし、1行1カラムで表示することにした。加えるCSSは、
:last-child 疑似要素(IE8非対応)を使ったということもあって、IE8も対応できるようにIE9.js とか respond.js とかを使うことも考えたが、どうせモバイルでIE8使わないだろうということでで止めた(実は少し試してみたのだが、どこが悪かったのかうまくいかなかった orz)。
参照サイト:
http://coliss.com/articles/build-websites/operation/css/css-tutorial-flexible-grid-by-css-tricks.html
https://css-tricks.com/dont-overthink-it-grids/
jquery.matchHeight.js
http://brm.io/jquery-match-height/
参照サイトのソースはほぼ同じだが、グリッドの外側にgutterなしの場合実は正しく表示されない。端のカラムだけ幅が広くなる。それと、IE8以上と書いてあるが実はうまく表示されない。CSSのlast-of-type属性がサポートされていないためであろう。
その他、ボックスの高さが揃わない、入れ子divがうっとうしいといったことがあったので作ってみた。
安全性の高いメール・リンク
メール・リンクのスパム対策だが、どうやらエンティティ化(実体参照文字列化)や単純なJavaScriptによる記述では、怪しいようだ。コチラでメールアドレス収集ロボットの解析結果が確認できる。
結局のところリンクの箇所にマウスを持っていったとき、ステータス・バーにメールアドレスが表示されるようではロボットに収集される可能性が大きいようだ。
そこで上記サイトもそうだが、安全性の高いメール・リンクを生成するツールを設置して下さっているサイトがあるので、これを利用させてもらうのが吉のようだ。3. 4. が強力なようだ。
- http://mailrobo.7jp.net/mrobo4.html
- http://www.luft.co.jp/cgi/coding.php「安全性:高」を選ぶ。
- http://www.csg.ci.i.u-tokyo.ac.jp/old-pages/yanagisawa/Sites/javascript/caesarAddress2.html
- http://www.csg.ci.i.u-tokyo.ac.jp/old-pages/yanagisawa/Sites/javascript/caesarAddress3.html
感謝。当該ページへの直リンクですみません <(_ _*>
リンクが切れると困るので 4. を自分のサイトへも設置しておいた。我ながら心配性で困ったものだ。
Let's Note(Windows7)の中古を買いました。
Let's Note(Windows7)の中古を買いました。
HTMLを書いた時、IE8でどんな風に見えるか確認するのが主な使い道です。
Let's Noteにしたのはあの丸いTouch Padが便利そうだったからです。iPodみたいにグリグリ周りをこすってスクロールする奴です。MacのノートならiBookG4の段階で2本指スクロールができるのですが、ちょっと古いWindowsだとダメみたいで、周りのみなさんがノートなのにマウスを使うのを見ていたので...
Macに慣れているせいでファイルや各種設定へアクセスが悪くて使いづらいのですが、それはオイオイ慣れていくとして、
1. フォントのギザギザが見にくい。少し小さい文字だと明朝体とゴシックの区別がつかない。
2. 等幅フォントが汚い。ゼロとオーの区別がつかない。
3. ウィンドウやタスクバーなどにグラデーションの背景が混じっているのはケバい。
あたりはとりあえずなんとかしないと使う気にならないので、まずそこらあたりを少しカスタマイズしました。
1. にはMacTypeを組み込みました。
2. にはフリーのMac版Osakaフォントを入れました。もともとアスキーアートを見るのが目的で配布されているので、中にはわざわざゼロとオーの区別しにくくしてあるものもあったりしますが、そうでないものをDLしました。
3. はちょっとググってもなかなか情報が見つからず苦労しましたが、
HKEY_CURRENT_USER\Software\Microsoft\Windows\DWM
\ColorizationGlassReflectionIntensity
の値を書き換えること(初期値:32 → 1)でなんとかクリア。
これでWin7は少しは使う気になったのですが、それにしてもIE8は何かと手を煩わせるブラウザで、もうどうしたものかと途方に暮れています。
UL画像メニューのマウスオーバー画像を切り替える
すべてのメニュー項目について、非マウスオーバー時の画像(〜〜_off.gif)とマウスオーバー時の画像(〜〜_on.gif)を用意しておき、マークアップでは初期値として、すべての画像を非マウスオーバー時の画像にしておく(〜〜_off.gif)。
jQueryのコードの意味は、
1. <li class=active>で括られているimgはマウスオーバー時の画像に切り替えておく。
2. マウスオーバーしたとき、〜〜_on.gifに切り替える。
3. マウスが離れるとき、親要素の li が active クラスでなければ、〜〜_off.gifに切り替える。
参照サイト:
http://www.webcreatorbox.com/tech/jquery-tips20/
http://klutche.org/archives/323/
簡易ソース表示jQueryプラグイン
ソース表示だが、説明が加わるときには行番号が役立つかもしれない。私としては文法を分かりやすくするハイライト表示よりも、一部の文字列をカラーで強調したいので、ハイライト表示は不要かと思う。「軽いがいい」し...
行番号はolのリストマークなのでクリップボードにコピーされない。つまりコピペでそのまま使えるということ。(ペーストで行番号まで吐き出すお世話焼きなテキストエディタもあるみたいだけど...無視。)
- <script src="jquery-1.10.2.min.js"></script>
- <script src="jquery.codeshow.js"></script>
- <script>
- $(document).ready(function() {
- $("pre.code").codeshow();
- });
- </script>
ソース表示ブロック(ここでは<pre class="code">)ではタグマークを< >にしておく必要がある。
参照サイト・作者サイト
http://htsign.hateblo.jp/entry/2014/01/16/234802
http://osumituki.com/web-front/7120.html