MS Access Tips/Sample and VBA and Blog customize etc...

次ページ、前ページへのリンクをCSSデザインしてみた

相変わらずテンプレート弄りをしていますが、今回は、記事下部の 次ページ、HOME、前ページへのリンクをCSSとIconFontでデザインしてみました。

気になっていたのは、このリンクが1行で表示されるのだが、ページタイトルが長いので、途中で改行されて見づらいという点です。

次ページ、前ページへのリンクをCSSデザインしてみた-タイトル

難易度:

不満点を解消するために

タイトルが長かったり、表示幅が狭かったりすると(リキッドデザインなので)、途中で改行されてしまいす。

現状の前次ページリンク

これを、次ページ、HOME、前ページへ を3分割してよこに並べて、テーブルのセルのようにセル内で改行されて上下センタリングするというのが目標です。

前後矢印やHOMEはIcon Font(Font Awesome)を使って見栄えよくする。

下記が最終目標です。

目標の前次ページリンク

テーブルを使えば簡単にできそうですが、レイアウト目的でテーブルを使うのは推奨されないらしいので、CSSを使ってレイアウトをすることにします。

改修前のテンプレート

改修前のテンプレートのHTMLとcssは下記です。

nav要素はHTML5で追加されたものだそうです。ナビゲーション・リンクを伴うセクションを表すそうです。

nav 要素 - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP

id属性に"entry_navi"を割り当てます。一つだけなのでidにしましたが、1ページに複数配置するなら class属性にしてください。

nav要素に単純にaタグでリンクを記述しただけです。CSSも文字の中央寄せと余白調整だけです。

サンプル01

HOME

まずは上下センタリング

とりあえずアイコンは後回しで、とりあえずテーブルのように3列レイアウトにして上下センタリングに挑戦。

aタグの内側をspanタグで囲んだだけ。

#entry_navi a 要素に display:block; float:left; を付加して、左から横に並ぶようにします。

postnav a span要素にheightを設定します。高さが固定でないと上下のセンターが決まらないですからね。

display:table-cell; でテーブルのセルの振る舞いをさせて vertical-align:middle; で上下センタリング。上下センタリングは他にもいろいろ方法がありますが、今回はこの方法がシンプルにできそうで、自分にも理解しやすかったです。

初心者でもすぐ使える!CSSを使った中央寄せの方法まとめ8+α | 株式会社Bark to Imagine

.prev .next .home のそれぞれに % でwidthを設定して合計が100%になるようにします。

サンプル02
HOME

Font Awesome でアイコンを表示

上記のhtmlに i要素でFont Awesomeフォントを挿入します。cssは上記から変更なしです。

i要素のクラス属性に fa fa-angle-left を付加することです左向きアイコンが表示されます。fa-5x を付加するとフォントサイズが5倍に拡大されます。pull-left の付加で右寄せになります。右向きアイコンには pull-right を付加します。

サンプル03

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/444-b66bd92e
該当の記事は見つかりませんでした。