『x個目を指定』『偶数を指定』などの方法は良く見るけど、『x個目以降』というのが分からなかったので調べてみた。

例えば5個目以降のliを指定する場合

li:nth-child(n + 5) {
  /* css指定 */
}

また、5個目までを指定する場合

li:nth-child(-n + 5) {
  /* css指定 */
}

nth-child()ってつまり

• nth-child(X) X個目の要素を指定
• X内のnは0以上の任意の整数

なので

偶数

li:nth-child(2n)

奇数

li:nth-child(2n + 1)

となる

FacebookのLikeboxをコンテナ幅に合わせて可変にする方法。
要は無理矢理css上書きして幅100%にして、高さを微調整しています。

html5コード、2014/1/14現在での方法。

1.まずはFacebook Likeboxのコードを取得

下記Facebookページから、Likeboxのコードを取得
Like Box – Facebook開発者
必要な部分を埋めてGet Code
widthは後から上書きするので幅には影響しないが、表示するアイコン数に影響するみたい(幅が広いほどたくさんの人を表示)

取得できたら設置したい場所にコードを貼り付けます。

2. コード貼り付け、css調整

続いてcssで幅を上書きして、高さを微調整します。

.fb_iframe_widget {
  width: 100% !important;
  span, iframe {
    width: 100% !important;

    /* Extra small devices (phones, less than 768px) */
    @media (max-width: $screen-xs-max) {
      height: 300px !important;
    }
    /* Small devices (tablets, 768px and up) */
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      height: 400px !important;
    }
    /* Medium devices (desktops, 992px and up) */
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      height: 340px !important;
    }
    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: $screen-lg-min) {
      height: 300px !important;
    }
  }
}

高さの調整は、良い感じに見えるよう調整してください。
(Extra small devices向けには画面幅によって細かく変わってしまうので、はみ出したものは隠すという残念対応でしのいでる)

firefoxにだけcssをあてたい。
javascript周りでごちゃごちゃしてしまってchromeでは動くけどfirefoxでは表示が崩れる！みたいな場合にcssでムリヤリ解決するために使いました。
(もちろんほんとはjsちゃんと直しましょう・・・)

Firefox cssハック

@-moz-document url-prefix() {
  selector {
    width: xxxx;
    ….
  }
}

Firefox26.0 で動作確認済。

@-moz-document って？？

@document 規則は、ドキュメントの URL に基づいて、その中に含まれるスタイル規則を制限する @ 規則

要するにサイトごとにスタイルを適用させることができる。
@-moz-document url-prefix(foo) は、”foo”で始まるurlの場合、スタイルを適用する、ということになります。
今は””(空白)を指定してるので、どのURLでも適用される。-moz-なのでFirefoxだけ。

Firefoxハックなんてそうそう必要ないけど、メモ。

参考サイト

• Firefoxのバージョン別CSSハック一覧表｜web bibo
• @document – CSS | MDN

ブラウザ標準のスクロールバーを、自分のデザインに変更するためのjQueryプラグイン「custom scrollbar」。
jQuery custom content scroller – malihu | web design
jQuery custom scrollbar demo（デモページ）

スクロールバーをカスタマイズするJSは色々あるけど、これが一番多機能そうなのでご紹介。
基本的に上記ドキュメントページを要約して翻訳しています。間違ってたらすみません。

導入方法

基本的にはJSを読み込んで指定をするだけです。

基本的な使い方

jQueryとmCustomScrollbarのjs, cssを読み込む
ダウンロードはjQuery custom content scroller – malihu | web design のdownloadから

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="customScrollbar/jquery.mCustomScrollbar.min.js"></script>

スクロールバーを適用したいコンテナはCSSで下記の指定が必要。

• heightまたはmin-height （内容がはみ出る高さになればよい）
• overflow: auto;またはoverflow: hidden;

さいごに、対象のコンテナを指定する。

$(function(){
  $(window).load(function(){
     $(".scrollBox01").mCustomScrollbar();
  });
});

とりあえず最低限はこれで動く。

重要なこと

• 対象のコンテナが表示されていなければならない（display: none;とかはダメ）
• 完全にロードされていなければならない
  （まだロードされてないコンテナはロード完了してからupdateメソッドを使用）
• ページ表示後に内容量が変わる場合は、その都度updateしなければならない

もしいちいちupdateするのが面倒とか、そもそもやり方が分からない初心者さんは、updateOnContentResize: trueに設定すれば良い。

$(".scrollBox01").mCustomScrollbar({
  advanced:{
    updateOnContentResize: true
  }
});

こうすれば、コンテナの大きさが変わるたびに自動的にアップデートされる。

デザインのカスタマイズ

スクロールバーは、指定したコンテナに下記のマークアップで挿入されます。

<div class="content mCustomScrollbar _mCS_1">
  <div class="mCustomScrollBox" id="mCSB_1">
    <div class="mCSB_container">
      <!-- content -->
    </div>
    <div class="mCSB_scrollTools">
      <a class="mCSB_buttonUp"></a>
      <div class="mCSB_draggerContainer">
        <div class="mCSB_dragger">
          <div class="mCSB_dragger_bar"></div>
        </div>
      <div class="mCSB_draggerRail"></div>
      </div>
      <a class="mCSB_buttonDown"></a>
    </div>
  </div>
</div>

_mCS_1の数字は、同ページに複数スクロールバーが登場する場合の連番です。

構造は下記のようになります。

好みのデザインにCSSで調整しましょう。
丸とか点線とか単純なのは全てCSSだけでできますが、凝ったのを作りたいときは背景画像とか駆使しましょう。

設定

設定項目が豊富なことが、このプラグインをオススメする大きな理由です。
項目は下記の通りです。

コールバックのタイミングに関しては下記のデモを参照してください
jQuery custom scrollbar demo

プラグインメソッド

update

つかいかた

$(selector).mCustomScrollbar("update");

updateメソッドは今存在しているスクロールバーをアップデートします。（コンテナの内容量を計算し直す）
動的にコンテナの内容を変更したあとに使います。（JSで要素を消すとか、ajaxで新しい要素を入れるとかした時）

例は省略（jQuery custom content scroller – malihu | web designを参照）

scrollTo

つかいかた

$(selector).mCustomScrollbar("scrollTo",position);

scrollToメソッドは引数によって与えられた位置に自動的にスクロールさせます。
位置は文字列（. "#element-id", "bottom", "left"とか）または数値で指定します。

例

一番最後のエレメントに移動する

$(".content").mCustomScrollbar("scrollTo","last");

“el-1″というidの要素に移動

$(".content").mCustomScrollbar("scrollTo", "#el-1");

（jQueryオブジェクトじゃないので注意）

引数（位置指定）のまとめ

オプション

stop

$(selector).mCustomScrollbar("stop");

スクロールのアニメーションを停止する。直前のスクロールに割り込みたいときに便利。

disable

$(selector).mCustomScrollbar("disable");

今あるスクロールバーを一時的にオフにする（スクロールバーが消える）。updateすればもう一度オンになる。

$(selector).mCustomScrollbar("disable",true);

こうすればスクロール位置をリセットできる。

destroy

$(selector).mCustomScrollbar("destroy");

custom scrollbarを完全に消す。このJSがかかっていない状態になる（CSSとかの指定のママになる）

disable, destroyについては下記のデモページを参照。
jQuery custom scrollbar demo

つまりどうすれば良いの？

（せっかく日本語に翻訳したんだけど）ドキュメントとか読むの面倒！という方は下記のコードをコピペして適宜変えてください。
おすすめ指定をまとめてみました。（”#container”だけ各自のidかclassに合わせてください）

$(window).load(function(){
  $("#container").mCustomScrollbar({
    scrollInertia: 0,                    //スクロール加速度 OSデフォルトと異なると使いにくいので0
    mouseWheelPixels: 50,      //スクロール量 デフォルトに近づけた。お好みで変更
    autoHideScrollbar: false,    //マウスオーバーしていないときにスクロールバーを隠すか お好みで

    scrollButtons:{
      enable: false,                    //ボタンを出すか。個人的には不要（falseにしたら以下は指定不要）
      scrollType: "continuous",  //ボタンを押してる間だけ進む
      scrollSpeed: 50,               //ボタンのスクロールスピード OSデフォルトに近いづけた。お好みで変更
      scrollAmount: 50              //ボタンのスクロール量 OSデフォルトに近いづけた。お好みで変更
    },
    advanced: {
      updateOnContentResize: true, //自動的にスクロールバーを調整してくれる
      autoScrollOnFocus: true          //フォーカスした場所にスクロールしてくれる
    },
    theme: "dark-thin"                     //テーマを選ぶ。 CSSでカスタマイズする場合は不要
  });
});

テーマについては下記を参照
jQuery custom scrollbar demo

素晴らしいプラグインを提供してくれているManosさんに感謝します。
malihu | web design

参考サイト

• スクロールバーをデザインするのに使えるjQueryプラグイン「Custom Scrollbar」 | Web活メモ帳

つまづいたところ

css読み込むの忘れて全然動作しなかったぜ・・・・

スマホでwebサイトを見た時に表示領域やズームなどを設定できるviewportのまとめです。

基本の書き方

htmlのmeta要素として、head内に記述します。
viewportはスマホのみに働き、PCでの見た目には何も影響しません。

<meta name="viewport" content="width=device-width, initial-scale=1"/>

name="viewport"とし、content内にプロパティと値を指定します。

上記デフォルトはiPhoneの場合

結局どう書けばいいの？

案件により異なりますが、たぶん大きく分けて以下の2通りになると思われる。

スマホ対応ページを作った場合

「幅はそのスマホに合わせる、拡大縮小はさせないよ」

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no, initial-scale=1"/>

きちんとモバイル端末のことを考えて作られているならこれで問題なし。

PC用のページをスマホでも見れるようにしたい

「とりあえず画面全体を見れるようにしてくから、ユーザが拡大縮小して見てね」

<meta name="viewport" content="width=【サイトの幅】"/>

何も指定しなくても案外うまいこといくけど、幅だけでも指定しておこう。

参考サイト

• viewportとは
• Viewport [iPhone生活]

メディアクエリのまとめです。

メディアクエリ記述まとめ

以下はすべてcssに記述します。

最小, 最大

@media screen and (min-width: 480px) {
    /* 幅480px以上のスタイル*/
}

@media screen and (max-width: 800px) {
    /* 幅800pxまでのスタイル */
}

OOpx〜OOpxまで

@media screen and (min-width: 480px) and (max-width: 800px) {
    /* 幅480px〜800pxまでのスタイルを記述 */
}

モバイルデバイスの向き

こんなのもあります。

@media all and (orientation: landscape) {
  /*ランドスケープモード（横向き）のスタイル */

}

@media all and (orientation: portrait) {
/*ポートレートモード（縦向き）のスタイル */
}

読み込むcssを切り分けたい場合

css内部で分けるのではなく、読み込むファイル自体を分ける場合は下記のようにします。

<link rel="stylesheet" href="style.css" media="all and (min-width: 480px) and (max-width: 800px)"/>

実際組むとなると

まず現在の一般的なデバイスの大きさは以下

実際の解像度は高いのですが、device-widthに合わせて作れば（たぶん）OK。

サイズについてまとまってるサイトがありましたので、こちらも参考にしてください。
Screensiz.es

大体こんな感じの指定で十分だろうか

@media screen and (max-width: 599px) {
    /* 幅600px未満
       スマホの横持ちくらいまで対応 */
}

@media screen and (min-width: 600px) and (max-width: 799px) {
    /* 幅480px〜800px
       タブレット端末と小さなラップトップ用 */
}

@media screen and (min-width: 800px) and (max-width: 1099px) {
    /* 幅800px〜1100px
       デスクトップマシンを使っている人用 */
}

@media screen and (min-width: 1100px) {
    /* 幅1100px以上
       デスクトップマシンを使っててブラウザを贅沢に広げる人用 */
}

実際に上記を使ってコーディングするのはこれからなので、最適ではないかもしれません。

参考サイト

• Google ウェブマスター向け公式ブログ: レスポンシブ・ウェブデザイン – メディアクエリのパワーを使いこなす
• [CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ | コリス