2015-07-14

中華料理店向けテンプレート

中華料理店向けテンプレート向けテンプレートを作ってみました。

http://qitailang.small.jp/template

2015-07-02

価格表CSS

飲食店などのwebページで価格表を表示するときのCSS

http://qitailang.small.jp/webtech/price_line/sample.html

<dl class="price">
  <dt>フィレステーキ</dt><dd>&yen;2,000</dd>
  <dt class="description">A5ランクの神戸牛を使っています</dt>
  <dt>フォアグラのソテー</dt><dd>&yen;2,000</dd>
  <dt>白身魚のムニエル</dt><dd>&yen;2,000</dd>
  <dt>伊勢エビのソテー甲殻類のソース</dt><dd>&yen;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 f:id:idqtl:20150713083633g:plain 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>

2015-06-13

連続するリスト項目を１〜８列に等間隔カラムで表示する。

Template WebDesign

sample1
sample2（簡易レスポンシブ - 479px以下１カラム表示）

ステップ１

リスト構造は下のように単純なものである。これを短いCSSで均等に横並びカラムで表示することにする。

<div id="item-list">
  <ul class="cols-3">
    <li>商品01</li>
    <li>商品02</li>
    <li>商品03</li>
    <li>商品04</li>
    <li>商品05</li>
    <li>商品06</li>
  </ul>
</div>

リスト項目を１列から８列表示までできるようにするとき、何列で表示するかを class="cols-3" のようにクラス名で指定することにする。

/* 簡便に...すべての余白を0に、box-sizing を border-boxに
* {  
  margin:0;
  padding:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#item-list {
  background:#ccc;
  padding:20px 10px 0 10px;
  margin-bottom:20px;
}

#item-list ul{
  margin-left:-20px;/*１カラムのpadding分マイナスマージン*/
  overflow:hidden;
  background-color:transparent;
}

#item-list ul li {
  list-style-type:none;
  float:left; /*floatで横並びに*/
  padding-left:20px;/*カラム間のガター*/
  margin-bottom:20px;
  text-align:center;
}

ul.cols-1 li {width: 100%;}
ul.cols-2 li {width: 50%;}
ul.cols-3 li {width: 33.33333%;}
ul.cols-4 li {width: 25%;}
ul.cols-5 li {width: 20%;}
ul.cols-6 li {width: 16.66666%;}
ul.cols-7 li {width: 14.28571%;}
ul.cols-8 li {width: 12.5%;}

.inner{ /*カラムの内側*/
  margin:0;
  height:100%;
  background:white;
}

カラムの幅は単純にパーセントで指定する (^^ 計算きらい～

カラムの背景色やボーダーなどで装飾するためにカラムの内側いっぱいに子要素を作るが、HTMLにいちいち書くのは面倒なのでjQueryで作ることにする。（マークアップよくミスする orz)

また、行ごとにカラムの高さをそろえるために、jquery.matchHeight.js を使うことにする。

<script type = "text/javascript" src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript" src = "jquery.matchHeight.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
  $("#item-list ul li").wrapInner("<div class='inner'></div>");
  $("#item-list ul li >.inner").matchHeight();
});
</script>

ステップ２～レスポンシブへの足がかり

下のCSSを加えることで、簡単に767px以下と479px以下で列数を減じてみた。

@media only screen and (max-width: 767px) {
  ul.cols-4 li,ul.cols-5 li,ul.cols-6 li,ul.cols-7 li,ul.cols-8 li{
    width: 33%;/*４列以上は３列に*/
  }
  ul.cols-3 li{
    width:50%;/*３列は２列に*/
  }
}

@media only screen and (max-width: 479px) {
  ul[class*='cols-'] > li{
    width: 100%;/*すべて１列に*/
  }
}

本当は列を減じるのにパーセントを変えるのでなくクラス名を変える方が筋のようだが...

参照サイト：
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 というのが理解できてないので処置していない。

2015-06-07

軽量かつ固定幅でも可変幅でも使えるグリッドCSS

Template WebDesign

sample1（固定幅）
sample2（可変幅）
sample3（簡易レスポンシブ）

固定幅レイアウトにもリキッドレイアウトにも応用できるグリッドCSSを作ってみた。特徴は、

個々のカラム幅をパーセントで指定するので、固定幅レイアウトにもリキッドレイアウトにも応用できる。
カラム間の余白（ガター/溝）はピクセル単位で指定できる。
１行ごとにカラムの高さを揃えることができる。
ソースの入れ子記述を最小限にした。
IE8以降に対応。

とりあえず

１行の横並びカラムは下のような構造になる。後で、個々のカラムの内側や１行全体の外側に余白を設けるためいくつか子要素や親要素などを作り多重の入れ子になるが、最終的には下の記述のみですませたい。

<div class="grid">
  <div class="col-2-3">2/3幅</div>
  <div class="col-1-3">1/3幅</div>
</div>

カラム幅は単純にパーセントで指定し、１行のカラム幅の合計が100%になるようする。

.col-1-3 {width: 33.33%;}
.col-2-3 {width: 66.66%;}
.col-1-2 {width: 50%;}
.col-1-4 {width: 25%;}

floatで横並びさせる。

[class*='col-'] {
  float: left;
  padding-left: 20px;/*ガター幅*/
}

１行の横並びカラムの囲い。１カラム分のpaddingだけはみ出るので、それだけ左マージンをネガティブで広く取る。

.grid{
  margin:0 0 20px -20px;
  /*左マージンを１カラムpadding分広く取る。次の行との隙間を下マージンで取る。*/
  overflow:hidden;/*フロート解除*/
  background-color:transparent;/*ネガティブマージンだと要素が重なるので透明に*/
}

このままではカラムの実際幅がカラム指定幅 + ガター幅になって行をはみ出してしまう。そこでカラムの実際幅 + ガター幅がカラム指定幅になるようにする。そのためにカラムを box-sizing:border-box; とする。

[class*='col-']{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

次にカラムの内側一杯に子要素を作る(<div class="inner">)。カラムのバックグラウンドカラーやボーダー、パディングは実際はこの子要素に対して行う。

<div class="grid">
  <div class="col-2-3"><div class="inner">2/3幅</div></div>
  <div class="col-1-3"><div class="inner">1/3幅</div></div>
</div>

.inner{
  margin:0;  
  height:100%;
  background:#ccc;/*背景色*/
  color:#000;/*文字色*/
  padding:.5em;/*カラムの内側の余白/
}

外側にもガターを作る

上のやり方では grid の幅いっぱいにカラムが並ぶ。そこで必要に応じて、外側にもガターを作ることにする（<div class=grid-outer> </div>）。そのためには、grid を囲う親要素を作り適当なpaddingを指定すればよい。外側にガターを作りたいときもあるしそうでないときもあるので、指定することにする。つまり<div class="grid out-gutter">にだけ外側ガターを作る。

<div class="grid-outer">
  <div class="grid out-gutter">
    <div class="col-2-3"><div class="inner">2/3幅</div></div>
    <div class="col-1-3"><div class="inner">1/3幅</div></div>
  </div>
</div>

.grid-outer{
  margin:0 0 20px 0;
  padding:20px;
  background:#888;
}
.grid-outer > .grid{
  margin-bottom:0;/*次の行との余白はgrid-outerクラスのブロックが受け持つのでgridクラスは下のマージンが不要*/
}

カラムの高さを揃える

好みの問題かもしれないが行ごとにカラムの高さを揃えてもよい。そのためには jquery.matchHeight.js というプラグインを使うのが簡単だ。jquery.matchHeight.js はデフォルトで行単位でブロックの高さを揃えてくれる。

使い方は下のスクリプトを記述すればよい。

<script type = "text/javascript" src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript" src = "jquery.matchHeight.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
  $("div[class*='col-']>.inner").matchHeight();/*div[class*='col-']だとborder-bottomが消える？*/
});
</script>

ソースをシンプルにする

innerクラスやgrid-outerクラスのブロックを作ったことで、ソースが多重の入れ子になってしまった。読みやすさとマークアップ時の書き間違い防止ため、一番最初に示した単純なコードだけですませたい。

そのためにinnerクラスとgrid-outerクラスをjQueryを使って自動的に挿入するようにする。

外側のガター追加は<div class="grid out-gutter">に対して行う。

単純になったHTMLソースを再掲。

<div class="grid">
  <div class="col-2-3">2/3幅</div>
  <div class="col-1-3">1/3幅<br>高さが揃う</div>
</div>
<div class="grid out-gutter">
  <div class="col-2-3">2/3幅</div>
  <div class="col-1-3">1/3幅<br>高さが揃う</div>
</div>

javascriptの順序があるようなので matchHeight の記述も再掲する。

<script type = "text/javascript" src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript" src = "jquery.matchHeight.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
  $("div[class*='col-']").wrapInner("<div class='inner'></div>");
  $(".out-gutter").wrap("<div class='grid-outer'></div>");
  $("div[class*='col-']>.inner").matchHeight();
});
</script>

レスポンシブへの足がかり

479px以下のモバイルを想定して、簡単にレスポンシブ・レイアウトにも対応させてみた。ここでは479px以下はすべてのカラムの指定幅を100%にし、１行１カラムで表示することにした。加えるCSSは、

@media only screen and (max-width: 479px) {
  body{
    margin:0 10px;
  }
  [class*='col-']{
    width:100%;
    clear:left;
    margin-bottom:20px;
  }  
  .grid >div[class*='col-']:last-child {
    margin-bottom: 0;
  }
}

: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がうっとうしいといったことがあったので作ってみた。

2015-04-22

安全性の高いメール・リンク

WebTech

メール・リンクのスパム対策だが、どうやらエンティティ化（実体参照文字列化）や単純なJavaScriptによる記述では、怪しいようだ。コチラでメールアドレス収集ロボットの解析結果が確認できる。

結局のところリンクの箇所にマウスを持っていったとき、ステータス・バーにメールアドレスが表示されるようではロボットに収集される可能性が大きいようだ。

そこで上記サイトもそうだが、安全性の高いメール・リンクを生成するツールを設置して下さっているサイトがあるので、これを利用させてもらうのが吉のようだ。3. 4. が強力なようだ。

感謝。当該ページへの直リンクですみません <(_ _*>
リンクが切れると困るので 4. を自分のサイトへも設置しておいた。我ながら心配性で困ったものだ。

2015-04-16

Let's Note（Windows7）の中古を買いました。

日記 Windows

Let's Note（Windows7）の中古を買いました。

f:id:idqtl:20150618113938j:plain

HTMLを書いた時、IE8でどんな風に見えるか確認するのが主な使い道です。

Let's Noteにしたのはあの丸いTouch Padが便利そうだったからです。iPodみたいにグリグリ周りをこすってスクロールする奴です。MacのノートならiBookG4の段階で２本指スクロールができるのですが、ちょっと古いWindowsだとダメみたいで、周りのみなさんがノートなのにマウスを使うのを見ていたので...

Macに慣れているせいでファイルや各種設定へアクセスが悪くて使いづらいのですが、それはオイオイ慣れていくとして、

1. フォントのギザギザが見にくい。少し小さい文字だと明朝体とゴシックの区別がつかない。
2. 等幅フォントが汚い。ゼロとオーの区別がつかない。
3. ウィンドウやタスクバーなどにグラデーションの背景が混じっているのはケバい。

あたりはとりあえずなんとかしないと使う気にならないので、まずそこらあたりを少しカスタマイズしました。

1. にはMacTypeを組み込みました。
2. にはフリーのMac版Osakaフォントを入れました。もともとアスキーアートを見るのが目的で配布されているので、中にはわざわざゼロとオーの区別しにくくしてあるものもあったりしますが、そうでないものをDLしました。
3. はちょっとググってもなかなか情報が見つからず苦労しましたが、
HKEY_CURRENT_USER\Software\Microsoft\Windows\DWM
\ColorizationGlassReflectionIntensity
の値を書き換えること（初期値：32 → 1）でなんとかクリア。

f:id:idqtl:20150618114425p:plain

これでWin7は少しは使う気になったのですが、それにしてもIE８は何かと手を煩わせるブラウザで、もうどうしたものかと途方に暮れています。

2014-11-16

UL画像メニューのマウスオーバー画像を切り替える

WebDesign Template

sample、sample2(フェード効果あり)

<ul id="menu">
  <li class=active><a href="#"><img src="images/menu_01_off.gif" width=360 height=40 /></a></li>
  <li><a href="#"><img src="images/menu_02_off.gif" width=360 height=40 /></a></li>
  <li><a href="#"><img src="images/menu_03_off.gif" width=360 height=40 /></a></li>
  <li><a href="#"><img src="images/menu_04_off.gif" width=360 height=40 /></a></li>
  <li><a href="#"><img src="images/menu_05_off.gif" width=360 height=40 /></a></li>
</ul>

すべてのメニュー項目について、非マウスオーバー時の画像(〜〜_off.gif)とマウスオーバー時の画像(〜〜_on.gif)を用意しておき、マークアップでは初期値として、すべての画像を非マウスオーバー時の画像にしておく(〜〜_off.gif)。

ul#menu{
  list-style:none;
}
ul#menu li{
  margin-bottom:10px;
}
img{
  border:none;
}
a:focus { /*FireFox用*/
  outline: none;
}
a img{ /*FireFox用*/
  border: none;
}

 <script type = "text/javascript">
  $(document).ready(function() {
  $('#menu li.active img').each(function(){
    $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
  });
  $('#menu img').hover(function(){
    $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
    }, function(){
    if (!$(this).parents("li").hasClass('active')) {
      $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
    }
  });
});
</script>

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/

Qitailangのブログ

Webデザイン、碁、Esperanto、自然農法的家庭菜園

中華料理店向けテンプレート

価格表CSS

連続するリスト項目を１〜８列に等間隔カラムで表示する。

ステップ１

ステップ２～レスポンシブへの足がかり

軽量かつ固定幅でも可変幅でも使えるグリッドCSS

とりあえず

外側にもガターを作る

カラムの高さを揃える

ソースをシンプルにする

レスポンシブへの足がかり

安全性の高いメール・リンク

Let's Note（Windows7）の中古を買いました。

UL画像メニューのマウスオーバー画像を切り替える

ステップ１

ステップ２ ～ レスポンシブへの足がかり

とりあえず

外側にもガターを作る

カラムの高さを揃える

ソースをシンプルにする

レスポンシブへの足がかり

ステップ２～レスポンシブへの足がかり