カテゴリー「テクニック的な話題」の記事一覧
- 2025.05.31 [PR]
- 2012.09.11 id名称のルール
- 2012.08.15 リストの偶数行・奇数行で交互に背景色を変える
- 2012.08.09 定義リスト（dl,dt,dd）を使いこなす
- 2012.08.04 エクセルのグラフをWebページで使用する
- 2012.07.20 リストでサイトマップを作る
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
id名称のルール
ozonです。
cssが思いどおりに動作しないことに一昼夜悩んでいた。
ミスの原因はidの名称の1文字目を数字にしてしまったこと。
具体的にはdiv id=”1gyou”のような感じ。
超初歩のミスだろうな。
どおりでネット検索しても解決策が見つからなかったはずだ。
誰もミスらないような超初歩のミスなんだよ。
css適用の優先順位とか、そんなレベルの話ではなかった。
cssが思いどおりに動作しないことに一昼夜悩んでいた。
ミスの原因はidの名称の1文字目を数字にしてしまったこと。
具体的にはdiv id=”1gyou”のような感じ。
超初歩のミスだろうな。
どおりでネット検索しても解決策が見つからなかったはずだ。
誰もミスらないような超初歩のミスなんだよ。
css適用の優先順位とか、そんなレベルの話ではなかった。
PR
リストの偶数行・奇数行で交互に背景色を変える
ozonです。
件名のとおり。
縦長のリストを見やすくするため、行の背景色を
交互に変えるテクニック。
リスト（ li,dt,dd ）でもテーブル（ th,td ）でも使用可だそう。
※thとtdは自分では試していない
CSSの擬似クラスで以下のコードを加えるだけ。
:nth-child(even)
ちなみに、evenは偶数を示す。奇数ならoddとする。
具体的な使用例では・・・
dd:nth-child(even) {
background-color:#000
}
上記のコーディングで、偶数行の背景色が黒になる。
件名のとおり。
縦長のリストを見やすくするため、行の背景色を
交互に変えるテクニック。
リスト（ li,dt,dd ）でもテーブル（ th,td ）でも使用可だそう。
※thとtdは自分では試していない
CSSの擬似クラスで以下のコードを加えるだけ。
:nth-child(even)
ちなみに、evenは偶数を示す。奇数ならoddとする。
具体的な使用例では・・・
dd:nth-child(even) {
background-color:#000
}
上記のコーディングで、偶数行の背景色が黒になる。
定義リスト（dl,dt,dd）を使いこなす
ozonです。
これまでサイトマップなどを作るときにリスト（ul,li）を使ってたが、
今後は定義リスト（dl,dt,dd）を使っていこうと思う。
この２つの違い、具体例で示そう。
以下のようなメニューを作るとする。
国産メーカー
・トヨタ
・ホンダ
・ニッサン
仮に通常のリストでコーディングすると、国産メーカーの行は
< h3 >などでマークアップし、トヨタ以下は< li >となる。
これはこれで問題無いのだが、構造上、< h3 >と< li >は無関係だ。
アウトプットでは見出しと項目のように見えるが、コーディングの
htmlの構造上では、見出しと項目は無関係だ。
一方で、定義リストを使った場合、全体を< dl >でくくったうえ、
国産メーカーは< dt >、トヨタ以下は< dd >でマークアップする。
メニュー全体が< dl >の傘下に置かれるので、見た目はもちろん、
htmlの構造的にも非常に良い。
つまり、コードを見ただけで、出力がイメージできるってコトだな。
定義リストは、上記のようなメニューに使えるだけでなく、
「日付と出来事」、「用語とその説明」など、日記や用語集などの
ページにも使える。
これまでサイトマップなどを作るときにリスト（ul,li）を使ってたが、
今後は定義リスト（dl,dt,dd）を使っていこうと思う。
この２つの違い、具体例で示そう。
以下のようなメニューを作るとする。
国産メーカー
・トヨタ
・ホンダ
・ニッサン
仮に通常のリストでコーディングすると、国産メーカーの行は
< h3 >などでマークアップし、トヨタ以下は< li >となる。
これはこれで問題無いのだが、構造上、< h3 >と< li >は無関係だ。
アウトプットでは見出しと項目のように見えるが、コーディングの
htmlの構造上では、見出しと項目は無関係だ。
一方で、定義リストを使った場合、全体を< dl >でくくったうえ、
国産メーカーは< dt >、トヨタ以下は< dd >でマークアップする。
メニュー全体が< dl >の傘下に置かれるので、見た目はもちろん、
htmlの構造的にも非常に良い。
つまり、コードを見ただけで、出力がイメージできるってコトだな。
定義リストは、上記のようなメニューに使えるだけでなく、
「日付と出来事」、「用語とその説明」など、日記や用語集などの
ページにも使える。
エクセルのグラフをWebページで使用する
ozonです。
fireworksでWeb素材を作成してるんだが、
素材の中にグラフを埋め込む方法を調べた。
驚くほど簡単に解決。
エクセルでグラフを作成し、「webページとして保存」を選択する。
すると、ファイルとフォルダが１つずつ出力される。
フォルダの中に、グラフ部分だけがgifファイルで保存されている。
あとは、このgifファイルをfireworksから読み込んでやればいい。
やはり、グラフを作るなら、餅は餅屋。エクセルで作るのがベスト。
Webデザイナーにもofficeソフトが必須なんだね。
fireworksでWeb素材を作成してるんだが、
素材の中にグラフを埋め込む方法を調べた。
驚くほど簡単に解決。
エクセルでグラフを作成し、「webページとして保存」を選択する。
すると、ファイルとフォルダが１つずつ出力される。
フォルダの中に、グラフ部分だけがgifファイルで保存されている。
あとは、このgifファイルをfireworksから読み込んでやればいい。
やはり、グラフを作るなら、餅は餅屋。エクセルで作るのがベスト。
Webデザイナーにもofficeソフトが必須なんだね。
リストでサイトマップを作る
ozonです。
新サイトのcssをチクチクいじってる。
今日はトップページに表示しているサイトマップに、cssのみでロールオーバーを設定した。cssのみってのがミソでね。メンテナンスが容易だ。
a:hover にbackground-colorを設定してやるだけでロールオーバー完成。
しかし、このままだとロールオーバーの幅がテキスト長と同じになってしまうので、a にdisplay:blockを設定してやる。このあたりは、gifロールオーバーより難度が高いところだろうね。
あと、テキストの下に破線を入れた。よそのサイトを見て、行間にラインを入れると、引き締まって見えるような気がしたんだよね。
li にborderを設定してやるだけのお手軽な対応だった。
dreamweaverでcssをいじると、新しいコードは末尾に追加されていくので、そのうち整理しないといかんだろうな。
新サイトのcssをチクチクいじってる。
今日はトップページに表示しているサイトマップに、cssのみでロールオーバーを設定した。cssのみってのがミソでね。メンテナンスが容易だ。
a:hover にbackground-colorを設定してやるだけでロールオーバー完成。
しかし、このままだとロールオーバーの幅がテキスト長と同じになってしまうので、a にdisplay:blockを設定してやる。このあたりは、gifロールオーバーより難度が高いところだろうね。
あと、テキストの下に破線を入れた。よそのサイトを見て、行間にラインを入れると、引き締まって見えるような気がしたんだよね。
li にborderを設定してやるだけのお手軽な対応だった。
dreamweaverでcssをいじると、新しいコードは末尾に追加されていくので、そのうち整理しないといかんだろうな。
アクセスランキング
成果履歴
2012/02 642,703円
2013/01 668,780円
2012/12 331,230円
2012/11 247,542円
2012/10 288,633円
2012/09 314,480円
2012/08 237,926円
2012/07 181,065円
2012/06 253,489円
2012/05 665,464円
2012/04 452,864円
2012/03 554,660円
2012/02 386,575円
2012/01 348,123円
2011/12 243,519円
2011/11 280,782円
2011/10 233,750円
2011/09以前は省略