mouseoverして下さい
mouseoverして下さい
パンくずリストをどうやって実装するか-
コーディングする度にどの方法が最適なのかを考えてしまいます
どの方法を使えばよいか決定的な理由が見いだせず、”これ”と決めれずにいました
色々と調べてみていると、
せっかくHTML5で記述しとぅんやし、それを使ってみようかなーという気に
ということでやってみたのが以下
<nav> <ol> <li><a href="/" rel="index up up up">第一階層</a></li> > <li><a href="/products/" rel="up up">第二階層</a></li> > <li><a href="/products/dishwashers/" rel="up">第三階層</a></li> > <li>現在位置</li> </ol> </nav>
rel属性は、リンク元からリンク先への位置づけを示します
その内、indexは索引文書を示します(と書いてました・笑)
つまりはindex.htmlを指すってことですね
upは自分から見てどれだけ上の階層かを示します
1階層上ならupは1つ、2階層上なら2つ、というように
これ以外に、Google先生はHTML5のマイクロデータを使うことを推奨しています
はて、マイクロデータ??
詳しくはココをチェックして下さい
マイクロデータとは、タグに意味付けを与えるものです
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses" itemprop="url"> <span itemprop="title">洋服</span> </a> › </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses/real" itemprop="url"> <span itemprop="title">ドレス</span> </a> › </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url"> <span itemprop="title">緑のドレス</span> </a> </div>
例えば上記のようなもの
いちばん外側のdivにあるitemtypeで一意的に意味付けをし、
itempropでタグにその中での意味を与えます
・・・若干煩雑かな?
現状ではまだ非現実的かも
ということで、<nav>を使った最初の方法か、
もっと簡単に
<p><a href="/">ホーム</a> > <a href="#">第一階層</a> > <a href="#">第二階層</a> > 現在位置</p>
でも良いかも
自分はFirefox使い
彼は、長い半角文字列だと律儀に折り返さず一列に表示してしまいます
自分の関わる案件だとこれはマズい。。。
そんな時に使えるのが…
word-wrapプロパティとword-breakプロパティ
word-wrapは表示範囲に収まりきらない単語がある場合に、単語の途中で折り返すかどうかを指定できます
word-wrap: normal; デフォルト値、特になにもしない
word-wrap: break-word; 必要に応じて折り返します
word-breakは、文の途中で折り返すかどうかを指定できます
word-break: normal; デフォルト値、特になにもしない
word-break: break-all; 言語に関係なく表示範囲で折り返し、単語の途中で折り返すことも
word-break: keep-all; 言語に関係なく、単語の途中では改行せず単語の切れ目で改行されます
これを折り返し表示させたい要素に加えると適切な位置で折り返してくれます
これらは元々IEが独自に採用したものですが、
CSS3で標準装備されるようなので、結果的にほとんどのブラウザで適用されている模様