つくりてのざれごと

今までのウェブ制作で、jQueryのhoverを使って文字色をふんわり変える効果をつけていたところ、どうもページ読込完了後の最初のマウスホバーでふんわり変わらないことに気付いた。これはjQueryのhover内の始めのfunction（マウスホバー時の関数に当たる）でアニメーション時間を遅くした時に出くわしたもので、それ以後ひじょ〜に気になって仕方が無いのでその解消方法を探してみたら、CSS3を使えば良さそうだということがわかったので以下にチョットだけ解説を。 1. jQueryのhoverで文字色をふんわり変える コードはいつもこんな感じのものを使っている。 $(function(){ $("a").hover( function () { $(this).stop().animate({color: "任意の色A"}, 500); }, function() { $(this).stop().animate({color: "任意の色B" }, 500); } ); }); jQueryのhoverは、対応ブラウザが多いのだが、ページ読込完了後の最初のマウスホバーではアニメーションが効かないようだ。この現象は、特に、CSSにもa:hoverを同時に指定している場合に起こる現象のようだ。 対応策としては、CSSのa:hoverでの指定はしないことで、アニメーションが効かない現象は解消されるが、これだとjQueryが読込めない時にa:hoverが出来なくなる、という欠点がある。 2. CSS3のtransitionで文字色をふんわり変える 通常のリンク色とマウスホバー時の色指定はこんな感じ。 a {color: 任意の色A;} a:hover {color: 任意の色B;} CSS3のtransitionの対応ブラウザは、IEがver10のみで、他のブラウザもベンダープレフィックスでの対応となっている。 しかし1.と違い、ページ読込み完了時の最初のマウスホバーでも効く。 なぜなら、CSSのa:hoverはそのままで、aに a { color: #000; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-...

とあるCSSで body { font-size: 12px; line-height: 2; } と指定し、jQueryにてline-heightの値を取得する時、 var lineHeight = parseFloat($("body").css("line-height")); とすると、通常「24」と、 font-size*line-height が内部計算された数値が返される（parseFloatは文字列を数値に変換する関数。parseFloat関数なしだと「24px」と単位付きの文字列が返される）。しかし、 IEではCSSでline-heightに指定した値「2」がそのまま返されて他のブラウザと異なる結果となり 非常に困る。それ故ブラウザ判別のスクリプトが必要になる（ホンマにメンドイ）。 var userAgent = window.navigator.userAgent.toLowerCase(); var appVersion = window.navigator.appVersion.toLowerCase(); if (userAgent.indexOf('msie') != -1) { if (appVersion.indexOf('msie 6.') != -1) { //ie6のとき var getStyle = $("body")[0].currentStyle || document.defaultView.getComputedStyle($("body")[0], ''); var lineHeight = getStyle.lineHeight*parseFloat($("body").css("font-size")); var bHeight = Math.round(lineHeight) } else if (appVersion.indexOf('msie 7.') != -1) {//ie7のとき var getStyle = ...

現在拙サイト・ブログ等で使用中の「上下に展開・格納する縦型メニューjQuery」はかなり煩雑で、今回整理して簡略化させることに成功。 縦型メニューのHTML <ul> <li> <span id="accordion01" class="accordion" >news</span> （ここに「+」または「−」が挿入される） <ul id="subNavi01" class="subNavi" > <li><a href="#">ESZETT</a></li> <li><a href="#">TYPŒ</a></li> <li><a href="#">LETTER-PRESS</a></li> </ul> </li> <li> <span id="accordion02" class="accordion" >works</span> （ここに「+」または「−」が挿入される） <ul id="subNavi02" class="subNavi" > <li><a href="#">web design</a></li> <li><a href="#">web demo</a></li> <li><a href="#">print</a></li> </ul> </li> <li> <span id="accordion03" ...

今回の 拙サイト 全面改修の際追加したメニュー横の＋−表示が切替るjQueryの詳説をば。 実際どのようなものかは、この拙ブログのサイドメニューも同じ仕様なのでご覧あれ。 メニュー右に「＋」を追加して、メニュー展開時にこれが「−」に変わり、メニュー収納時にまた「＋」になるようなメニュー展開・収納jQuery。この「＋」「−」はいわば飾りなのでHTML上には書きたくない、しかしjQueryの特性上、CSSの疑似要素〔:after〕をセレクターとして呼べないこともあって、「＋」「−」の切替え方に難儀。当初、〔toggle(fn1, fn2, ..., fnN)〕を使用しようと考えたがjQuery 1.9からこれが廃止されたことを知り愕然。（詳細は jQuery Core 1.9 Upgrade Guide | jQuery を参照） 他に手はないかと色々調べた結果、jQueryの〔 after() 〕と〔 replaceWith() 〕が使えそうと判断。〔after()〕は指定したセレクターの後ろにHTML文字列などを挿入するもの、〔replaceWith()〕は指定したセレクターのHTML文字列などを置換するもの。この2つを組み合わせて「＋」「−」の切替えを可能にした。 以下に使用例を。 HTML <ul> <li><span id="accordion02" >works</span> <ul id="subNavi02" > <li><a href="#">web design</a></li> <li><a href="#">web demo</a></li> <li><a href="#">print</a></li> <li><a href="#">letter carving</a></li> </ul> </li> ...

ちょっと思うところあって7回目の 拙サイト 全面改修を挙行。 今回は見映えなどの大幅変更というよりも細かい箇所の改装が主目的だったが、構造見直しのためHTMLは全取っ替え。以下に今回の改修点を列挙。 横幅を960pxから1200pxへ ヘッダおよびサイドメニューの固定化 不要になったページの削除 「上に戻る」ボタンの削除 メニュー展開時のアイコンのアニメ追加 文字詰めjQueryの追加 横幅変更 横幅は現状1200pxでも大丈夫と（勝手に）判断し変更。そのついでに今まで左寄せにしていたレイアウトを左右中心揃えに。そのTIPSはネット上に沢山転がっているので割愛。 サイドメニュー固定 ウェブ、ショウジン さんの記事「 サイドメニューとフッターメニューをCSSのposition:fixedで固定する例 ＊一応「IE6」もいける。 」を参考にした。深謝！ サイドメニューに該当するCSS #side { width: 100%; float:left; position: fixed; overflow: auto; background-image: url("../images/common/eszett_logo01.jpg"); background-repeat: no-repeat; background-position: 3.6rem top; } #sideWrapper {width: 180px;} 上記赤字の「position: fixed;」を追加することでサイドメニューは固定される。 そして、今回の密かな目玉である「eſzett」ロゴを背景に追加しこれもサイドメニューと共に固定させるために、上記青字を追加。幅100％はサイト全体の横幅に対する設定で、これにより背景ロゴはサイドメニューに設定しているにも関わらず中途で切れずに（サイドメニュー自体は#sideWrapperにて幅180pxに設定）表示される。 コンテンツ部分のCSS #main { width: 900px; float: right; overflow: auto; position: relative; margin-bottom: 6rem; } コンテンツ部分のCSSにて、赤字の「float: r...

日頃WEBのテキストで句読点および括弧類が連続して出現する場合の詰め処理をしたくてどうしたものかと思案していたら、素晴しいJavaScript（とjQueryの混合）を発見。このスクリプト、要はペアカーニングを任意に設定できてしかも2つの括弧類連続を設定するだけで括弧類が3つ以上連続してもちゃんと詰めてくれる。いやはやありがたや。ということで今回参考というか丸々活用させていただいたのは FLAutoKerning.js というスクリプト。 HTMLで文字詰めするタイポグラフィー用JS | fladdict 感謝深謝。 カーニングのペアを自動処理 今回の組版の設定は、基本ベタ組みで、句読点および括弧類が2つ連続した場合「全角二分取り」になるような、つまりは二分分詰まるような、オーソドックスな設定で試してみる。そして今回の句読点および括弧類は 起こし括弧類：「『（［｛〈《【〔 受け括弧類：」』）］｝〉》】〕 句読点類・中点：、，。．・ の計21種の組合せに詰め設定を施すが、この組合せを配列にて自動化した。 jQuery(function($){ var pncPrn = ["」","』","）","］","｝","〉","》","】","〕","「","『","（","［","｛","〈","《","【","〔","、","，","。","．","・"]; for (var x=pncPrn.length; x--;){ for (var y=pncPrn.length; y--;){ p[pncPrn[x] + pncPrn[y]] = -0.6; } } }); 上記jQueryにて設定した句読点括弧類の【 組合せ 】をFLAutoKerning.js内カーニングペア定義の箇所に追...

ワタクシがwebデザイン上一番気にするのが見出しのマージン。いつもその時の感覚で決めるが、しっくり来ないことが多々ある。何か巧い方法が無いものかと『 文字の組方ルールブック ヨコ組編 』の「見出しの構造と組方」を眺めていて、自動計算出来るかもと思いjQueryメインに適宜JavaScriptを組み込みスクリプトなるものを書いてみた。 2013.5.14追記 デモページの内部に書き込んでいたこのスクリプトを外部ファイル化。 上下マージン比1:1時と8:5時を ボタンで切り替えられるデモページ を追加。 参照 日本エディタースクール編. 文字の組方ルールブック ヨコ組編 . 本エディタースクール, 2001 JavaScript：文字を数値に変換する方法その２ | THE HAM MEDIA BLOG line-height の値には単位なしが良いとされる理由 - lucky bag Can I use rem units? ほか、色々なサイト・ブログを参照させていただいた。深謝。 注意 なにせjQueryはおろかJavaScript、いやプログラミング全般に素人なので間違ってたりする可能性があるので、使用時は自己責任でお願いする。 実作したweb組版 本文の文字サイズ・1行の字詰・行間（行送り）などを決めると版面が決まる。見出しもその版面に則り「行取り」の方法でその上下のアキを決めていく。具体的には下図をご覧あれ。本文だけでなく見出しも行に綺麗に乗っているのがわかる。 本文サイズ12px、行高22px、行間10px、42字詰。各見出しサイズなどは図の通り。 完成形をブラウザで表示後キャプチャし、イラレで作成した水色の版面上にキャプチャ画像を配置した。 web組版の注意点 行送りの設定方法がDTPと異なる。 webの行送りはline-heightで設定するが、これは厳密には文字通り行の高さを設定するもので、アキの付き方は以下の図の通りになる。 本文上下のグレー網がline-heightで設定されるアキ これを踏まえて版面設計や見出しのマージンを算出する。 見出しマージンの計算式 ということで、計算式を導くために、下図のように必要な部分を設定。 var bFont = body要素（本文）のfont-size var bHe...