htmlその昔、ナビゲーション部分を「パンくず」なんて表現することを知らなかったウブな僕は、htmlをみていたときのコメントアウトに「パンくず」と書かれていたのをみて、「はて、パンくずってのは画面をワザと散らかしたようにするんかな?」なんて見当違いなことを思っていた。そんな僕も立派になりました(?)。今、どのページに居ますよ的な表示でもおなじみのパンくず。僕の場合は単純にリストで組み立てて、cssで横並びや階層部分の処理をすることが多いです。今回はそのやり方を紹介してみたいと思います。スポンサーリンクざっくりとコーディング大体いつも使う雛形は以下の感じ。これを基礎にマークアップしていきます。textでのhtml5の変換と同じものだったりします。href=""></head><body></body></html>これにヘッダー部分、メイン部分、フッター部分の区分けを追加します。<footer></footer></body></html>こんな感じ。必要に応じてidやclassを追加しますが、今回は省略。パンくず部分はヘッダーかメインコンテンツかどちらに追加するか迷うところですが、ヘッダーを他のページでも共通にするとなると、メインコンテンツ部分に実装するのが良さそう。いうことで、そちらにパンくずエリアを設定しましょう。<footer></footer></body></html>クラス名をbread_listに設定。ulタグに直接書いてみました。ついでにリセットcssも設定しておきましょうか。Reset」を使用していきます。リセットCSSとは、Webブラウザが内部に持つWebページの表示スタイルの規定値(デフォルト設定)を上書きし、特定の状態に初期化すること。そのために読み込ませるスタイルシート(CSSコードやCSSファイル)。<footer></footer></body></html>表示してみるとこんな感じになりました。文字が並んでるだけですね。flexで横並びにしてみる次に、styleを設定して表示を整えていきます。良い並びにするためにflexを使用します。flex;}とりあえず、横並びになりました。pageこれじゃないでしょうか。次は”>”を追加していきましょう。cssのnotセレクタをうまく利用してみたいと思います。“を追加、となってます。これによって、liタグが増えていっても、その分だけパンくず表示ができるようになっています。あとは間隔の調整をしておきましょう。今回はそれを利用してのパンくず表示の処理をかいてみました。li部分を動的に生成するようにすれば、自動的にパンくずが設置できるようになったりもします。階層の名前を拾う形にすれば、そんなに複雑じゃなくできるかも......いずれチャレンジしてみてもいいかもしれませんね。画像で縁取り文字を作る方法は、文言に変更がない場合には便利で有効。その1ニッチ過ぎて需要があるかどうかわかりませんが。style】引用符の設定quotesを設定してみよう使う場面が少ないhtmlタグやcssプロパティがあったりしますよね。今回のお題である引用などは、レポートや学術的なモノなどでガンガン...記事を読む【css】レスポンシブで縦横比を固定しておく簡単な方法スマートファーストなんて言葉もあるように、webもPCメインからスマートフォンなどのデバイスにあわせたデザインやタグの書き方をしない...記事を読む【css】フッターをページ下部に固定する方法【お手軽コピペ】メインのコンテンツ量が少なくて、フッター部分が浮いてしまうことって稀によくあるかと思います。この前もお仕事としては無しになったものの...記事を読むCSSで画像を簡易切り抜きimgタグなどで縦横の長さを固定にしたとき、縦横比が違う画像を表示したりした際につぶれちゃったり伸びちゃったりしますよね。デスクトップPC以外に、持ち運び用のタブレットPC、緊急時対策用のノートPCと3台を併用している状態だったりします。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Pで作業軽減しましょ。