両端をそろえたリストの表示にチャレンジしました
アフィリエイトサイトで、成分表示などで役に立ちそうなリスト表示方法を試してみました。
リストタグでマークアップして左右に振り分ける?
うまく文字で表現できないのですが、印刷物の目次ページや、加工食品の成分表示などでよく見かける表示をなんとかブログで表示できないかと考えていたところ「WebDesigning」を眺めていたらそれらしい紹介がされていましたので、これを少し変更して紹介します。
Sponsored links
Sponsored links
アフィリエイトサイトで、成分表示などで役に立ちそうなリスト表示方法を試してみました。
リストタグでマークアップして左右に振り分ける?
うまく文字で表現できないのですが、印刷物の目次ページや、加工食品の成分表示などでよく見かける表示をなんとかブログで表示できないかと考えていたところ「WebDesigning」を眺めていたらそれらしい紹介がされていましたので、これを少し変更して紹介します。
Sponsored links
ページ上でXHTMLタグを表示したい場合やCSSを表示したい場合があると思います。
ページカスタマイズ法などを紹介するときにpreタグを使いますが、preタグの使い方とCSSに加えたいプロパティがありますのでお好みで選んでください
PREタグの使い方の続きを読むアフィリエイトリンクを記事に埋め込む際に、左右どちらかに寄せたいとか、センタにリンクを貼りたいと思う場合があると思う。
今回は、XHTMLでW3CにもValidになりスタイルシートを使う方法で説明します。
ブログの出現で既存のサイトも脱テーブルデザインとかがルールのように認識され始めて数年たちますが何が何でも脱テーブルがよいという訳ではありません。
レイアウト(見た目)を整える部分はCSSで、「表形式」を表現するためにはテーブルは有効です。
ここではブログのエントリー内での活用法を書いてみたいと思います。
それでは簡単に3列×7行のテーブルを書いてみます。
テーブルデザインのサンプル
手段 | 時間 | 料金 |
---|---|---|
平均 | 約83分45秒 | ¥400 |
トータル | 約335分 | ¥1600 |
電車 | 約60分 | ¥550 |
バス | 約90分 | ¥750 |
車 | 約75分 | 約¥300 |
自転車 | 約110分 | ¥0 |
表題の文字サイズとセル内見出しの背景色とテーブルの外枠をCSSでコントロールしています。
表題とセル内見出しを定義(caption,th)
その他、table内の料金数値は右寄せを指定しています
続きでテーブルをデザイン化します。