IEは機能的には支障ありませんと書いてしまいましたが、CSS3でグラデーションを使う場合、background部分の表示が消えてました。IE用には何も指定してないことになるから当然ですね。IE用にbackground-colorを指定しておかなくちゃ。ボックスの角丸の方は、丸くならず四角く表示されますが一応見られる状態にはなっています。CSS3は試しながら使っているので、まだまだお試し期間というところです。使ってみるWordPressに便利機能を追加してくれるのがプラグインです。Evolved」です。ウェブ上でソースコードを表示するときって、どうやって書くのが正解なのか正直言ってよくわかりません。preタグの中でさらにcode要素としてソースを書くのが一般的なようなので、このサイトでもそれに習っていました。ソースコード部分は、そのままだとうまく表示されないので、実体参照変換してから貼り付けるとかいろいろと面倒。Evolved」なわけです。こんなふうに表示してくれます。スクリーンショットステキだ。記入時に実態参照変換も必要ありません。いうふうにソース内容に合わせて囲ってあげるだけ。例によってウェブサイトデザインに合わせて外観イメージを少しいじってみます。Evolved」を組み込むと、pluginsフォルダの中のsyntaxhighlighterの中にさらにsyntaxhighlighterがあってその中にstylesフォルダががあります。中には、cssファイルがいろいろはいっています。今回は、shThemeDefault.cssを元にして改変します。Evolved」でDefault設定を使う場合参照しているのは、shCore.cssとshThemeDefault.cssのふたつなので、shThemeDefault.cssの後ろの方にshCore.cssの変更分も合わせて下記のcssを書き加えました。*/}お気に召したら、使ってみてください。Class(es)」という項目で、自分で作ったcssを読み込めるのかなと思ったんですが、使い方がよくわかりませんでした。英語のページもあさってみましたが、なにしろ英語は苦手なもんでチンプンカンプン。誰かこの設定の使い方わかった人がいたら、教えてください。そんなわけで、ここでは単純にshThemeDefault.cssの後ろに書き足したというわけです。わからないついでに、もうひとつ。Code」と表示するようにしてありますが、できれば「CSS」とか「HTML」とかソースに合わせて表示したいところです。xml;”などとなっています。これってcssであつかうときは、どうしたらいいんだろう?よくわかりません。詳しい導入方法、使い方などは、下記サイトをご覧になるとわかりやすいと思います。EvolvedのSetting導入からセッティングまで図解入りでとてもわかりやすいです。<はなし半分なマトメ。(0)2009.03.08.CSSでドロップダウンメニューこのブログを作るに当たって、いろいろと試行錯誤をした記録です。忘れてしまうので、覚書として書き留めています。今回はヘッダーのメニュー編。合わせて広がりますCSSのドロップダウンメニューです。Themeで一部表示がおかしくなっているところがあったので、少し整理してみました。ヘッダー部分に横並びメニューとしてデザインしていて、メニュー項目にカーソルを合わせると階層式に子メニューが表示される、よく見るタイプです。メニューなのでリンク項目であることを前提に、リストとしてマークアップします。</li></ul></div>1段目は横並びのメニュー項目で、2段目以降は入れ子構造にしていきます。ドロップダウンメニューとしての基本形。/*幅に応じて改行*/}ul:リストの装飾は不要なので削除。マージン、パディングも0にして、いったんきれいな身体に。leftで横並びにします。できればひとつひとつのメニュー項目の幅をそろえたいと思いますが、文字数によってはピッタリ納まるとは限らないので、あくまでも最小幅とし、文字数が増えても対応できるようにしておきます。94pxはヘッダーの幅と入れたいメニュー項目数から逆算して適当に決めた数値。nowrapは下層のメニュー項目も改行しないようにしています。ulはメニューの2段目以降を指定しています。absoluteを指定して、2段目以降のulにabsoluteがかかるようにします。2段目のulの親要素である1段目のliにはpositionが指定されていないので、親要素の下に絶対配置されます。サイドバーなどにメニュー項目が重なったとき、下になって隠れてしまう場合もあるので。leftで縦並びに戻します。position:relativeを入れて2段目以降のリスト項目左上を基準とします。100%は、リスト項目どれかの文字数が多いときにそれに合わせて同じ幅になるようにしています。ulにもabsoluteがかかっていますが、親要素である2段目以降のliでposition:relativeを指定してあるのでその要素の左上が基点となり、子要素であるulにtop、leftなどで基点からの位置を指定します。100%で親要素のul幅分右へずらしています。4段目、5段目と階層が増えても、親要素、子要素の関係は変わらないので同じように表示されます。blockで表示するようにします。例によって、IE用の対策。100%を指定してもなぜか最大幅のメニュー項目に合わせて同じ幅に広がってくれないので、*+htmlハックでIE用にメニューの幅を固定して改行するように指定してます。他のブラウザと見た目が少し変わりますが読めるから大丈夫、というレベルで対応。Code」の「IE7.js」を使わせてもらいます。type="text/javascript"></script><!&#91;endif&#93;-->を書き込むだけです。IE6は、しょうがないから最低限の対応だけしておくか、というスタンスなのでご勘弁を。対応」を見てください。上記の*+htmlハック部分も「IEの条件付きコメント」を使って別ファイルにしたほうがスッキリします。あとは、メニューっぽく装飾を施します。#343434;}文字色やバックグラウンドの色は、メニュー内のa要素で指定。block;でブロック要素にしてサイズを固定します。a:hoverでカーソルが乗った位置がわかるように文字色とバックグラウンド色が変わるようにします。2段目以降は文字サイズを少し小さくしてみました。その他諸々の指定は、個人個人の好みの問題です。IEが絡んでくるとなかなかうまく表示されない場合もあって、たとえば2段目と3段目で少し隙間を空けようかとか、逆にちょっと重ねてみようかと思うと、細かいところでいろいろ苦労をすることになります。Operaも少し挙動が変になったりします。それぞれのブラウザであまり苦労をしないで動くような最低限のデザインにしてあります。あとは応用ですので、バックの色やボーダー、イメージ画像を使ったりしていろいろバリエーションを楽しめると思います。仕事のプレゼン用にiPadを購入。2011年作成の設計事務所のウェブサイト。要望に合わせて極めてシンプル。北海道フィンランド協会主催のフィンランド語講座です。大東流というのは合気道の元祖ともいえる武道です。2012年リニューアル。写真以外のアイコンなどもすべて作っています。「父」の字をモチーフしたロゴマークも作らせていただきました。2008.07.27。