このテンプレートについて

CSS着せ替えテンプレートプロジェクト用に作成されたCSS Designplate(CDP)の携帯電話端末専用CSSです。初めてCDPに触れる方は、企画サイトのユーザーMENU基礎html解説にも目を通してください。

最近では携帯電話端末やゲーム機からのアクセスも増えています。PC画面で見やすいデザイン・レイアウトがそれら表示領域の小さい端末で見やすいとは限りません。CDPのように情報(HTML)とデザイン(CSS)を分けて管理していると、情報(HTML)はそのままで、様々なメディアに対応して見やすいデザインを提供できます。

他のスタイル

免責

  • このページはサンプルなので、screenメディア(パソコン)でもスタイルが適応され、行間など一部見やすいようにスタイルが上書きされています。
  • 閲覧者の利用する端末のCSSの対応具合によって適応される度合いは異なります。

01.css

ダウンロード

配布元

alevirita
利用規約は通常のCDPと同様です(about)。管理人への連絡にはメールフォームが利用できます。

使いかた

htmlファイル編集して読み込む方法

読み込みが早く、最も多くの機種で対応している読み込ませ方です。

  1. ダウンロードした01.cssをstyle.cssと同じ【csstemplate】フォルダに移動
  2. 適応したい全てのhtmlファイルの<link rel="stylesheet" type="text/css" href="csstemplate/style.css"直下
    <link rel="stylesheet" type="text/css"  href="csstemplate/01.css" media="handheld,tty">
    を挿入する
  3. 適応したい全てのhtmlファイルの<link rel="stylesheet" type="text/css" href="csstemplate/style.css" >
    <link rel="stylesheet" type="text/css" type="text/css" href="csstemplate/style.css"media="screen,print">
    に変更
  4. 01.cssの2行目の@media handheld,tty{と最終行の}を削除(するとより多くの機種で読み込みできると思われますが、しなくてもそれなりに最近の機種なら読めます)

style.cssを編集してインポートする方法

  1. ダウンロードした01.cssをstyle.cssと同じ【csstemplate】フォルダに移動
  2. style.cssの1行目の@charset "Shift_JIS";直下に@import url("01.css");を挿入
  3. style.css内に@media screenという記述がない場合は、@import url("01.css");直下に@media screen{を、最終行に}を挿入(あった場合はこの項目は無視)
  4. style.css内に@media handheldという記述があった場合は、@media handheld {からそれに符合する}までを削除(なかった場合はこの項目は無視)

各要素サンプル

h3:見出し

h4:見出し

h5:見出し
h6:見出し
  1. 序列リスト項目
  2. 序列リスト項目
  • 順不同リスト項目
  • 順不同リスト項目
定義リスト用語
定義リスト解説
定義リスト用語
定義リスト解説

引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文 引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文引用文

メールアドレス
  • em:強調strong:より強い強調
  • ins:追加del:削除
  • 省略語
  • code
  • 参照元
  • 定義語
  • 出力
  • 引用文
  • kbd
  • var