2007年1月

パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種

普通のエントリー久々な気がする今日この頃。

今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。

サンプルの前に

#main .entryBody #topicPath_01
とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。

取りあえず最終回：コンテンツ部分のデザインを完成させる

今回でビギナー向けと銘打ったこのカテゴリも最終回です。

もっと色々盛り込みたかったとか思ったり、自分で突っ込んだりしてる部分もありますが、自分の知識をアウトプットする練習も兼ねているので、細かいところはどっかに置いとくとして...

このデザイン→これ
を今回でカタチにします。

最終は、コンテンツ部分の見栄えの調整です。

んじゃ、いってみますか、、、

2段組

前回のエントリーに続き、今回は2段組の部分をやっていきます。

取り合えず、2段組部分の仕様をば。

  • デザインを見ていただければお分かりになるかと思いますが、サイドメニューの下に破線があるんですが、その破線がちゃんとメインコンテンツ部分の内容にあわせて伸びる（繰り返す）ようにします。
  • ボクの組み方はfloatなんでpositionを使った全体のレイアウトに関しては、ウチでは期待しないで下さい。（ポジションによるレイアウトでサイトを作成した経験がありません...）
  • このサンプルのHTMLはサイドメニューがソース上、コンテンツの上に位置してます。
    メインコンテンツ部分が上に来ても同様のレイアウトが実現できますが、それは追々ってことで。

だいたいこんな感じです。
んじゃ、いってみますか、、、

まずは構成。んで全体、headerをば

前回のエントリーが、ビックリするくらいアクセスあってびびってますが、変なプレッシャーに負けずまったりマイペースで行こうと思うです。

CSSを勉強する上でもっとも早い上達は、恐らく実践経験だと思います。
色んな参考書や、サイトを巡って脳内で考えてるのも一つの手段ですが、やっぱり組んでナンボだと思います。

って事もあり、すぐコーディングだけ出来る状態の基本データが入ってる下記練習用フォルダを使うと良いと思います。（はじめにと同じヤツです）

  1. 練習用フォルダ（zip）をダウンロードする
  2. 練習用フォルダ（exe）をダウンロードする

今回のサンプルの仕様は下記↓

  • XML宣言なし
  • DOCTYPE：XHTML 1.0 Transitional
  • 文字コード：UTF-8
  • 対象ブラウザ：IE6、Firefox2、Opera9

（対象ブラウザが少ないような気がするのは、気のせい。）

んでは、はじめますか。。。

CSSに関する基本的なこと4（優先順位、セレクタの組み合わせ）

3回続いた基本的なことも今回で最終です。
4回目の内容は、以下のことについて触れております。

んなの分かってるよ！って人は、次の次のエントリーにお進み下さい。

  • スタイルの優先順位
  • セレクタの組み合わせ
  • セレクタのグルーピング
  • スタイルの優先順位詳細

CSSに関する基本的なこと1（記述方法、使用できる文字、コメントアウト）

実際の作業に入る前に、基本的なことをやっておきます。

作業ミスや混乱などを避けるためにもまずは基本です。しっかりと見に付けておきましょう。

以下の事について触れるので、理解している方は次のエントリーにお進み下さい。

  1. CSSの記述の仕方
  2. セミコロンについて
  3. 大文字と小文字の区別について
  4. class名やid名で使用できる文字
  5. コメントアウトについて

はじめに

このカテゴリではCSSビギナーの方向けに、ボクなりな説明でCSSで組むサイトを分かりやすいように書いていきたいと思ってます。

結構実践型でやろーと思ってますんで、ちゃんと覚えようって方のみお願いします。

対象者

htmlをある程度理解していて、チョットだけでもいいのでタグ打ちが出来るよ。って人や今までテーブルレイアウトで組んできたけどいい加減CSSを覚えなければ...って人、CSS始めたばっかりって人を主な対象として書いております。

非対象者

全くホームページとか作った事ありません。って人やソースを一度も見たことがない人は、まずは基本的なhtmlに関して扱っているサイトさまや書籍などでお勉強してから読むようにしてください。

このカテゴリでの最終目標

サンプル画像CSSって美味しいの？っていう人が、取り合えず基本的な2段組レイアウト（左記のサンプル）が組めるようになる。

んでは、追記で取り合えず必要なモノとかの説明をしたいと思います。

IEの様々なバグの真相らしきもの

IEには様々なバグが報告されていますよね。
もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに...

背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。
こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、IE7でもwidthを指定して回避したりと色々やってると思います。

その他、IE独自拡張のzoomを使った方法なんかもあります。

今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。
と認識していましたが、つい先日ちょっと気になる内容をみつけましたのでご紹介。

DW8で生成するポップアップメニューがIE7で崩れる件を解消

DWで作成したポップアップメニューをIE7で見ると表示が崩れているという問題を簡単に解決する方法がネットのサラダボウルさんの下記エントリーで紹介されていました。
ネットのサラダボウル: DW8で生成するポップアップメニューがIE7で崩れる件を解消してみた

解決方法は簡単で、自動で出力される「mm_menu.js」というJava scriptのファイルの140行目あたりにある

var itemProps = '';

という記述を

var itemProps = 'white-space:nowrap;';

に修正し保存するだけです。

詳しくはネットのサラダボウルさんの下記エントリーを参照して下さい。
画像つきで丁寧に書かれておりますゆえ。
ネットのサラダボウル: DW8で生成するポップアップメニューがIE7で崩れる件を解消してみた

文書型宣言についてのアレコレ

  • (X)HTML

CSSを覚えていく上でXML宣言と文書型宣言に関しての理解がないと、組んでいくうちにブラウザによって表示の違いが生じ、後から色々とスタイルを調整しても何が原因で表示が違うのか分からなくなってしまうといった事があると思います。

という事で、文書型宣言について自分なりのアレコレを書いてみます。（間違ってるトコあったらご指摘願います）
XML宣言に関してのアレコレは前のエントリーで書いてます。

あ、文書型宣言ってのは、ウチのサイトの場合コレ↓です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XML宣言ってのはコレ↓です。

<?xml version="1.0" encoding="utf-8"?>

XML宣言についてのアレコレ

  • (X)HTML

CSSを覚えていく上でXML宣言と文書型宣言に関しての理解がないと、組んでいくうちにブラウザによって表示の違いが生じ、後から色々とスタイルを調整しても何が原因で表示が違うのか分からなくなってしまうといった事があると思います。

という事で、XML宣言について自分なりのアレコレを書いてみます。（間違ってるトコあったらご指摘願います）
文書型宣言に関してのアレコレは次のエントリーに。

あ、XML宣言ってのはコレ↓です。

<?xml version="1.0" encoding="utf-8"?>

文書型宣言ってのは、ウチのサイトの場合コレ↓です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

CSS2.1 で定義されているメディアの種類

たまに必要になると、良くわからなくなるCSS2.1で定義されているメディアの種類メモ。

all
すべての環境
screen
パソコン画面
tty
文字幅が固定の機器
tv
テレビベースのウェブブラウザ
projection
プロジェクタ
print
プリンタ
handheld
携帯用機器
braille
点字出力機器
embossed
点字プリンタ
speech
音声出力機器

振り分けるには、@mediaの後に半角スペースで該当のメディアの種類を指定します。
複数指定の場合はカンマ（,）区切りで指定。

@media screen,tv {
...
}
@media print {
...
}

出力とは関係ないですが、
@mediaルールは、Mac IE 5 が対応していないので、Mac IE 5 における CSSハックとしても使われてますね。

ネタを募集しております

STOPN' LISTENさんの記事を読んでて思ったんですが、結構自分に取っては当たり前だと思ってた事や誰でも知っているだろうって事が多かったりします。

これ↓

こないだ知人に「ある部分にボタンを後からいれようと思ったけど方法が思いつかない」と相談され、
よしきた、下記のような方法を伝授しました。

こういう事って結構あるんじゃないかなと思うのですが、ボクの周りにはCSS勉強してます！って人や、覚えたてな人があまり居ないので、
｢なんかCSSいぢってたら訳わかんなくなった｣
とかあったら教えて頂けたらなーと思います。

ウチのサイトを見てて、気になったトコロとかどうやってんのかわかんないところとか何でもいいんです。

デジパの制作実績に載ってるサイト見てソコの質問でもいいです。

アナタの素朴な疑問を教えて下さい！

管理人はネタに困っております。。。（切実

見出しの横などにボタンを配置

<$MTEntryTitle$>のイメージ結構見かける、見出しなどの横に配置されているボタン。

ウチのサイトでも、NEW ENTRYの横にRSSボタンをつけてます。

他に、続きを読むやMoreなんかが見出しの横にボタンやテキストとして配置されているケースが多いと思います。

このデザインを実現する際に、floatかpositionのどちらでも可能ですが、この場合はpositionの方が楽な上に柔軟に対応できる（と思う）のでオススメ。

↑上に行くよ