Foundation 4を使ってテーマを作ってみた

Twitter BootstrapやHTML KickStart、Blueprint等、CSS Frameworkの一つのFoundation 4を使ってWordPressのテーマを変えてみました。 本当はYUIのPureを使ってみようかと思っていたんですが、フォントの指定によって段落ちすることがある、という不具合が起きてしまったのでFoundation 4を使ってみました。 特徴 レスポンシブウェブデザイン対応のための仕組みが多数組み込まれており、基本的な事はFoundation 4の仕様で実装することが出来ます。 例えば、特定の幅より小さいウィンドウサイズの時の表示・非表示、グリッドのサイズ変更、メニューの格納・タップで表示等、便利な機能が多数含まれています。 使い方 Foundation 4は、「normalize. »

次世代Zen-coding「Emmet」をSublime Text 2で試してみた

HTML/CSSのコーディングを効率化する「Zen-Coding」が次期バージョンで大幅に仕様を変更し「Emmet」と名称を変更するようなので、現在公開中のベータバージョンを試してみました。 Sublime Text 2にインストール Sublime Text 2(以下ST2)向けのEmmetはGitHunにて公開されていますので、レポジトリを追加してインストールすることが出来ます。 具体的な手順は下記の通り。 コマンドパレット(Win:Ctrl+Shift+p、Mac:Command+Shift+p) »

CSSの拡張メタ言語「LESS」についてちょっと調べてみた

前々から「LESS」という名前や、何となくどんなことが出来るのかについてはある程度知っていたのですが、環境を構築するのが面倒で触っていませんでした。 そんな中ちょっと、LESSのビルド環境を構築することがあったので、ついでに調べて使ってみる事にしました。 LESSについて LESSとは、CSSの拡張メタ言語で、簡単に説明するとCSSでこんなことがしたい…!という機能を加えた独自の言語です。 こういった拡張メタ言語については、同じCSSには「SCSS(Sass)」や、HTMLの「Haml」という言語が存在します。 また、LESSのコンパイル?はJavaScriptで実行するので、Node.jsを使ってサーバサイドで行うだけではなく、 »

WordPressのRSSの見た目をCSSで変更してみる

折角ブログの見た目を変更したので、RSSもいじってみようと思い、CSSでのデザイン変更を行ってみました。 CSSを書いて、読み込ませるだけ・・・ではあったのですが、RSS用のテンプレートの適用方法が若干特殊だったので残しておきます。 RSSのテンプレートを変更する WordPressにはRSS用のテンプレートは用意されていないため、ソースファイルを触るしかないのかな?なんて思っていましたが、アップデートする度に元に戻ってしまうのがイヤなので、調べてみるとこんな方法で各種フィード用のテンプレートを実現できるようです。 上記記事は”functions.php”を書き換える方法ですが、プラグインも作成されているようなので、そちらを使ってみても良いかもしれません。 RSSにCSSを読み込ませる RSSのテンプレートが作成できるようになったら、CSSを読み込ませるように書き換えます。 HTMLとは少しだけ記述が違い、こんな感じになります。 <?xml-stylesheet »

iPhone、iPadでのoverflow:scroll/autoの動作について

ある案件で、divタグにoverflow:autoを指定し、スクロールバーを表示される様な指定をしていたのですが、iPadで確認を取った時に、スクロールバーが表示されていない事を教えてもらい、iPhoneでも同様の状態になっている事に気づきました。 また、通常のスクロールのようになぞってもスクロールされず、中のコンテンツを確認することが出来ませんでした。 何か方法でもあるのかと調べてみたところ、「メモ: iPad(iPhone)の困った仕様」で、「二本指」でなぞることでスクロールする事が分かりました。 説明書が無い、また、二本指でのスクロールはあまり使わないことから、中々気づきにくい操作であるような気がするので、iPhone向けのコンテンツなら尚更、ページ内に説明文が必要な感じを受けました。 「直感的」な操作であるタッチパネルであっても、 »

HTMLのアンカーポイントの位置を上にずらしてみた

ページ内リンクなどで使われるアンカーポイントですが、特に指定をしないとウィンドウの上端に移動します。 ただ、ウィンドウの上端だと少し読みづらかったり、見つけづらかったりするので、少し余白を空けたいことがあります。 アンカーポイントの下に余白を空ける方法もあると思いますが、コーディングを済ませた後にアンカーポイントだけ挿入したい時に少し手間になってしまいます。 そこで、以下のようなCSSを適用させてみました。 .hideAnchor { display:block; height:0px; /height:1px; overflow:hidden; text-indent:-9999px; margin-top:-10px; padding-bottom:10px; } 上の記述でデザインはそのままに、 »

HTML5 Reset Stylesheetを適用

前の記事を書いた後、他のブラウザで見ていたら、Firefoxでも崩れていました。 さすがにFirefoxで崩れてしまうのはまずいので、色々調べていると、HTML5の新要素に対して、「disiplay:block;」をかけると以前の記述とほぼ同等でかけることが分かりました。 また、HTML5用のreset.cssを発見したので適用してみました。 HTML5 Reset Stylesheet | HTML5 Doctor Firefoxでも崩れてなくてバッチリ。だけど、残念ながらIE6は直りませんでした。 進行状況 HTML5 Reset Stylesheetの適用 »

CSSネガティブマージンのすすめ

コーディングを進めていくにあたって、コンテンツ領域からはみ出ているデザインや、一部分だけ余白を取らないようなレイアウトの時に、ネガティブマージンを利用しています。 IE6での崩れも少なく(多少解釈が違う箇所もあります)、色々なところで使えるので、備忘録のためにもどのような場面で利用したのか控えておこうと思います。 見出し部分だけ左右の余白がないレイアウト 見出し部分だけ左右の余白がなく背景が敷いてあるようなレイアウトの際に、いちいち見出しの時だけ余白のスタイルのdivから外す方法もあると思いますが、ネガティブマージンを用いればその必要も無くなります。 見出しの時だけdivから外す方法 <h2>見出し2</h2> <div class="inner"> < »

オブジェクト指向CSS : OOCSSについて

英語の記事なので、具体的にどんな内容が書かれているか理解できていませんが、オブジェクト指向CSS(Object Oriented CSS: OOCSS)について書かれた記事を読んで、CSSの記述方法について、もしかしたらOOCSSとは違う考えなのかもしれませんが、少し考えてみました。 これまで、スタイルを付与したい箇所にid/classを指定し、それぞれに固有のスタイルを当てはめていましたが、 Web上の表現として良く利用するスタイル そのサイト内でよく利用するスタイル そのページ内でよく利用するスタイル 指定の箇所でしか利用しないスタイル に分けられるのでは無いかと考え、それらについて定義したスタイルを「使い回す」だけでコーディングを行って、効率が良いのか試しています。 具体的にどのような記述を行っているかは以下の通り。 Web上の表現として良く利用するスタイル »