ページ

CSS & jQuery


このブログの CSS と jQuery について記載します。　自分用備忘録のようなものです。


CSS

画面サイズに合わせて画像を縮小させる [Fluid Images]
初めてリキッドレイアウトにチャレンジしてみましたが、テンプレートがあるのでほとんど大したこともやらず、自分で作った気がしてません…。

ただ、ブログを投稿してみるとプリントスクリーンした大きな画像を使うことが多く、この画像が画面の大きさに合わせ縮小しないことに気付きました。

最初は、jQuery で何とかしようと試みたのですが、ちょっと現在の自分レベルではとても大変そうでして…
そうこういろいろ調べていく内に Fluid Images こちらのページを見つけまして、CSS で簡単にできるのでした orz

投稿記事内の画像にだけ適用するので
.post-body img {
    max-width: 93%; /* 本当は100% が良 */
}
としました。　枠内に収めるために 93% にしてますが、レンダリングのことなど考えると 100% にしなければならなかったような…。　しかし今の実力じゃぁこんなもんです…。
CSS ハック
ページレイアウトの崩れを各ブラウザで検証したところ、やはりIEの崩れが出てきます…。
初め、IE8 の CSS ハックを検索し、末尾に "¥9" を付けてみたのですが上手く表示されず、"p { color/*¥**/: blue¥9;}" といったものも上手くいかずで、いろいろ試している内に "¥9" 等で表示されるようになりました… orz
私の時間は何処へいったのやら…　でも IE8以外では検証してませんけどね (-_-)

ということで記載しておきます。
/* IE6, IE7, IE8 用 hacks */
p {color: blue\9;} /* 値の後の "\9" */

/* IE7, IE8 用 hacks */
p {color/*\**/: blue\9;} /* 属性の後の "/*\**/" と値の後の "\9" */
ついでに webkit 用と Firefox 用も記載します。　一応 safari5, chrome10, Firefox4 で動作確認済。
/* webkit hacks */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* {} 内に普通に記述 */
}

/* firefox hacks */
@-moz-document url-prefix() {
/* {} 内に普通に記述 */
}
validator は勿論通りません。　テンプレも通りませんしね、ブログなのでゆっくりということにしておきます…。
IE の <br /> 連続が反映されないバグ
CSS ハックにより IE のレイアウトがマトモになった～と思ったら、投稿記事内の自動改行が反映されていないじゃあ～りませんか！？

ううぅ… IE …

早速 google 先生に聞いてみると、あぁやっぱり素敵に解決なさっている方がいらっしゃるのですね！

POSTRO：IEには br要素を連続すると偶数個目の brが無視されるバグがあるらしい コチラの記事を発見しました！

【IEの不具合について】

このスタイルを設定した要素内でbr要素を連続させると、2つ目（偶数個目）のbr要素が無視されてしまいます。例えば、5つのbr要素を連続させた場合は、2番目と4番目のbr要素が無視され、3つ分の改行しか入らなくなります。

br要素に対して letter-spacing: 0 または letter-spacing: normal を指定すると、この不具合を回避することができます。

※IE 8では、上記の不具合は発生しないようです。

引用元: スタイルシート［CSS］/テキスト・フォント/文字の間隔を指定する - TAG index Webサイト
ですです。
br {letter-spacing: 0;}
により不具合は見事に解決しました！　POSTROさん有難う御座います。
BLOCKQUTE カンタン作成
上記の IE の <br /> 連続が反映されないバグの記事に解決策を blockquote を使って引用文として書きました。
私はソースやコードを拾ってくることが多く、所謂パクリですが…、今後も引用文を多用することとなるわけです。

でもいちいちコードを書くのは面倒だなぁということもあって、google 先生に聞いてみると素晴らしいサイトを発見しました！

BLOCKQUOTE要素とCITE要素をめぐる考察 コチラの記事になります。

ソースや CSS が書いてあることも勿論ですが、何より素晴らしいのは、ページ中過ぎの 『3. 引用ブックマークレットの活用』 の欄にある [quoteIt] という引用ブックマークレットです！
コチラを使えば簡単に blockquote が作成されてしまうのです！
使用方法も丁寧に書かれておりますので、気に入った方は是非試してみては如何でしょうか？

因みに私も Firefox を使っていて他のブラウザでは試してみてはおりませんが…
ppBlog さん有難う御座います。　使わせて頂きます！
ソースコード表示タグ <pre> <code> にて折り返しを可能にするハック
このページ記事のほとんどには、スクリプトや CSS ソースコードを表記しているのですが、これらを表記する際には <pre> <code> の組み合わせ内に記述しています。
最初はそんなことも知らなかったのですが…そうしたサイトのソースを見ていく内に、覚えました。

大変便利なものがあるなぁ～と思っていたのですが、一行に長い文だと横スクロールバーが表示されたりすることをよく見かけたりもします。
私の場合は、スクロールバーが出ない代わりに、記事内 div を突き抜けて、右カラムの widget エリア内へ伸びてしまう現象が起こりました。
自分でいろいろと試していたのですが、ど～にも上手くいかず…

困った時の google 先生に聞いてみると
ソースコードを表示させるのに使うべきHTMLタグは？ コチラの記事を見つけました。

そして、コチラで紹介されている以下のサイトの CSS ハックを使うことによって見事解決しました！
Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE

Code snippets and poems often use spaces for indenting text. Pre-tag is used to display preformatted text on webpages. This makes indenting visible, but has the annoying side-effect of disabling wrapping. When wrapping is disabled, long lines go out of the right side of window, which is never usefull. This howto explains how you can make preformatted text wrap on all browsers when making websites. We also learn how to make pre on any website wrap while browsing the web with mozilla.

引用元: Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE

/* Browser specific (not valid) styles to make preformatted text wrap */

pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
いつもいつもコピペで済ましている自分が恥ずかしい限りですが、Jimbo さん有難う御座います。助かりました！

jQuery

jQuery のリンク先設定
blogger を始めて、簡単な jQuery を使ってみようと思いましたが、スクリプトの置き場所は外部リンク先でなければならないようで、そこにまずは躓きました…
どこから jQuery 本体をリンクさせるのか悩みましたが、最初は、jquery.com から直接リンクをさせていました。
そうしていろいろ調べ物をしている内に、Google Libraries API を使えばいいらしいという記事を見つけ、コチラを使ってみることにしました。

参考にしたのは　Google Libraries API を使う コチラの記事です。

Google Libraries APIを使用する場合、jQueryファイルを読み込むには2つの方法が用意されています

1つ目は前のページで見たように読み込みたいjQueryファイルのフルパスを指定して読み込む方法。そしてもう1つは google.load() を使い、読み込みたいJavaScriptライブラリのモジュール名とバージョンを指定して読み込む方法です。

引用元: Google Libraries APIを使う - jQueryファイルの読み込み - jQueryの使い方
私は後者の google.load() を使う方を選び、取り敢えず最新の jquery1.6 を使ってみます。
知識的には ver1.3 の時で止まっているのですが、最新版なので大丈夫でしょうということで。
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1.6");　/* "javascriptのライブラリ名"（今回は jQuery）,"バージョン" */
</script>
これで jQuery が使えるようになりました。
jQuery UI なども今後試してみたいので、Google Libraries API 使ってみます！
記事の最後に Page top リンクを追加
プログラミングの知識がない私でも、ちょっとしたコトならできるので jQuery を使っています。
プラグインを使えば、後はちょっと書き換えるだけで素晴らしいコトができますし！

タイトルの 『記事の最後に Page top リンクを追加』 ですが、なんてことはありません。
私にも書けるようなものですし、もっと簡単な書き方があるかもしれません。
$(function(){ // $(document).ready(function() の省略形
    $(".post-body").after("<a class='pagetop' href='#navbar'>Page Top</a>");
    $(".pagetop").css({ float:"right", margin:"10px 15px 0 0" });
});
たったコレだけです。　便利ですよね～～。
HoverAccordion でリストをアニメーション表示する
この CSS & jQuery のページはページ要素で追加したものなので、記事ごとに投稿ができませんし、アーカイブやラベル分けもできないのでページトップで、CSS と jQuery の項目を記事ごとにリスト表示しております。
このリストを HoverAccordion してみました。

調べてみると、 jQuery UI で簡単に装備できるらしいのです。
新しいことを試してみたいとも思いましたが、文字だけですし、今回は HoverAccordion プラグインでやってみることにしました。
コチラ HoverAccordion jQuery Plugin が公式サイトになりますかね。

まずは、プラグインのリンクです。
<script src="http://berndmatzner.de/jquery/hoveraccordion/jquery.hoveraccordion.min.js"
 type="text/javascript"></script>
それから次を記述します。

<script type="text/javascript">
   $(function(){
        $("#accordion").hoverAccordion({
            speed:"slow" /* ゆっくり動くようにしました */
        });
    });
</script>
オプションはいろいろとあるようですが、リストが CSS と jQuery の2つしかないので、最初は中身を非表示にしたままで、ゆっくり動くようにだけしてみました。
本当に知識がなくても簡単に設置できて、すんばらしいです。
要素選択のフィルタを使ってみる
jQuery の勉強も兼ねてこのページに使えることは試してみよう！という気持ちから今回は要素選択のフィルタを使ってみようと思います。

この CSS & jQuery のページでは、CSS, jQueryの各項目名を h4 要素とし、以下の記事名は h5 要素としてタグ付けしてます。
h4 要素はページタイトルにあるように、これ以上増えるかどうかは微妙ですが、h5 要素は記事ごとに増えていきます。
各記事は前回の投稿記事のコピペなどで済まし、中身の文章だけを書き換えるというズボラな投稿を繰り返しているわけですが、h4, h5 を CSS を使わずそのまま使用していると上下の余白のバランスが上手くとれません。
そこで、2回目に出てくる h4 にクラスを加え、h4 直後の div 要素内の h5 （h5 は div で括っている）に対してもクラスを加えるというコードを書いてみます。

まずは最終的に反映されたコードから。 .h42nd, h51st のスタイルは CSS で記述しています。
因みに、セレクタ - 愚鈍人 コチラのページを参考にして乗り越えました…

$(function(){
    cj = $("#post-body-xxxxxx"); /* xxxxx はこのページの post-body ID */
    $("h4:eq(1)",cj).addClass("h42nd"); /* :eq(1) で 2番目に登場する要素だけ選択 */
    $("h4+div h5",cj).addClass("h51st"); /* h4+div で h4 の直後にある div 要素だけ選択 */
});

これでなんとか動いたのですが、何故動いているのか解らない部分が一つありまして…
cj に変数として #post-body-xxxxxx を単純に代入して、#post-body-xxxxxx 内の h4 云々という書き方、ダメコードにすると

$(function(){
    cj = "#post-body-xxxxxx"; /* 単純に代入 */
    $("cj h4:eq(1)").addClass("h42nd");
    $("cj h4+div h5").addClass("h51st");
});

こうすると動かず、でも何がダメなのか全く解りません。
"cj = &(#ID);" とする意味や ""h4:eq(1)",cj" と前後させなければならない意味などサッパリです…
どなたか解説できる方いらっしゃいましたら、お手数ですがご教授下さいます様お願い致します。

※追記※
""h4:eq(1)",cj" と前後すると 2つ目のセレクタが第二引数として、「"cj"要素内の"h4"要素」として絞り込むことができることを知りました。
登録: 投稿 (Atom)