つくりてのざれごと

とある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...