シャンパンNIGHT with 紺碧な朝顔sethtml・cssサポート

html・css support
set Fileが提供するWeb標準テンプレートシャンパンNIGHT with 紺碧な朝顔sethtml・cssサポートページです。

当ページやサンプル Demoのサンプル画は元画像(提供する画像)よりも大幅に画質を下げています

以降、pre要素内(背景青色)がhtml・cssサポート。

ヘッダー編集

ページ上部、右上の文字列を変更する場合は、htmlファイルのheader要素のタイトルResponsive Web Designを任意の文字列に書き換える。htmlファイル内↓

<!--右上文字列編集▼-->
<header id="top" title="Responsive Web Design">

※黄色枠のサイズ調整はcssファイル内/* *******右上のサイズ調整 */直下のwidthプロパティmargin-rightプロパティで調整。
ページ上部、左上のリンク編集
※初期状態は以下になっています。

<!--左上リンク編集▼-->
<p id="topnav">
<a href="./">Home</a>
</p>

./リンク先urlを記述
Homeリンクテキストを記述
ページ左上の文字列、Valid html5 & css3 CSS Only NO Scriptを変更する場合は、cssファイル内

/* *******▼左上文字列編集 */直下、contentプロパティの以下の箇所を変更する文字に書き換える。

"Valid html5 & css3 CSS Only NO Script"

※英数字以外の日本語文字はUnicodeに変換する必要があります。
※変換例:あ > \3042
※変換ツールはNJ-CLUCKER様がオススメです。
ヘッダー画像は夜景を省いた代替画像があります。
代替画像のサンプル画を見る
*サンプル画は元画像よりも画質を大幅に下げています。

現在のヘッダー画像を代替画像に変更する場合はcssファイルをメモ帳で開いて
/* *******ヘッダー画像変更 */ 直下と
/* *******ヘッダー画像変更スマホ用 */ 直下にある以下の箇所を編集。

background:(img/01.png)をimg/01-2.pngに書き換える。
» Page Top

ulBoxの編集

↑上記の3項目は、em要素の1番最初の文字が大きく表示される。よってこの項目はhtmlファイルをメモ帳で開いて<!--見出し1の編集▼-->の直下は以下のように編集する。

<ul>
<li><em>任意の単語記述1</em>文章記述1</li>
<li><em>任意の単語記述2</em>文章記述2</li>
<li><em>任意の単語記述3</em>文章記述3</li>
</ul>
» Page Top

olBox1の編集

  1. テキスト
  2. テキスト
  3. テキスト
↑上記の項目を増やす時は、htmlをメモ帳で開いて<!--olBox1内の項目追加▼-->の後に以下を記述をする。

<li>テキスト</li>
» Page Top

olBox2の編集

  1. テキスト
  2. テキスト
  3. テキスト
↑上記の項目を増やす時は、htmlをメモ帳で開いて<!--olBox2内の項目追加▼-->の後に以下を記述をする。

<li>テキスト</li>
» Page Top

Box追加する場合

3パターンあります。
» パターン1は最初の1文字が大きくなるリスト付きのBox(前述のulBox)
» パターン2は数字リスト付きのBox(前述のolBox1olBox2)
» パターン3はリスト無しのBox(本Boxと前述のヘッダー編集青色背景が無いタイプ)
パターン1を追加する場合はhtml内<!--Box追加スペース1~3▼-->の後に以下を記述。

<section class="about">
<h2>見出し</h2>
ulbox項目で説明したコードを記述。
</section>
パターン2を追加する場合はhtml内<!--Box追加スペース1~3▼-->の後に以下を記述。
※箇所には他のBoxと重複しない英数字を記述。

<section id="contents0">
<h2>見出し</h2>
<ol>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ol>
</section>
パターン3を追加する場合はhtml内<!--Box追加スペース1~3▼-->の後に以下を記述

<section class="box">
<h2>見出し</h2>
<div>
テキスト
</div>
</section>

※div要素はdl要素、p要素、figure要素等のブロックレベル要素なら代替可。
» Page Top