最近知った「Googleアラート」。
自分の興味のあるキーワードを設定しておくだけで、それに関連する記事をピックアップしてメールに届けてくれる機能です。
キーワードには「CSS」や「html」、「javascript」などと記載して使っています。
届いたメールのサンプルはこんな感じ↓
設定には、キーワード以外に配信頻度が設定でき、「1日1回、その都度、1週間に1回」が選べます。
また、収集元をニュースやウェブ、グループとカテゴリを選択。（総合もある）
収集元で配信された記事から、設定したキーワードに関連する記事を届けてくれる、というものです。
RSSより設定が簡単で、なにより自分が購読していないRSSなどの情報を届けてくれるため、RSSと合わせて使うとより情報収集力がアップすること間違いなしです！
カテゴリごととか、コンテンツごととか、DIVでひとくくりにして決まったレイアウトで並べていく、というのはよくあると思います。
その中で、ひとつのDIV内にh1要素やP要素、UL要素などが混在していると思います。
そのDIVに全体の余白を設定するケースもよくあると思います。
しかし、h1要素などのタイトル部分には余白を設定したくない、という状況も結構あるのではないでしょうか。（俺だけかな・・）
まぁサンプルを見るのが一番早いので↓こんな感じ。
サンプルタイトル
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
ぱっと見はわかりづらいかもしれませんが、全体を囲うDIVにpaddingを設定し、タイトル部分だけネガティブマージンで相殺しています。
これに気付く前は、そのDIVからタイトル要素だけを外に出して…みたいなことをやってました。
が、コンテンツが増えていくとソースが見づらい上に編集もなんだかめんどくさい。
で、ネガティブマージンで解決できるだろうってことに気づいて適用してみたものの、なぜかIEでは見た目的には余白が消えたものの、なぜか反対の余白がまだ残っているらしく、親ボックスのDIVの幅が伸びる。
さらにIEの「幅が勝手に伸びる」というバグも手伝って、floatしているレイアウトの場合なんかはカラム落ちまでする始末。
なので、しばらくこの方法を封印していたのですが、なんと反対側の部分にもネガティブマージンを設定するときれいに余白が消えることを発見！（当たり前かもしれませんが、気づかなかった・・）
なのでメモ的にエントリーを書いてみました。ソースは以下から。
コメント入力中だったり、決まったページ遷移から外れる処理だったり、ページを移動する前に確認したい場合があると思います。
最近の案件で、これを使う機会があって調べたのでメモ的にエントリーしてみます。
ちなみに、これを簡単に実装するスクリプトも書いてみたのでよかったら使ってみてください。
ってことで以下サンプル↓
最近使っているCSSの管理の方法を書きたいと思います。
みなさんも色々工夫をしていると思いますが、CSSの管理はなかなか大変です。
それも、他人が書いたCSSを読むのはとても困難。
というのも、プログラムほどCSS同士の関連性が見えないせいだと思います。
そこで、色々なところで、後から見てもどんな処理をしているのかが分かるようにコメントをつけます。
その際、ある塊ができると思います。
たとえば、あるレイアウトを記述している際に、「#container h2」とか「#container .text span」みたいに「#container」を基準としたCSS群なんかができると思います。
そのCSSを記述する上部に、「#conainerの記述部分はここだよ」的なコメントを入れることが考えられます。
そのコメント部分に「[=toNext]」みたく、タグ(?)を挿入します。
また、この部分以外にも、各コメント部分に上記のタグのようなコメントを挿入するわけです。
これをすることのメリットは、あるプロジェクトなんかでCSSの記述方法のルール付けの際に、「CSSの頭だしは「[=toNext]」で検索すること、みたいにルールを作ります。
この方法に従って描かれたCSSファイルを閲覧するときは、この頭だしのコメントを検索することで各コメントごとへ飛んで行き、ざっとファイルの中身を把握するのに役立てる、ということです。
また、その頭だしされたコメントの中に、そのコメント以下に続く処理がなんなのかを書いておくと、さらに可読性があがると思われます。
・・と、最近やってることを書いて見ました。
みなさんも、こんな工夫をしてるよ、ってことをコメントくださるとうれしいです(*'-')
ちなみに、コメントのサンプルはこんな感じ↓
アルバムや写真ギャラリーなど、画像をリストにして横並びに配置したいときがあると思います。
すべての画像が同じサイズであれば特に問題ないと思いますが、それぞのれ画像のサイズが違う場合、特に高さが小さい画像などが含まれる場合、縦方向に中央に配置するのがむずかしいと思います。
(テーブルを使えば比較的簡単にできますが、いちおうCSS関連のブログなのでCSSで実現する方法でｗ)
例えばこんな感じ↓
今回のテクニックの肝は、displayのプロパティである「table-cell」「inline」「inline-block」の3つを複合的に使うところです。
ちなみにこのテクニックは、自分が愛読している「CSS HappyLife」さんのところの「画像とかの横にあるテキストを上下中央に」というエントリーを参考にさせてもらいました。
異なるサイズの画像を縦横中央配置にしてリスト状に並べるサンプル(IE互換モード)
異なるサイズの画像を縦横中央配置にしてリスト状に並べるサンプル(IE準拠モード)
©2008 CSS-EBLOG. All Rights Reserved
