CDP

利用の際は各配布者の定める利用規約に準じてください。

箸ポテチさんのCDP

最終更新日:

規約

  • カスタマイズOK
  • 他のツールへのデザイン転用OK
  • 何かありましたらメール(hashi-pote@mail.goo.ne.jp)もしくはTwitterへ連絡ください。

ダウンロード

morgueFile様の写真を使用したCDP
kirin.lzh表示サンプル
twig.lzh表示サンプル
sky.lzh表示サンプル
bamboo.lzh表示サンプル
November Queen様の写真を使用したCDP
green.lzh表示サンプル
cosmos.lzh表示サンプル
その他のCDP
structure.lzh表示サンプル

ベースCSS

改造は際限なく自由です。幅を変えたり、色を変えたり、背景画像をつけたり、ボーダーをつけたり(ボーダーをつける場合は横幅縦幅の指定に注意が必要です=補助参照)、etc...。元の様子が残っている必要は全くありません。自分だけのデザインを作るたたき台にしてください。

利用規約は基礎HTMLのそれに準じますが(基礎html配布参照)、このベースCSSから作成したデザインを配布する(画像含み)のはかまいません。配布の際は是非CSS配布サイトリンクに登録してください。

2column

  • 2column_001
  • 2column_002
  • 2column_003
  • 2column_004
  • 2column_005
  • 2column_006
  • 2column_007
  • 2column_008
  • 2column_009
  • 2column_010
  • 2column_011
  • 2column_012
  • 2column_013
  • 2column_014
  • 2column_015
  • 2column_016
  • 2column_017
  • 2column_018
  • 2column_019
  • 2column_020
  • 2column_021
  • 2column_022
  • 2column_023
  • 2column_024
  • 2column_025
  • 2column_026

3column

  • 3column_001
  • 3column_002
  • 3column_003
  • 3column_004
  • 3column_005
  • 3column_006
  • 3column_007
  • 3column_008
  • 3column_009
  • 3column_010
  • 3column_011
  • 3column_012
  • 3column_013
  • 3column_014
  • 3column_015
  • 3column_016
  • 3column_017
  • 3column_018
  • 3column_019
  • 3column_020
  • 3column_021
  • 3column_022
  • 3column_023
  • 3column_024
  • 3column_025
  • 3column_026
  • 3column_027
  • 3column_028
  • 3column_029
  • 3column_030
  • 3column_031
  • 3column_032
  • 3column_033
  • 3column_034
  • 3column_035
  • 3column_036
  • 3column_037
  • 3column_038

etc

  • etc_001
  • etc_002
  • etc_003
  • etc_004
  • etc_005
  • etc_006

css3

CSS3 Flexboxを利用したレイアウトです。IE11・Fx28・Chrome29・Safari6.1(要-webkit-)・iOS Safari7.1(要-webkit-)・Android4.4以上で有効です。

  • css3_001
  • css3_002
  • css3_003
  • css3_004

縦並びメニュー

  • rowList_001
  • rowList_002
  • rowList_003
  • rowList_004
  • rowList_005
  • rowList_006
  • rowList_007
  • rowList_008

横並びメニュー

  • colList_001
  • colList_002
  • colList_003
  • colList_004
  • colList_005
  • colList_006
  • colList_007
  • colList_008

補助

IE5以下を対応したり、過去互換モードで作成する場合のIE6はそれ以外のブラウザのwidth/heightとpadding+border-widthの初期解釈の違いに注意してください

margin
コンテンツ(backgroundが適応される部分)の外側の余白
padding
コンテンツ(backgroundが適応される部分)の内側の余白
border
コンテンツ(backgroundが適応される部分)の枠線
width / height
通常
width = コンテンツ表示領域(文字が表示される部分
widthとpaddingやborderを併用すると、実領域はwidth+padding+borderになります。paddingやborderの数値を増やす場合にはwidth(height)の数値を減らさないとカラム落ちしたりブロックがはみ出てデザインが崩れたりすることがあります。heightについても同じです。
IE5以下やIE6の過去互換モードの場合
width = コンテンツ表示領域(文字が表示される部分)+ 左右padding(heightの場合は上下padding) + 左右のborder-width(heightの場合は上下border-width)。heightについても同じです。
CSSによる指定
IEの古いバージョンなど未対応のブラウザを除き、box-sizingによる指定でIEの古いバージョンと同じようにpaddingとborderをwidth及びheightに含むようにもできます。