Stainless Note

[stainless-note]

デスクトップ・タブレット・スマフォ向けのレスポンシブ対応サイトを作成する超軽量（19KB）のスタンドアローンのスクリプトを紹介します。

jQueryなどの他のスクリプトは必要なく、外部スタイルシートも必要ありません。 ※ページの各エレメントの装飾にはCSSを用意してください。

skel.js

skel.jsの特徴

skel.jsはjQueryなどの他のライブラリや外部スタイルシートを用意しないで、レスポンシブ用のページが簡単に作成できます。

スタンドアローンで動作する19KBの超軽量スクリプト。

さまざまなレイアウトに対応できるグリッド。

表示サイズごとのブレイクポイントの設定も簡単。

resetやbox-modelなどの有用なCSSのショートカットを用意。

プラグイン機能も備えているので、拡張にも対応。

skel.jsの使い方

jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="skel.js"></script>

jQueryもスタイルシートも他のファイルは必要ありません。

Step 2: スクリプトのセットアップ

スクリプトのセットアップします。 まずは、基本の書式から。

<script src="skel.js">

{

  preset:name_of_preset

}

</script>

presetで、レスポンシブのブレイクポイントやグリッドなどの指定をします。

<script src="skel.js">

{

  prefix: "style",

  resetCSS: true,

Resets default browser styles.

  boxModel: "border",

  grid: { gutters: 1 },

  breakpoints: {

    wide: { range: "1300-", containers: 1280, grid: { gutters: 2 } },

    narrow: { range: "-1299", containers: "fluid", grid: { gutters: 2 } },

    narrow960: { range: "-960" },

    narrow740: { range: "-740" },

    narrow460: { range: "-460", grid: { collapse: true } }

  }

}

</script>

[stainless-note]

Phonegapで作った割勘アプリ（iOS/Android）をリリースしました。

「Phonegap」って？

アプリをHTML＆Javascriptで作っちゃおうっ！という、 クロスプラットフォーム・モバイルアプリケーションの開発フレームワーク。

普通は、iPhoneアプリならObjective-C、androidアプリならJavaと、 OSによってアプリの作り方もプログラム言語が違う。

だから、iOS版とandroid版のアプリを作ろうとすると、倍の学習コスト＆開発コストが掛かってしまう。

そこで、Phonegapのようなフレームワークを利用することで、ソースの一部を共通化することができて、 コストを下げ、開発スピードを飛躍的に向上することもできる。

・・・と良い事ずくめで、近頃（というかだいぶ前から）話題のPhonegapを使ってアプリを作ってみることにした。

まぁ実際には、対応機能の制約とか処理速度とか問題はないわけじゃない、広告なんかを表示するにはネイティブコードの知識も必要。 「なんでもできる」じゃなくて「割とできる」、という印象。 でも、ネイティブソースをゴリゴリ書くよりもずっと楽チンにアプリが作れたことに感動した！

割勘Ex 〜わりかんエクスプレス〜

普通に割勘するだけなら、電卓でもできる。

でもちょっとややこしい場合、例えば・・・

マネージャーは１万円払う。 3人の正社員は普通より1000円多く払って、 2人の契約社員は普通に割勘。 5人のアルバイト（アルコールあり）は2000円ずつ、 2人のアルバイト（アルコールなし）は1500円ずつ、払う。

・・・こんな条件でもきちっと計算できるアプリ、 それが「割勘Ex 〜わりかんエクスプレス〜」です。

割勘Ex 〜わりかんエクスプレス〜

割勘Ex 〜わりかんエクスプレス〜

単純な割勘から、複数条件を指定した複雑な計算まで、 すぐに使える割勘計算アプリ。

価格：無料

[stainless-note]

EC-CUBEの管理画面で「更新情報の取得に失敗しました。」というエラーが出たら？

「更新情報の取得に失敗しました。」はよくあるエラー

何度となく遭遇して、その都度対処してるんだけど、毎回対処法を検索してるので、 ちょっとまとめておこうと思う。

更新情報の取得に失敗しました というメッセージが表示される http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=2207&forum=11

ほとんどここに書いてある通りにすればいい。 けど、このままだとエラーのままのときがある。

対処法がうまく機能しない？

デフォルトのコードは、「file_get_contents()」で更新情報を取得してる。 それが失敗してるのでエラーになる。

上記のコミニティで紹介されているのは、「file_get_contents()」で失敗したときに、 代わりに「fsockopen()」を使って更新情報を取得しようという試み。 取得自体はそれでできてる。

問題は、取得後のHTTPステータスコードによる分岐。 実際に取得したのは「HTTP/1.1 302 Found」、これはコミニティの修正コードでは想定されていない。 そのため、取得失敗とみなしてしまっているようだった。

そこで、私が再度修正したのが下記のコード。

/** * リリース情報を取得する. * * @return array 取得した情報配列 */ function lfGetInfo() { // 更新情報の取得ON/OFF確認 if (!ECCUBE_INFO) return array(); // パラメーター「UPDATE_HTTP」が空文字の場合、処理しない。 // XXX これと別に on/off を持たせるべきか。 if (strlen(UPDATE_HTTP) == 0) return array(); $query = ''; // サイト情報の送信可否設定 // XXX インストール時に問い合わせて送信可否設定を行うように設定すべきか。 // XXX (URLは強制送信すべきではないと思うが)バージョンは強制送信すべきか。 if (UPDATE_SEND_SITE_INFO === true) { $query = '?site_url=' . HTTP_URL . '&eccube_version=' . ECCUBE_VERSION; } $url = UPDATE_HTTP . $query; // タイムアウト時間設定 $context = array('http' => array('timeout' => HTTP_REQUEST_TIMEOUT)); $jsonStr = @file_get_contents($url, false, stream_context_create($context)); // ここから if( empty($jsonStr) ) { $jsonStr = $this->do_get($url); } // ここまで追加 $arrTmpData = is_string($jsonStr) ? SC_Utils_Ex::jsonDecode($jsonStr) : null; if (empty($arrTmpData)) { SC_Utils_Ex::sfErrorHeader(">> 更新情報の取得に失敗しました。"); return array(); } $arrInfo = array(); foreach ($arrTmpData as $objData) { $arrInfo[] = get_object_vars($objData); } return $arrInfo; } // ここから function do_get($url) { $res = $this->get_contents($url); $res_array = explode("\r\n", $res); switch ($res_array[0]) { case 'HTTP/1.0 200 OK': case 'HTTP/1.1 200 OK': $ra = explode("\r\n\r\n", $res, 2); $res = $ra[1]; break; case 'HTTP/1.1 302 Found'://追記したところ case 'HTTP/1.1 302 MovedTemporarily': foreach ($res_array as $res_row) { if (strstr($res_row, 'Location: ')) { $crr_url = str_replace('Location: ', '', $res_row); break; } } $res = $this->get_contents($crr_url); $ra = explode("\r\n\r\n", $res, 2); $res = $ra[1]; break; default: $res = ''; } return $res; } function get_contents($url) { $url_array = parse_url($url); $host = $url_array['host']; $path = $url_array['path']; if (array_key_exists('port', $url_array)) { $port = $url_array['port']; } else { switch ($url_array['scheme']) { case 'http': $port = 80; break; } } $query = $url_array['query']; $res = false; if (isset($host) && isset($port)) { $fp = fsockopen($host, $port, $errno, $errstr, 30); if ($fp) { $req = "GET " . $path . "?" . $query . " HTTP/1.0\r\n" . "Host: " . $host . "\r\n" . "\r\n"; socket_set_timeout($fp, 10); if (fputs($fp, $req, strlen($req))) { $res = ''; while (!feof($fp)) { $res .= fgets($fp); } } fclose($fp); } } return $res; } // ここまで追加

といっても、修正コードの58行目に1行を追加しただけ。

[stainless-note]

DISQUSを使う

[stainless-note]

-webkit-tap-highlight-color: rgba(0, 0, 0, 0)

iPhoneやAndroidでリンクなどの要素をタップしたときに、iPhoneでは薄いグレー、Androidでは緑やオレンジの枠がデフォルトで表示されます。 -webkit-tap-highlight-colorというプロパティに色を指定することで、この枠の色を変えることができます。 ハイブリッドアプリを作成する際には、この枠が出ると如何にもWebっぽくなってしまうため、透明色を-webkit-tap-hightlight-colorに指定して、枠が表示されないようにしています。

* {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

リストの項目など、敢えて選択時に色を付けたい場合には、個別にtap-hightlight-colorを指定するといいかと思います。

-webkit-touch-callout: none

iOSでリンクを長押しした際に表示されるポップアップメニューを消すためにこのプロパティを設定しています。 ポップアップメニューが出るとネイティブっぽくないですもんね

* {

    -webkit-touch-callout: none;

}

-webkit-user-select: none

スマホのヘッダやフッター、またはボタンなどの要素の文字列や画像を選択してコピーできてしまうと、一気にネイティブっぽくなくなりますよね。 そんなときには、-webkit-user-selectにnoneを設定することで、要素を選択できなくすることができます。

* {

    -webkit-user-select: none;

}

ただし、このままだと、input要素で文字入力ができなくなってしまったり、何かと不都合があるので、ユーザーからの選択を許可したい箇所には、以下のように-webkit-user-selectにautoを入れて選択できるようにする必要があります。

input[type=text] {

    -webkit-user-select: auto;

}

もしくは、以下のように最初からinputは対象外にするのもいいかもです。

*:not(input){

    -webkit-user-select: none;

}

-webkit-overflow-scrolling: touch

スマホのネイティブアプリの特徴の1つに、コンテンツの慣性スクロールがあると思います。 -webkit-overflow-scrollingプロパティにtouchを指定することで、オーバーフローしたコンテンツに対して慣性スクロールを適用することができます。

div.contents-ga-overflow-suruyo {

    -webkit-overflow-scrolling: touch;

}

ただ、慣性スクロールは非常に重い処理になるので、端末とコンテンツによっては動きがガクガクになる場合があります(iPhone3GS、iPhone4など)。 そういう場合には、コンテンツにGPUアクセラレーションを効かせるために、以下の指定を入れます。

div.contents-ga-overflow-suruyo > * {

    -webkit-transform: translateZ(0px);

}

今回は-webkit-transform: translateZ(0px)を指定していますが、GPUアクセラレーションを効かせることが出来る指定なら、なんでもいいかと思います。 ただ、iOS6からは、「-webkit-transform: preserve-3d」ではGPUアクセラレーションが効かなくなっているので、それだけは要注意です。

box-sizing: border-box

これはハイブリッドアプリに限ったものではないのですが、ハイブリッドアプリを作成する際には、必ずこの指定を全ての要素に対して入れるようにしています。

* {

  box-sizing: border-box;    

}

box-sizingとは、ボックスの大きさの算出方法を指定するためのプロパティです。 box-sizingには、「content-box」と「border-box」の二種類の値を指定することができます。 content-boxを指定すると、ボックスの幅と高さには、罫線とpaddingの値は含みません。 box-sizingを指定しない場合と同じ扱いになります。 border-boxを指定すると、ボックスの幅と高さに、罫線とpaddingの値を含みます。 わかりにくいので、例として、以下の要素で説明します。

div {

    width: 100px;

    height: 100px;

    border: 1px solid #000;

    padding: 10px;

}

box-sizingにcontent-boxを指定した場合、divの幅と高さは122pxになります。 box-sizingにborder-boxを指定した場合、divの幅と高さは100pxになります。 CSSでwidthやheightを指定する際に、paddingとborderの幅を考慮しなくてよくなるため、非常に快適です。

[stainless-note]

IEのバージョン7では、display: table-cell に対応していないため、画像がボックス内の上に配置されてしまいます。

あまりハックとかせずに、簡単にIE7以下でも対応できないかなとIE独自拡張をいろいろ調べてみたところ、いいのがありました。

layout-grid-line プロパティ

このプロパティ。IEが独自に先行実装していたプロパティで、行の高さを指定する際に使用するものです。また、IE5以上から使えるとのこと。

デフォルト値は、none になっているようなので none以外の値を設定します。今回のサンプルでは、高さ400px なのでその値を設定。

01.box .image {

02    display: table-cell;

03    width: 400px;

04    height: 400px;

05    line-height: 400px;

06    background: #CCCCCC;

07    vertical-align: middle;

08    text-align: center;

09    layout-grid-line: 400px; /* IE7以下 */

10}

なお、IE8以上では 標準モードで表示するとこの値が無効になるようです。

[stainless-note]

jQueryで画像の横幅・高さが取得できなかった時の処方箋

jQueryで画像の高さを取得しようとしたら失敗してしまった

複数の画像の高さを取得して、レイアウトを調整しようとしたのだがうまくいかない。 その時のHTMLは以下↓のようになっていた。

<div id="photo_list"> <img src="photo1.jpg" width="100" /> <img src="photo2.jpg" width="100" /> <img src="photo3.jpg" width="100" /> </div>

javascript（jQuery）はこう↓

$(function(){ var photos = $('#photo_list img'); var max_height = 0; $.each(photos,function(){ if( max_height < $(this).height() ){ max_height = $(this).height(); } }); $('#photo_list').height(max_height); });

画像をfloatで横並びにしたので、その親要素の高さを画像の中で一番大きいサイズに合わせたかった。 が、高さの取得結果がまさかの「0」。

ちなみに、読み込まれる画像は動的に変化するため高さを予め指定することはできない。 横幅（width）のみを指定してるので、ブラウザの自動リサイズによって高さが決まる。

試しに、$(this).width();で横幅を取得してみると、こちらは「100」と正常に返ってくる。

これは、横幅は明示的に指定していて、高さは指定していないから。 ・・・ということなのだろう。 ん〜じゃあどうしたらいいの？っとググッてみると、対処法がわかった。

jQueryで画像の高さを取得するための処方箋

画像をサイズ指定をしていない場合、 『画像のサイズが決まるのは、画像が読み込まれてから』 だから、読み込まれてから取得すればいい。

javascriptをこう↓書き換えた

$(function(){ var max_height = 0; $('#photo_list img').bind('load',function(){ if( max_height < $(this).height() ){ max_height = $(this).height(); $('#photo_list').height(max_height); } }); });

この場合ループ処理(each)は使わない。なぜならbindした関数は、 それぞれの画像が読み込み終わったときに、バラバラに実行されるから。

$(function(){}); を使ってるから、読み込みが終わってから実行してるはず！ なんて最初は思っていたが、これは「DOMが読み込まれてから」であって 「画像が読み込まれてから」ではないんだね。

あと、CSSでサイズ指定してるときは、最初のコードでも取得できる。

<style> #photo3{ width:100px; height:100px; } </style> <div id="photo_list"> <img src="photo1.jpg" width="100" height="100" /> <img src="photo2.jpg" width="100" /> <img src="photo3.jpg" id="photo3" /> </div>

つまりこの場合、photo1とphoto3は高さと横幅、どちらも取得できる。 photo2は横幅は取得できるが、高さはloadをbindするやり方が必要になるってこと。

[stainless-note]

Dropzone.js ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」。 最近ではあたり前になってきているドラッグ＆ドロップのアップローダーが簡単実現出来ます。 同時アップロード数やアップ時のサムネイルサイズ、フォールバック関数設定等のカスタマイズができるようです

[stainless-note]

初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click();のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。

on() ひとつで bind() live() delegate() を表せる

jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。

.foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。

bind()

$('.foo').bind('click', function(){...}); は $('.foo').click(function(){...});と同じ意味で、ごく普通の基本的なイベント設定方法です。 その要素に対してイベントが発生したら何かするという感じ。

$('.foo').bind('click', function(){...}); $('.foo').unbind('click');

これを on() で書くとこうなります。

$('.foo').on('click', function(){...}); $('.foo').off('click');

一緒だったらわざわざ on() なんて使わずに click() でいいじゃんと思うかもしれませんが、このあとの話で on() にするメリットが出てきます。

delegate()

delegate() は、イベントを設定するのは親の要素に対して行います。delegate() の 1 番目の引数で、実際にクリックする要素 .foo を指定しますが、イベントが張り付いているのは親の .parent です。そして、 .parent の中にある .foo だけがクリックイベントの発生する対象となります。このように、親要素に対してイベントを設定することを、イベントデリゲートと言います。

最初に HTML が描画された後に、JavaScript によって要素を追加した場合、bind() でイベントを設定している場合は、後から追加された要素にはそのイベントが効きません。でも、delegate() の場合は、後から追加した要素にもちゃんとイベントを適用できます。

$('.parent').delegate('.foo', 'click', function(){...}); $('.parent').undelegate('.foo', 'click');

これを on() で書くとこうなります。

$('.parent').on('click', '.foo', function(){...}); $('.parent').off('click', '.foo');

live()

live() も delegate() と同じように、JavaScript を使って後から追加した要素に対してもイベントを設定できます。delegate() との違いは、イベントを設定する対象が document になります。でも、書き方は次のように .foo に対してイベントを設定しているように書きます。でも実際にイベントが設定されているのは document です。分かりにくい・・！

$('.foo').live('click', function(){...}); $('.foo').die('click');

これを on() で書くとこうなります。

$(document).on('click', '.foo', function(){...}); $(document).off('click', '.foo');

on() の書き方の方が、実際の挙動と見た目が一致していて分かりやすいです。あと、die() って名前、live() と対になってるのが分かりにくい気がする。英語できないからでしょうか・・。

ひとつの要素に複数のイベントを設定

$('.foo').click() のような書き方の場合、 ひとつの要素に対して複数のイベントを設定できませんが、on() を使えば可能です。ちなみに、bind() でも同じことができます。

ひとつの要素に、同じ処理をする複数のイベントを設定

on() のひとつ目の引数を、スペース区切りで複数指定することで、どのイベントが発生しても同じ処理をさせることができます。

$('.foo').on('click blur', function(){...});

ひとつの要素に、別々の処理をする複数のイベントを設定

on() の中身を連想配列にすることで、イベントごとに異なる処理を記述できます。

$('.foo').on({ 'mouseenter': function(){...}, 'mouseleave': function(){...} });

イベントデリゲートで複数イベントを設定する

イベントの連想配列の後に、カンマで区切ってイベント対象の要素を指定します。

$('.parent').on({ 'mouseenter': function(){...}, 'mouseleave': function(){...} }, '.foo');

delegate() と live() は今後廃止される

すでに live() と die() は jQuery 1.9 で廃止されました。 delegate() も今後なくなる予定だそうなので、今からちゃんと on() で書いたほうがよさそうです。

[stainless-note]

リストの最初と最後だけ違うスタイルを適用したいときのCSS

リストの最初と最後だけ違うスタイルを適用したいとき

前回の・・・

リストの最初だけ違うスタイルを適用したいときのCSS

これの応用編。

例えば、こんな風に、リストの１つ１つの項目が枠線で囲まれてる場合にどうするか？ しかも、境界線部分が点線、それ以外は実線になっているなら。

<ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> <li>メニュー５</li> </ul>

HTMLは↑こんな感じ。

リストの最初と最後にクラスを指定する。

「:first-child疑似クラス」と「:last-child疑似クラス」を使う。

「:last-child疑似クラス」の代わりに「expression」を使う。

jQueryを使う。

ULに枠を付ける。

思いついたのはこの5つの方法。

HTMLのタグを修正できる場合

リストの最初と最後にクラスを指定すればいい。

<ul> <li class="first">メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> <li class="last">メニュー５</li> </ul>

HTMLをこうして。

li{ border:solid 3px #F00; border-top-style:none; border-bottom-style:dotted; } li.first{ border-top-style:solid; } li.last{ border-bottom-style:solid; }

CSSをこうする。

一番シンプルでわかりやすい方法。 問題は、HTMLを修正せずにこれと同じ表現をする方法なんだよね。

「:first-child疑似クラス」と「:last-child疑似クラス」を使う。

「:first-child疑似クラス」と「:last-child疑似クラス」を使えば、CSSの修正だけで対応することができる。

li{ border:solid 3px #F00; border-top-style:none; border-bottom-style:dotted; } li:first-child{ border-top-style:solid; } li:last-child{ border-bottom-style:solid; }

CSSをこうすればいい。

ただし、この方法はIE8では機能しない。

なぜなら、「:last-child疑似クラス」を使えるのはCSS３以降。 つまりIE8以下だと利用できないので注意が必要。

※「:first-child疑似クラス」はCSS２以降から使えるので、 IE7以降なら利用できる。

「:last-child疑似クラス」の代わりに「expression」を使う

CSS のIE独自拡張である expression 関数を使えばIE6、IE7に対応できる

もうlast-childとfirst-childくらい使いたい - oogattaの勉強日記

http://d.hatena.ne.jp/oogatta/20100218/1266483449

こちらの記事を参考にさせてもらった。

li{ border:solid 3px #F00; border-top-style:none; border-bottom-style:dotted; } li:first-child{ border-top-style:solid; } li:last-child{ border-bottom-style:solid; } li{ border-bottom-style:expression((this.__isLastChild = (this.parentNode.children.item(this.parentNode.children.length-1) == this))?'solid':'dotted'); }

CSSはこんな感じ。

IE独自拡張なので他のブラウザでは機能しない。 また、IE9以降ではサポートしていない機能でもある。 「:last-child疑似クラス」と併用することで、IE6,IE7,とその他のブラウザに対応することができる。

そして、IE8の互換モードでは動作するが、標準モードでは動作しない。

つまり、IE8の標準モードでは動作しない。

IE8ってこんなに残念な子だったっけ？

jQueryを使う

IE8で、CSSだけで、最後の要素を指定する方法が思いつかないので、Javascriptに頼ってみる。

jQuery(function(){ jQuery('li:last-child').css('border-bottom-style','solid'); });

何かとても大切なモノを失った気持ちにもなったけど、もうどうしょうもない。

とりあえずは、これと上記の『「:first-child疑似クラス」と「:last-child疑似クラス」を使う。』CSSを併用すれば、ほぼ全てのブラウザに対応できる。

ちなみに、「jQuery('li:last-child').addClass('last');」とかして、 スタイルの指定はCSS側でしようとしたんだが、 どうやら、IE8ではaddClass()が使えないらしい。

ULに枠を付ける。

今回のデザイン限定だけど、<ul>タグの方にborderを指定すれば、CSSの編集のみで対応することができる。

ul{ width:112px; padding:0; list-style:none; border-bottom:solid 3px #F00; } li{ margin:0; border:solid 3px #F00; border-bottom-style:none; border-top-style:dotted; } li:first-child{ border-top-style:solid; }

ポイントは、ulのpaddingは0にして、liのmarginも0にすること。 こうしないと枠の位置がズレてしまう。

これなら、IE7でもIE8でも問題ないハズ。

しかし、なんていうか今回はIE8の問題児っぷりを痛感した。

関連記事

リストの最初だけ違うスタイルを適用したいときのCSS

[stainless-note]

リストの最初だけ違うスタイルを適用したいときのCSS

リストの最初だけ違うスタイルを適用したいとき

例えば、こんな風に、リストの１つ１つの項目が枠線で囲まれてる場合にどうするか？

※ただし、項目の境界線部分は１本の線になってる。

<ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> <li>メニュー５</li> </ul>

HTMLは↑こんな感じ。

リストの１つ目にクラスを指定する。

:first-child疑似クラスを使う。

隣接セレクタを使う。

思いついたのはこの３つの方法。

HTMLのタグを修正できる場合

リストの１つ目にクラスを指定すればいい。

<ul> <li class="first">メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> <li>メニュー５</li> </ul>

HTMLをこうして。

li{ border:solid 3px #F00; border-top-style:none; } li.first{ border-top-style:solid; }

CSSをこうする。

一番シンプルでわかりやすい方法だと思う。 問題は、HTMLを修正せずにこれと同じ表現をする方法だ。

ちなみに、リストの最後にクラスを指定しても、 同じように枠線を付けることはできる。

<ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> <li class="last">メニュー５</li> </ul>

HTMLをこうして。

li{ border:solid 3px #F00; border-bottom-style:none; } li.last{ border-bottom-style:solid; }

CSSをこうする。

だけど、これはあまりオススメしない。

なぜなら、リストの項目が最後尾に追加されたとき、 クラスの指定も書き換えなければいけないから。

HTMLを修正せずに、CSSだけで枠線を付ける。「:first-child疑似クラス」編

「:first-child疑似クラス」を使えば、CSSの修正だけでも対応することができる。

「:first-child疑似クラス」とは、 ある要素内で最初に書かれている子要素にスタイルを適用させる指定方法。

li{ border:solid 3px #F00; border-top-style:none; } li:first-child{ border-top-style:solid; }

CSSをこうすればいい。

ちなみに、「:last-child疑似クラス」を使うやり方もある。

li{ border:solid 3px #F00; border-bottom-style:none; } li:last-child{ border-bottom-style:solid; }

ただし、「:last-child疑似クラス」を使えるのはCSS３以降。 つまりIE8以下だと利用できないので注意が必要。

一方、「:first-child疑似クラス」はCSS２以降から使えるので IE7以降なら利用できる。

HTMLを修正せずに、CSSだけで枠線を付ける。「隣接セレクタ」編

「隣接セレクタ」を使っても、CSSの修正だけでも対応することができる。

li{ border:solid 3px #F00; } li+li{ border-top-style:none; }

CSSはこんな感じ。 今までの、最初の要素だけ、違うスタイルを指定する、という方法ではなく、 最初の要素以外に違うスタイルを指定している。

「隣接セレクタ」は、要素と要素が直接隣接している場合（直後の弟）に適用される指定方法。

「(兄)+(弟)」という書き方になり、弟の方にスタイルが適用される。

IE7以降で利用可能。

他の方法

他にも<ul>タグの方に枠線を付けるとか、displayをtable-cellにしてテーブルとして表示するとか、 あるにはあるけど、大抵の場合は上記の方法で十分だと思う。

関連記事

リストの最初と最後だけ違うスタイルを適用したいときのCSS

[stainless-note]

複数のブラウザー間の誤差を含めて、なにもかもゼロにすることで、実装を楽にするという、実装者の無知によりこうしたリセットが使われてきた。 しかしブラウザーを理解すれば、必ずしもすべてゼロにする必要はなく、誤差のみを補正し、すべて同じ動作とすれば、実装者は (基本的には) 一つの CSS を書くだけでいいということに気づいている人もいた。DOM を操作する際、実装者が JavaScript を書かず複数のブラウザー間の誤差を含めて、なにもかもゼロにすることで、実装を楽にするという、実装者の無知によりこうしたリセットが使われてきた。

しかしブラウザーを理解すれば、必ずしもすべてゼロにする必要はなく、誤差のみを補正し、すべて同じ動作とすれば、実装者は (基本的には) 一つの CSS を書くだけでいいということに気づいている人もいた。DOM を操作する際、実装者が JavaScript を書かずに jQuery を使うように。

Nomalize.css は CSS における jQuery と理解すればいいだろう。

Nomalize.css は次のことをしてくれる

表示をゼロにしない (sup や sub を使えば上付き、下付きになるし、ul は箇条書きになる)

バグ補正 ( pre 要素における font-size、IE9 における SVG の overflow の挙動など)

CSS 解析時に、解析ツール上に必要以上のゴミとなるコードを作らない (リセット系 CSS は結果的にゴミとなる margin:0 などが大量に挿入される)

必要に応じて Nomalize.css の不要箇所を削除しても OK ( Nomalize.css は適切にコメントで区切られていて、不要箇所は削除が簡単)

ドキュメンテーションも用意されている

だから、本末転倒なリセットをするのではなく、ノーマライズ (補正) するための CSS、Normalize.css を使うことが、CSS を書き始める準備におけるベストプラクティスといえる。

ちなみに、2013 年 2 月22 日に開催された W3Conf でもニコラス氏は、Nomalize.css を使うことがベストプラクティスであるとも触れていた。

また、Nomalize.css は、HTML5 Boilerplate や Twitter Bootstrap (Nomalize.css の作者は Twitter 社の人なのもあるだろうが) に組み込まれているし、ソニー(日本)、NASA などの大規模だったり著名だったりする Web サイトにも採用されている。

Nomalize.css はすでに jQuery と同じくらい、Web 開発においてはスタンダードといえる存在だろう。現段階では IE 6 もサポートに入っているので、日本国内の現場でもどんどん採用すべきだろう。

残念なことに、日本国内の一般的な Web 制作者はここまで考えが至っていないようなので、ぜひもう一度考えてほしい。Web 開発のベストプラクティスは過去の失敗を活かしながら常に進化しているのだと。

ちなみに、もっと詳しくは、Stack Overflow の What is the difference between Normalize.css and Reset CSS? が参考になる。

[stainless-note]

普段はDTPをメインにやっていて、たまにWebのデザインもするというデザイナーさんは、 IllustratorでWeb用のデザインカンプを作ることが多いと思います。 別にIllustratorからでもコーディングはできるのですが、後工程の人を困らせないために、 ちょっとだけ気に留めておいて欲しいことがあります。

１．色モードはRGBで。 普段DTPをやっているとついCMYKモードのままで作ってしまうことがあるかもしれません。 でもWebはRGBの世界です。変換すると意図した色にならなかったりしますので、 最初からRGBで作ってください。埋め込む画像も同じです。

２．どこがデバイスフォントなのか分かるように指示を。 紙の世界では文字は文字でしかありませんが、Webの世界では「テキストデータ」にするのか 「画像」にするのか決めなければなりません。本文は原則「テキストデータ」ですが、 判断に困るのは「見出し類」と「ナビゲーション・ボタン類」です。 見出し　　こんなのとか

見出し　　こんなのとか

メニュー | メニュー | メニュー |　　　こんなのとか

「テキストデータ＋CSS」で表現出来ちゃうような見出しをイラレで作られちゃうと、画像にしたいのかテキストでいいのか判断にとても迷うので、できれば最初から分かるようにしておいてもらえると助かります。 デバイスフォントだけ別レイヤーにしておくとか、赤字レイヤーで指示入れておくとか。手段は何でも構いません。画像なのか、テキストなのか、そんなことで頭を悩ませなくてもいいようにしておいて欲しいのです。

３．ロールオーバ時のデザインも作って下さい。 紙と違ってWebはユーザーさんが欲しい情報を見るためにコンテンツをクリックします。 そうしたクリック可能な部分をユーザーさんにはっきり示すために、カーソルが乗った時のデザインが必要です。 シンプルなテキストリンクから、ナビゲーションバーや凝ったボタン類まで、クリックできるものに関しては「通常時」のデザインと、「ロールオーバー時」のデザインを両方用意しておいてください。 ロールオーバー用の画像は、それだけをまとめて別レイヤーにしておいてもらえると助かります。

４．単位は「ピクセル」、すべて整数で。 Webデザインは「ピクセル」が基準単位です。是非、Webデザインを作るときにはピクセル単位で作成してください。そして、何か数字でサイズや位置を指定する時、小数点の数字は使わないでください。パソコンのモニタでは1pxより小さいドットは打てません。小数点で指定されたものはとなりのピクセルにまたがって滲んでしまいます。 数値は全て整数で指定してください。お願いします。

５．白でもボックスには「塗り」を設定してください。 紙なら「白」＝透明　ということで何も設定しなくていいところですが、Webは「白」≠「透明」です。 イラレで作ったデータをPhotoshopに持って行くと、塗りが設定されていないところは全部透明になってしまいます。塗りが無いとPhotoshop上で効果が付けられません。ナビゲーションパーツやボタン類の作り込みをする時に塗がないと結構困ったりします。

６．テキストデータは原則として文字組できません。 画像化するテキストは存分にツメでも組みでもやっていただいて構わないのですが、デバイステキストで表示する部分にイラレ上で細かい文字詰めなどの処理をしないでください。Webは紙のDTPと違って画面上での文字組処理がとっても苦手です。苦手というか、ほぼ出来ません。時間をかけて美しく文字詰めしてもらっても、ブラウザの上ではベタ組み成り行きでしか表示できないので、たぶんとてもがっかりします。禁則処理もジャスティファイもできません。諦めてください。ごめんなさい。

７．文字サイズも枠のサイズも「可変」だと意識してください。 DTPとWebのデザインで一番違うのは、多分ここだと思います。テキストデータ状態の文字のサイズは、ユーザー環境でいくらでも変わってしまいます。決まったサイズの枠の中にテキストを確実に収める手段は無いと思ってください。もし文字サイズが大きくなったり、コンテンツ量が増えたりした場合、それを収めているHTMLの枠は縦方向に自動的に伸縮します。作り方によっては横方向のサイズも可変にすることだってできます。DTPのように固定サイズの枠の中にギュウギュウに詰め込むことができない代わりに、Webでは枠のサイズそのものを無限に広げていくことができます。 何が言いたいかというと、「可変コンテンツ（テキスト等）が入る予定なのに、固定サイズを前提としたデザインをしないで欲しい」ということです。こればっかりはどうにも出来ません。HTMLもCSSも万能には程遠いので、出来ないことはできないのです。それ以外のことなら大抵のことは何とかします。でもこればっかりは勘弁してください。お願いします。

いろいろうるさく言いましたが、こういう細かいことにちょっと気を使ってもらえるだけで、コーダーはとってもハッピーになれます( ´∀｀)　お互いに気持ちよくお仕事するために、是非ご協力ください。

[stainless-note]

アカウント乗っ取り防止！？ Facebookでメルアドの公開範囲を確認・設定する方法

Facebookでメルアドの公開範囲を確認・設定する方法

基本データ＞連絡先情報＞編集 各メールアドレスの横の▼マークを押すと公開範囲を設定できます。 「自分のみ」にすることをオススメします。

私の場合、タイムラインの方は非公開にしてたけど、友達には公開してた。

友達にメルアドを公開してるとヤバい！？

これの何がまずいかっていうと、 素性の分からない人から友達申請があった場合、 うっかり承認してしまうと、その人にはメールアドレスが伝わってしまうということ。

※承認しなけりゃいいんだけど。

最悪の場合・・・

facebookから50万円くらい不正請求がきた場合の対応まとめ

http://www.abi-station.com/p/3003

こういう事態に巻き込まれかねない。

そもそも、なぜFacebookのメルアド公開設定を見直したかというと、 その記事に書いてあった

> 台湾女性の写真をプロフィールにして日本人名でアカウント作ってフレンド申請 > →友人までメール公開の人からアドレス収集→ログインbruteforce→アプリ課金 > ……じゃないかという推測は有るね。 私の場合、その手の申請は全く承認していませんけどね・・・。

この部分を読んだから。 自分の設定を見なおしてみると、「友達には公開」なってて焦った。

facebookからの不正請求ってのは、 ・メールアドレスがバレてる ・パスワードがバレて、アカウント乗っ取られる （メルアドがバレてたら総当りで突破されるかも！？） ・クレジットカード情報をFacebookに登録してる。

ってのが揃わないと起こらないだろうけど、 気づかないうちに個人情報が漏れてる（自分で漏らしてる）と思うと、けっこう怖いね。

[stainless-note]

「jQuery.browser.safari」が非推奨になっていたので、代替案でスムーススクロール

jQuery1.3以降では「$.browser」が非推奨になってる。

昔使ったスムーズスクロールのスクリプトをコピペで使おうとしたら、動かなかった。orz そのソースが下記のような感じ。

function smoothScroll(href){ var speed = 400;//スクロール速度（ミリ秒） var target = $(href == "#" || href == "" ? 'html' : href);//移動先オブジェクト var position = target.offset().top;//移動先のY座標 /* スムーススクロール */ $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); return false; }

まず元のソースを少し解説すると・・・

引数「href」のところまでスムーススクロールさせるスクリプト。

まず、IE系だとウィンドウのスクロールを制御するとき「html」を指定する。 GoogleChrome や Safari などのWEBKIT系は「body」指定しないといけない。

そこで、「$.browser.safari」をつかって、どっちを指定するかを切り替えていた。 ところがどっこい、jQuery1.3以降だと「$.browser」がNG※。非推奨になっている。いつのまに！？

※jQuery1.7あたりだと非推奨ながら使えてたらしいが、1.9.0だと完全にアウトだった。

jQuery1.9.0でも使えるスムーススクロール

jQuery1.9.0で、ブラウザ判定するにはどうしたらいいか考えてみた。

jQuery.supportでのブラウザ判別 - World Wide Web Guide http://w3g.jp/blog/tools/jquery_browser_sniffing

こちらの記事を参考にさせてもらったところ、 どうやら「$.browser系」の使う代わりに「$.support系」を使ってくれということらしい。 ただ、「$.support系」は「IEの場合は」とか「Safariの場合は」のような直接的なブラウザ指定はできない。

最初は、「$.support.noCloneEvent」で判定しようとしたんだけど、どうも挙動がおかしい。 IE7〜8はOKだが、IE9だとダメ。「$.support.noCloneEvent」が true になってる。

「jQuery ブラウザ判定」で検索しても、でてくるのは「モダンブラウザの判定方法」ばかり。 「IE6〜8」と「IE9以降,GoogleChrome,Safari,FireFox」を区別する、というやつ。

「モダンブラウザかどうか」じゃなく「IEかどうか」を知りたいんだよ！！

紆余曲折あって、最終的に下記のように書き換えることにした。

function smoothScroll(href){ var speed = 400;//スクロール速度（ミリ秒） var target = $(href == "#" || href == "" ? 'html' : href);//移動先オブジェクト var position = target.offset().top;//移動先のY座標 /* スムーススクロール */ //$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); var body = 'body'; if (navigator.userAgent.match(/MSIE/)) { /*IE6.7.8.9.10*/ body = 'html'; } $(body).animate({scrollTop:position}, speed, 'swing'); return false; }

結局、jQueryを使わずブラウザ判定することになりました。

[stainless-note]

PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。

以上。

で終わってしまうと記事にならないので、ちゃんと説明しておく。

そもそも -webkit-text-size-adjust とは何か

iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。

これを制御するのが CSS の -webkit-text-size-adjust である。

  none が絶対にダメな理由

-webkit-text-size-adjust: none を指定してしまうと PC 版の Google Chrome や Safari でページの拡大/縮小機能に支障がでる。

たとえば、ITmedia には none が指定されてしまっているので悪い例として取り上げさせてもらう。Google Chrome (バージョン 24) にて 100% と 200% で ITmedia のトップページを表示するとこうなる。

３行でまとめる

長くなったが、強引に３行でまとめる。

WebKit はこのバグを治してほしい。

対処療法にはなるけど -webkit-text-size-adjust: none はダメ。100% と書け。

バグを回避するための Webkit-Text-Size-Adjust Remover のような拡張もあるので、拡大できないサイトがあって困ってるなら入れるとよい。

[stainless-note]

無料で高機能な画像編集アプリ『GIMP for Mac』が晴れて日本語対応 GIMPがバージョン2.8.4で日本語に対応した。 GIMPは、レイヤー、トーンカーブ、ブラシエディタ、モザイク編集、アニメーション合成など、多くの機能を備えた無料の画像加工アプリ。以前は、Macの表示機能を拡張するX11が必要だったが、昨年8月にリリースされた2.8.2でネイティブアプリになった。 だが、2.8.2には日本語環境で立ち上げるとクラッシュするバグがあった。利用する場合は、英語環境で起動させるApp Language Chooserを使う必要があったが、昨日リリースされた2.8.4でバグが解消された