基本CSStest

2012年3月2日 (金)

【見出しと枠囲みのCSS】

メイン見出し- グレー地にピンク文字

<h2 class="newsDetailsHead">メイン見出し- グレー地にピンク文字</h2>


メイン見出し- 薄ピンク地にピンク文字

<h2 class="newsDetailsHead color">メイン見出し- 薄ピンク地にピンク文字</h2>


サブ見出し- ピンク文字にピンク下線

<h3 class="newsDetailsHead">サブ見出し- ピンク文字にピンク下線</h3>


サブ見出し- グレー文字にグレー下線

<h3 class="newsDetailsHead color1">サブ見出し- グレー文字にグレー下線</h3>


グレー地でグレー線囲み
<div class="newsDetailsBox02"><div class="newsDetailsBox02Inner">グレー地でグレー線囲み</div></div>


ピンク地でピンク線囲み
<div class="newsDetailsBox02 color1"><div class="newsDetailsBox02Inner">ピンク地でピンク線囲み</div></div>


グレー線囲み
<div class="newsDetailsBox03">グレー線囲み</div>


ピンク線囲み
<div class="newsDetailsBox03 color1">ピンク線囲み</div>


【トラックリスト表示の際のCSS】

  • 奇数リスト（背景グレー）
  • 偶数リスト（背景白）
  • 奇数リスト（背景グレー）
  • 偶数リスト（背景白）
  • 奇数リスト（背景グレー）
  • 偶数リスト（背景白）
  • 奇数リスト（背景グレー）

<ul class="newsBlockBordercolor">
<li class="odd">奇数リスト（背景グレー）</li>
<li class="even">偶数リスト（背景白）</li>
<li class="odd">奇数リスト（背景グレー）</li>
<li class="even">偶数リスト（背景白）</li>
<li class="odd">奇数リスト（背景グレー）</li>
<li class="even">偶数リスト（背景白）</li>
<li class="odd">奇数リスト（背景グレー）</li>
</ul>

【テーブルを使わずに画像＋テキストを並べる】

  • JIMI HENDRIX STORE

    JIMI HENDRIX STORE

    2010年、ジミヘン再発プロジェクト始動！完全未発表スタジオ音源集のリリースを筆頭に、過去の名盤も新装発売！関連タイトルもまとめてチェック！

  • MICHAEL JACKSON STORE

    MICHAEL JACKSON STORE

    ジャクソン5〜ソロまで、"KING OF POP"マイケル・ジャクソンのCD・映像作品・関連書籍/グッズなど商品情報を全て集約！ジャクソン・ファミリーの関連商品も！

  • THE BEATLES STORE

    THE BEATLES STORE

    ロック/ポップス史上最重要バンド"ビートルズ"の専門ストア。ビートルズのCD、書籍、グッズ等はもちろん、関連ニュースやメンバーのソロ活動作品まで網羅！

<ul class="newsBlockImageList">
<li>
<p class="newsBlockImageListImage">
<a href="/select/jimihendrix/">
<img src="https://img.hmv.co.jp/News/images/top/kadosawa/jimi_70x70.jpg" alt="JIMI HENDRIX STORE" width="70" height="70" border="0"/></a></p>
<div class="newsBlockImageListText">
<h4><a href="/select/jimihendrix/">JIMI HENDRIX STORE</a></h4>
<p>2010年、ジミヘン再発プロジェクト始動！完全未発表スタジオ音源集のリリースを筆頭に、過去の名盤も新装発売！関連タイトルもまとめてチェック！</p>
</div>
</li>
<li>
<p class="newsBlockImageListImage">
<a href="/select/michaeljackson/">
<img src="https://img.hmv.co.jp/News/images/top/kadosawa/kop_70.jpg" alt="MICHAEL JACKSON STORE" width="70" height="70" border="0"/></a></p>
<div class="newsBlockImageListText">
<h4><a href="/select/michaeljackson/">MICHAEL JACKSON STORE</a></h4>
<p>ジャクソン5〜ソロまで、"KING OF POP"マイケル・ジャクソンのCD・映像作品・関連書籍/グッズなど商品情報を全て集約！ジャクソン・ファミリーの関連商品も！</p>
</div>
</li>
<li>
<p class="newsBlockImageListImage">
<a href="/select/beatles/">
<img src="https://img.hmv.co.jp/News/images/top/kadosawa/beatles_store_70.jpg" alt="THE BEATLES STORE" width="70" height="70" border="0"/></a></p>
<div class="newsBlockImageListText">
<h4><a href="/select/beatles/">THE BEATLES STORE</a></h4>
<p>ロック/ポップス史上最重要バンド"ビートルズ"の専門ストア。ビートルズのCD、書籍、グッズ等はもちろん、関連ニュースやメンバーのソロ活動作品まで網羅！</p>
</div>
</li>
</ul>

【画像関連の小技（テーブル＋CSS）】

枠囲みのCSSを使用したとき、画像の大きさに対してテキストの量が少ないと、そのままだと画像が枠から下にはみ出します。
（普通にCSSを使った場合は、枠はテキストの量に応じてしか広がりません。自分のPCではギリギリOKだと思っていても、他のPCでは、表示サイズの設定やブラウザによって、はみ出している場合もあります。）


<div class="newsDetailsBox02 color1">
<div class="newsDetailsBox02Inner">
<img src="https://img.hmv.co.jp/News/images/top/kadosawa/hyori_top_7th.jpg" border="0" align="left" style="margin-right:10px"/>
枠囲みのCSSを使用したとき、画像の大きさに対してテキストの量が少ないと、そのままだと画像が枠から下にはみ出します。<br />
（普通にCSSを使った場合は、枠はテキストの量に応じてしか広がりません。自分のPCではギリギリOKだと思っていても、他のPCでは、表示サイズの設定やブラウザによって、はみ出している場合もあります。）
</div></div>

そういう場合は、一度<table><tr><td>で囲んでから、さらにCSSの<div>で囲むと、枠が画像の高さ分まで広がってくれますので、CSSを使用した枠囲みの中に画像を入れる場合は、画像とテキストなどを一度まとめてテーブルで囲んでおくようにしたほうが無難です。
<div class="newsDetailsBox02 color1">
<div class="newsDetailsBox02Inner">
<table><tr><td>
<img src="https://img.hmv.co.jp/News/images/top/kadosawa/hyori_top_7th.jpg" border="0" align="left" style="margin-right:10px"/>
そういう場合は、一度<table><tr><td>で囲んでから、さらにCSSの<div>で囲むと、枠が画像の高さ分まで広がってくれますので、CSSを使用した枠囲みの中に画像を入れる場合は、画像とテキストなどを一度まとめてテーブルで囲んでおくようにしたほうが無難です。
</td></tr></table>
</div></div>


見出しと枠囲みはあわせても使えます

組み合わせかたやHTMLの書き方によって、いくつかのパターンができますので、情報量や内容に応じて使い分けるといいです。
<div class="newsDetailsBox02 color1">
<div class="newsDetailsBox02Inner">
<table><tr><td>
<img src="https://img.hmv.co.jp/News/images/top/kadosawa/hyori_top_7th.jpg" border="0" align="left" style="margin-right:10px"/>
<h3 class="newsDetailsHead">見出しと枠囲みはあわせても使えます</h3>
組み合わせかたやHTMLの書き方によって、いくつかのパターンができますので、情報量や内容に応じて使い分けるといいです。
</td></tr></table>
</div></div>


【画像関連の小技（右クリック禁止）】

<img>タグの中に⇒ oncontextmenu="return false"　を仕込むことによって、画像に対しての右クリックが効かなくなり、画像が取りにくくなります。（取ろうと思えば取れるんですが）
使用制限があったり、権利的な部分が敏感そうな画像には仕込んで置くのがベストです。

<img src="https://img.hmv.co.jp/News/images/top/kadosawa/hyori_top_7th.jpg" border="0" align="left" hspace="10" oncontextmenu="return false"/>


【画像関連の小技（拡大）】

仕組みとしては、リンク先をページのURLではなく別途アップロードした拡大画像のURLに代えるだけの簡単なものです。
商品の仕様や特典の画像など、ユーザーが大きく見たいと思うようなものにはなるべくつけてあげましょう。

※ただし、この拡大画像には右クリック禁止の仕込みは出来ません。

<a href="https://img.hmv.co.jp/News/images/top/kadosawa/lee_hyori.jpg">
<img src="https://img.hmv.co.jp/News/images/top/kadosawa/hyori_top_7th.jpg" border="0" align="left" hspace="10" />
</a>

【時々使うフォントカラー】

時々使うフォントカラー・濃いピンク
<span style="color:#CD4187"><b>時々使うフォントカラー・濃いピンク</b></span>

時々使うフォントカラー・赤
<span style="color:#ff0000"><b>時々使うフォントカラー・赤</b></span>

※フォント色の変更は、オリジナル特典や値引きや限定商品の打ち出しなど、強烈に打ち出す必要があるトピックでのみ使用するようにする。

※薄いピンクやグレーなどの薄い色は、読みづらいのでなるべくフォント色には使わないようにする。

【基本アイコン各種】

      「関連情報」などへリンクする場合の基本アイコン　（最後の「&nbsp;」も余白をもたせるために付ける）
<img src="https://img.hmv.co.jp/image70/icon_arrow02.gif" border="0">&nbsp;

ex.   過去のニュース
<a href=""><img src="https://img.hmv.co.jp/image70/icon_arrow02.gif" border="0">&nbsp;過去のニュース</a>

※6.5で使用していた赤い三角（）は、デザイン的な必要性がある場所以外ではもう使用しない。

      「続き」「詳細」「一覧」などへリンクする場合の基本アイコン（文言の末尾に着ける。出だしの「&nbsp;」も余白をもたせるためにつける）
&nbsp;<img src="https://img.hmv.co.jp/image70/icon_arrow03.gif" border="0">

ex.  詳細を見る 
<a href="">詳細を見る&nbsp;<img src="https://img.hmv.co.jp/image70/icon_arrow03.gif" border="0"></a>

      「NEW」
<img src="https://img.hmv.co.jp/News/images/top/interview/icon_interview_new_02.gif" border="0">&nbsp;&nbsp;「NEW」

      「UP」
<img src="https://img.hmv.co.jp/News/images/top/interview/icon_up.gif" border="0">&nbsp;&nbsp;「UP」

      王冠
<img src="http://img01.hmv.co.jp/News/images/top/rk/crown.gif" border="0">&nbsp;&nbsp;王冠

※矢印関係は、こんなのもあります
                                                                                                                       

※背景が黒の場合はこんなのも
        （大）        （小）

※星もあります
   
<img src="https://img.hmv.co.jp/image70/icon_star_on_small.gif" border="0">

   
<img src="https://img.hmv.co.jp/image70/icon_star_half_small.gif" border="0">

   
<img src="https://img.hmv.co.jp/image70/icon_star_small.gif" border="0">

※特殊文字で表示できるものもあります
©   &copy;   コピーライト
®   &reg;   登録商標
♥   &hearts;   ハート
ex. ♥ ⇒ <span style="color:#CD4187"><b>&hearts;</b></span>
½ ¼ ¾   &frac12; &frac14; &frac34; 分数

【動画掲載方法】

※FLV用ニュースページ埋め込み用タグ

<embed src="/product/flashmovieplay/xxxxxxx" type="application/x-shockwave-flash" allowfullscreen="true" width="320" height="320"></embed>


※URL用ニュースページ埋め込み用タグ

<table width="320" border="0" cellspacing="0" cellpadding="0" background="https://img.hmv.co.jp/News/images/YYY/YYY/YYYYYYY.jpg" height="240"><tr><td> <embed src="https://www.hmv.co.jp/product/movieplay.asp?sku=XXXXXX&size=1&format=1" border="0" width="320" height="280" ShowControls="1" TransparentAtStart="1" autostart="0"></td></tr></table>

ピンク文字YYYYY部分はJPG画像（画面キャプチャ）
赤字部分にリンクURL

商品情報TOPへ戻る