Home » css

Sponsored links

css

両端をそろえたリストの表示にチャレンジしました

アフィリエイトサイトで、成分表示などで役に立ちそうなリスト表示方法を試してみました。

リストタグでマークアップして左右に振り分ける?
うまく文字で表現できないのですが、印刷物の目次ページや、加工食品の成分表示などでよく見かける表示をなんとかブログで表示できないかと考えていたところ「WebDesigning」を眺めていたらそれらしい紹介がされていましたので、これを少し変更して紹介します。

両端をそろえたリストの表示にチャレンジしましたの続きを読む

Sponsored links

PREタグの使い方

ページ上でXHTMLタグを表示したい場合やCSSを表示したい場合があると思います。

ページカスタマイズ法などを紹介するときにpreタグを使いますが、preタグの使い方とCSSに加えたいプロパティがありますのでお好みで選んでください

PREタグの使い方の続きを読む

アフィリエイトリンクをイメージした通りに並べる

アフィリエイトリンクを記事に埋め込む際に、左右どちらかに寄せたいとか、センタにリンクを貼りたいと思う場合があると思う。
今回は、XHTMLでW3CにもValidになりスタイルシートを使う方法で説明します。

アフィリエイトリンクをイメージした通りに並べるの続きを読む

CSSで見出しのデザインの変更にチャレンジ

エントリータイトルの見出しではなく、エントリー内で使う中見出しの見栄えをCSSで変更にチャレンジしてみたいと思います。

CSSで見出しのデザインの変更にチャレンジの続きを読む

テーブルをスタイルシート(CSS)でデザインしよう

テーブルのデザインの前にここでもSEOを

ブログの出現で既存のサイトも脱テーブルデザインとかがルールのように認識され始めて数年たちますが何が何でも脱テーブルがよいという訳ではありません。
レイアウト(見た目)を整える部分はCSSで、「表形式」を表現するためにはテーブルは有効です。
ここではブログのエントリー内での活用法を書いてみたいと思います。

簡単なtableダグを使ったサンプル

それでは簡単に3列×7行のテーブルを書いてみます。

テーブルデザインのサンプル

通勤手段
手段 時間 料金
平均 約83分45秒 ¥400
トータル 約335分 ¥1600
電車 約60分 ¥550
バス 約90分 ¥750
約75分 約¥300
自転車 約110分 ¥0

表題の文字サイズとセル内見出しの背景色とテーブルの外枠をCSSでコントロールしています。

表題とセル内見出しを定義(caption,th)
その他、table内の料金数値は右寄せを指定しています
続きでテーブルをデザイン化します。

テーブルをスタイルシート(CSS)でデザインしようの続きを読む

livedoor Readerに登録
RSS
livedoor Blog(ブログ)

ページの先頭へ戻る