Convenience Mate コンビニメイト 使える無料ソフト 
 ホームページの作り方、Nvu/Kompozer によるスタイルシートの作り方を解説。 
 更新2012年08月 / 開設2005.03.07 
TOP
Kompozerの紹介
Kompozer の使い方
一般的な使い方と注意
Kompozer で始めるスタイルシート
概略編 段組(ボックス)編 修飾編
CSS
応用編
  
      Nvu/KompoZerで始めるHTMLスタイルシート/Nvu系の使い方
このサイトでは Nvu の後継ソフトの KZ を使ってCSS-HPを作る方法を説明する。
Nvuの時から書いてきたため、Nvuと書いた所が残っているが、順次 KompoZer (以下 KZ と記す) の使い方に変更していく。
Nvuと書いてあるところは、特に区別してない場合は、KZと読み変えるものとする。 2012年
 
・HTML タグを書かなくても、ワープロと似た感覚で( WYSIWYGで)、簡単に日本語のHPが作れる。
・HTMLやCSSをテキストエディターで書くのは、プログラマーレベルの緻密な技術と多大な時間が必要。
・しかし、KZなら、簡単に作れて、圧倒的に作業効率がよい、しかもバグ取りなどの難しい労力も不要。
・画面を見ただけで簡単に使える。 
・CSS Editor が使いやすく、スタイルシートによるきれいなデザインを素人でも簡単にできる。
・IEとFirefoxで実際に共通に使える機能だけに絞っているので使いやすい。
・いくつかの注意点(対処は簡単)を押さえておけば、便利な機能を簡単に使いこなすことができる。
・Netscape Composer を引き継いで、進化したのがNvu。Nvuは2005.06.28の1.0で開発は終了。
・2006.07.23 にKompoZerVer.0.7.7 が登場した。旧NvuのURLに紹介されていることからNvuの後継版とされている。
・2007.08.30 にVer.0.7.10 (現時点での最終版)が出て、かなりの変更が加えられた。これに合わせてKompoZerの紹介ページも多くなってきた。
→ 流れを汲むKompoZer 後継「KompoZer」v0.7.10
・通常の範囲で特に凝ったことをしなければ、Dreameweaverより速くCSSを使ったHPを作れる。
ただしいくつかの注意事項があるので、業務用にはDreamweaverなどの有料ソフトを使う方がよい。
・なお  WYSIWYGで作ったHTMLのソースコードは汚いといわれるが、それはこのページのように旧式の書き方(インライン修飾)をしているためともいえる。 きれいなCSSの使い方をすれば、KZでもある程度すっきりしたHTMLコードにできる。(きれいなCSSについてはCSS の項の後半で示す。)参考図
KompoZer 安定版は KompoZer からDLできる。
その後のテスト版は、 KompoZer 0.8b3 (2010.5.8)  SourceForge.net が最後。2年以上、止まっている。
  リニューアルされるKompoZer KompoZer New or SourceForge.net
  テスト版 08a1を使ってみた: 先立って以前の設定ファイルを 別にバックアップしておく。DL して解凍したファイルホルダー群を、例えばC:\Program Filesの中にKompoZer08a1などのホルダーを作り、その中に入れる。中のkompozer.exeを右クリック/ショートカットの作成で kompozer08a1などの名前でショートカットを同じフォルダー内に作る。これをデスクトップやSendToにコピーして使う。以前のHTMLファ イルは使わない。今回の変更では、画面や見た目や使い方はほとんど変わっていない。ソースが小さくなって見にくくなって、起動や応答がかなり遅くなった。 注意点は以前と同様。完成版がでてから使ったほうがよさそうである。
・WYSIWYG (ウィジーウィグ)とは
What You See Is What You Get
見たとおりの物が得られる の意味。

・"ホームページ・ビルダー"
テンプレートが豊富で、これをカスタマイズすれば、初心者でもプロ並の多彩なページをつくれる。多種類の型を使うので簡単であるが応用しにくい面もある。 Ver.11(2007.12)からCSSエディターが追加された。
 IBM ホームページ・ビルダー

・"Dreamweaver"
KZに似ているが画面構成や使い方は機能が多い分複雑。長所は、CSS画面を常時表示したまま通常画面を操作できる、ソース画面と通常画面を2段表示できる、ソースコードをいじりやすい、KZのような使用上の注意点が少ない、などである。業務用に向く。
→■ Dreamweaver とKZとの違い 

・"Aptana"
WEBシステムを構築する高機能エディターである。HTML, CSSJavaScript,Ruby,Ajaxなどの作成・編集ができる。WYSIWYGのエディターではないが、WYSIWYGのKZ と連携することもできる。
→■ Aptana の使い方 設定方法
使い方を少し工夫すれば、大変使いやすくなる。特に勉強しなくても使えばすぐ分かる点がいい。
注意点はいくつかあるが、それでも便利な点がはるかに多く、圧倒的に作業効率がよいのが魅力である。
・Kompozer 使用上の注意点:
2 CSSエディターを抜けただけでは保存ボタンを押しても保存されない (→ 1文字でも変更してから保存する。)
3 日本語の戻し時の1字欠け問題。(←文章入力編集時の戻しはしない。)
4 日本語での改行コード問題。日本語間に改行コードが入る場合があり、次の問題が起きる可能性がある。
  Firefox3 でのスペース表示問題 一文字飛び越し &文字の文字化け (→ 改行コードを削除する。)
5 KonpoZerの場合、使い方や状況によってはCSSエディターの操作中又は抜ける時に、CSSの設定が変わったり消えたりする場合
  がある。 (→ 必ずOKで抜ける事。時々保存する事。)
6 72文字を越える半角文字間に改行コードが入るバグの対策が必要。→ 対策 インストール方法を参照
 
正式版 KompoZer Ver0.7.10 と Nvu の相違点 (Nvuから KompoZerに移行する場合用。 最初からKZを使う場合は不要。
1 絶対リンク化の問題は改善された。 (Nvu の場合は、絶対リンクになるものだという前提で手直しする。)
2 ファイルの先頭のDOCTYPEには標準モード用のDTDが自動的に入り、表やCSSなどのブラウザ表示が正しく出来る。 (NvuではテキストエディターでDTDを入れ替える必要がある。)
3 ステータスバーでは、タグの IDやCLASS名も表示され、マウスポインターを当てると属性が表示される。
4 KZの大きな利点は、<div></div>タグの範囲が点線で表示されることである。ステータスバーで<div>を押して id や class を割付ける時も便利である。ページ構成に表を使わなくなってきた現在、この機能は魅力的である。 (Nvuではソース画面に切り替えて調べる。 Dreamweaverなどもソース画面で調べる。)
5 CSSエディターでは、 General でソースと同じものが表示されここでも修正できる。並び順の Up/DownのDownも可能。セレクターのリネームが可能。リフレッシュ表示が可能。ただBox-Margins の並び順が Top, Right, Bottom, Left で間違いやすいので注意。Rule 設定はプルダウンメニューからだと手数がかかるがパレットの絵を押せばよい。新ルールを作る時にプルダウンから前の文字を選べる。
6 JavaScript をBody内に書いた時には、JavaScriptタグが表示され、挿入位置が分かる。 (Nvu が不便ということではない。)
7 ソース画面上での表示:フォント設定は、Tools/Preferences/Font/Fonts for = Westernの設定で行う。(分かりにくい。)
8 ソースの整形設定をOFFにした時のソース表示がやや見やすい。(ON にした時はNvu/KZとも元のソースコードをインデント整形するが改行コードが増えていく。)
9 ツールバーのカスタマイズはツールバーを右クリックして、マウスで移動できるが、知らないと分かりにくい。(Helpに書いてある) (Nvuではメニューからできる。)
10 スペルチェックは日本語を除外してチェックできる。 (日本語の場合それほど使わないかもしれない。)
11 <div> タブにid要素を(ステータスバーなどから)割り当てる場合に、間違って前回と同じ idを割り当てると何の警告無しに前回の方が<div>だけの空タグにされる。ミスをしないように注意すること。(Nvu では空タグになることはない。)同じidは1回しか使えないという文法に対する違反であるが前回書いたものまで削除するというのは問題である。
12 CSSエディタを使うとき、Cancel ボタンやXを押してその回だけキャンセルするつもりで抜け出すと、それまでに何回か保存していても、KZ起動時点起動した時点まで遡ってCSSの設定内容 が消えることがある。Cancel ボタンやXは押さないで、OK を押した方がいい。CSSエディタを使うときは、安全を見て、時々KZを閉じて開き直すといい。またCSSエディター操作中に設定した内容が変わったり、 消えたりする場合がたまにあるが、これも時々CSSエディターから抜けてこまめに保存する方がいい。保存する場合はNvu と同様に、CSSエディターを抜けた時点で本文を一字書き換えてから保存ボタンで保存した方が安全である。しかしこれらの問題は何日使っていても起きない 場合もある。
13 旧Nvu のページには、KompoZerはいくつかのメジャーな厄介なバグを取り除いたものであると(fix some of the major annoyances)書かれているが、上記1については(バグといえるかどうかわからないが)改善されたといえるが、それ以外には取り除いたバグとは具 体的に何を指すのかが分からない。使いやすく一部変更したことによって上記11,12のようなバグが増えたがその他に新たにどんなバグが発生しているのか よく分からない。基本的には使いやすく一部変更したものでありそれによるバグも増えたと考えた方がよさそうである。
14 KZには便利な機能が多く、注意して使えばかなり便利である。

テスト版 KompoZer Ver0.8a1 の概要 (正式版が出るまで待った方がよさそうだ。)使わない場合は不要。
1 画面や見た目も機能も使い方も、 Ver0.7.10 とほとんど変わらいない。
2 画面設定やTools / Option の設定は、 Ver0.7.10 の設定ファイルを共有する。インストールする前に設定ファイルは別にバックアップしておいた方がよい。
3 ステータスバーのソースタブがなくなったが、画面下の線を持ち上げると下画面から出てくる。見たいところのタグをクリックすると、その部分のソースだ けが表示される。ソースをダブルクリックするとソースを編集できる。ただし、ソースを表示させると応答がかなり遅くなる。当面は従来通りの Alt+I+H で、HTMLインサート画面を出した方が速い。
4 ソースの文字が小さくて見にくくなった。ソースの検索はできなくなった。全体を検索したりいじる時は別途テキストエディターで開いた方が速い。
5 ソース画面を下から持ち上げることによって通常画面とソース画面を同時に表示することができるようになったが、通常はソースは見ないで画面を広く使ってページデザインやコンテンツ作成をするので特別便利になったわけでもない。
6 起動がKZ正式版の1〜2秒に対してKZテスト版は3〜4秒かかる。頻繁に開いたり閉じたりする場合は気になる。
7 漢字の改行問題(全角文字の間に改行コードが入る問題)は変わらないので、今までと同じ対策が必要。

BlueGriffon について使わない場合は不要。

元祖Nveの開発者Daniel Glazman は新たに、BlueGriffon v1.3.1(2011/11/24)を公開している。
 →窓の杜 ぼくんちのTV 別館 Wikipedia 中小企業における(1)(2)(3)(4)    
BlueGriffonの使い方
使ってみた。 ブルーグリフォンとは怪獣の名前らしい。
DLはHPの文中、It's free to download (current stable version is 1.3.1)をクリック。
インストール中 日本語(用語などかえってわかりにくい場合は後で、ツール>オプション>詳細で英語にできる。)を選ぶ。
作成は、一回目は必ず、File の下にある紙アイコンの右の▼をクリックして、More Options (新しいページのオプション)を選び、無難な、Document language = HTML 4.01、 Document Type = Transitional に設定する。(他は各ブラウザ毎の動作などよく調べて使う。)次回作成は紙アイコンだけで、この設定で開く、文字コードは UTF-8に限定されて作成される。charset=Shift_JISのファイルを開くとUTF-8になってしまうので注意。
CSSエディターは有料なので、積み木のアイコン(スタイルプロパティ)を使う。使い方は文字列を選択しておいてから、
div タグは右端のBody Text の枠から、<div>を選び、span タグは、書式(Format)>Span で設定。 その後下のステータスバーの<div>又は<span >を選んで、積み木のアイコンでスタイルの適用先を「クラスで指定する(All elements of class)」としてクラス名を記入して設定する。
色の前景色(Foreground)とは文字色のことである。後はNvuと似たような考え方で使えるので、以下の説明のほとんどが転用できる。
* Nvu/KZと同様に日本語の改行問題があるので、同じ注意が必要。作業効率上、Nve/KZから乗り換える必要性はほとんど感じられなかった。

 

ダウンロード・インストール方法

    Konpozerは KompoZer から DL する。 KompoZer  スクリーンショット
    Konpozerのインストール:DLして解凍したファイルホルダー群を、例えば C:\Program Files の中に KompoZer のようなホルダーをつくり
    その中に入れる。中のkompozer.exeを右クリック/ショートカットの作成でショートカットを同じフォルダー内に作る。これをデスクトップや
    SendToにコピーして使う。
    設定データは、C:\Documents and Settings\xxxx\Application Data\KompoZer の中に入る。
    Nvuを使う場合は、Nvu サイト(URLを2007年に変更)のDL ページからDLする。 Nvu  スクリーンショット 

インストール後の調整 (重要)

    強制改行バグの回避方法
    タグや英文のみに有効である。 KZは、長い文字列の間に自動的に改行コードを入れる作りになっている。
    (具体的には、 行の頭から、半角文字+全角文字=72文字の次、に改行コードをいれるおおまかな傾向がある。
    ただしこれは新規作成の初回保存の時に、おおむねそういう傾向があるといえるが、編集を繰り返すと改行コードが増える。)
    スクリプトやコマンドなどのコードの間を、勝手に改行されるとコードとして成り立たなくなるので非常に具合が悪い。(バグと称される。)
    これをやめさせる方法が公開された。 → KompoZer の72文字強制改行バグを回避する方法 
    この対策は、半角文字列やスクリプトやコマンドやタグ内のコードなどに対して有効である
    以後、このページではこの対策をする事を前提とする。
    ただし日本語の文章に対しては有効ではないので、後述する対策が望ましい。
    試してみた方法を以下に示す。
    editor.js ファイルなどの中のhtmlWrapColumnを72から例えば1000〜4000に変更する
    pref("editor.htmlWrapColumn", 72); → pref("editor.htmlWrapColumn", 1000);
    editor.jsは、KompoZerのフォルダーの中に3個とC:\Documents and Settings\xxxx\Application Data\KompoZerフォルダの中に2個ある。
    KompoZer\greprefsの中のall.js の中の225行目にも、pref("editor.htmlWrapColumn", 72);がある。
    (Grep検索のできるソフトで検索すると見つけやすい。)

日本語化 

    Web上に日本語化するプラグインもある。→ KompoZer (Nvu)マニュアル 
    ただし中身やHTMLやCSSが日本語になるわけではなく、ツールバーやボックス項目の表示で、
    「File、Edit、View、Insert、 Tool」 などが、「ファイル、編集、表示、挿入、ツール」のように表示されるだけである。
    画面を見るだけで簡単に使えるので、特に日本語化しなくても簡単に使える。
    File Edit View などが理解出来なければ、何百とある HTML CSS のコマンドの理解もできない。
    余計なものを入れればそれだけ、不安定要素を抱え込む事になり、HTMLエディターの場合は望ましくない。
    このサイトでは、日本語化はしない前提で説明を進める。
    Helpなどの英文を読む場合は、livedoor 翻訳google翻訳 excite翻訳アルク英和辞典 などを使うと便利である。

HELPと使い方説明サイト 

    1 KompoZerの " Help " は Help/Help Contents で開く。 (比較的詳しい)      
      Help/Help Contents で開くと左欄の上又は下に項目タブが表示される。
      その内の、Contentsタブを開けば、各項目(+印の16項目)ごとに使い方の説明が出ている。
      他のタブは、Grossary(用語解説)、Index(用語をアルファベット順に並べたもの)、Search(Help内の検索窓)タブである。
    2 上のHelpの日本語訳サイト → KompoZer (Nvu)マニュアル 他にインストール方法 日本語化方法が出ている。
    3 使い方の説明サイト
      Kompozer のページ (日本語): フラッシュ・アニメーションによる説明  わかりやすい。
      Charles Cooke氏のユーザーガイド: 簡単な使い方の説明  KompoZer User Guide 
                              これを日本語に訳したサイト KompoZer and Nvu User Guide(日本語訳)  
    4 このサイトでは、HELPや解説サイトを見なくても、KZを使える事を前提としている。

プラグイン アドオン 

    KZのサイトの ADD-ONS にいくつか出ている。どのバージョンに対応しているものか確認する必要がある。
    以前は、Tolls/Extensions で開く画面に、ダウンロードした xpi ファイルを、ドロップして、開きなおせばインストールできたが、
    変わっているかもしれない。
    ソース整形プラグインの例
       KZと連携できるNvu :: HandCoderというプラグインを使って「トラブルの元になる不要な改行コードを削除し」、「適切な改行コードを入れて」
       ソースコードを読みやすく整形する方法(インデント整形など)が公開されている。→HTMLエディタKompoZer HandCoder KompoZer
       なぜこのプラグインがあるかというと、KZは、行頭から数えて、半角文字+全角文字=72文字(桁ではない)の次に改行コードを自動的に
       入れてしまう問題があるためである。保存時に、不要な改行コードを削除し、その後、終了タグ(</・・・>)の後で改行してやれば、
       テキストエディターでソースコードを読むときに読みやすくなる。
       ただし、改行コードをむやみに消すと大変な事になる。ブラウザは半角文字の次にくる改行コードをスペースと表示するためである。
       つまり、改行コードはスペースの意味を持っている場合がある。むやみに削除すると単語間のスペースがなくなる可能性がある。
       従って、整形には注意が必要である。 試す場合は必ず元のHTMLファイルをバックアップ保存しておく。
       一般にソースの整形処理は問題がおきやすい。
    注意: 高度な処理と高度な安定性が求められるHTMLエディターの場合は、プラグインの使用には注意が必要である。
       使う場合は、元ファイルは保存しておいてから、確認しながら使う。

環境整備

   1 Firefox に ViewSourceWith を組み込んで、KZとテキストエディターを設定しておくと、 KZ - Firefox - テキストエディタ と自由に行き来
     できて便利である。(日本語のホルダ名やファイル名でも開ける。)
   2 Windows の SendTo ホルダーに、KZのショートカットを登録しておくと、エクスプローラーから開ききやすい。
 

  

最初の設定:Preferences

  インストール後、以下の設定をする。(重要
  1 Tools/Options/General/ で、 Reformat HTML source のチェックを外す。
    代わりに  Retain original source formatting 「オリジナル・ソースのフォーマットを維持する」を選ぶ。
    他のGeneral 項目は全てチェックして使ってみて必要に応じて変える。
   どうしてもソースコードの整形機能を試してみたい場合は、Reformat HTML source にチェックを入れる。他のエディターで連携作業
    をする場合に役に立つ場合もある。ただし、整形後に、1行ごとに重複改行コード(空白行)が入り、整形するたびに、重複改行コード(空白行)
    が倍増していく。また改行コードや半角スペースが適宜入るのでブラウザの違いによっては表示が乱れる。
    いったん整形すると元に戻すことは難しくなるため、試す前に、必ずバックアップを取っておく。
    ソースの整形は難しい問題があるので一般的には望ましくない。 整形処理方法を参照。
  2 Tools/Preferences/General/CSS Editing のチェックを選ぶ。 通常はCSSにチェックをする。(重要
    このチェックはCSSエディターの利用の可否ではなくて、HTMLタグの中の属性値を、style記述にするか従来記述にするかの設定である。
    特別に従来のHTML記述にする必要がなければ、CSSにチェックしてstyle記述にしておく。(HTML4.01の推奨)
    ここにチェックをすると、従来記述の<font color="#009900">や、<table width="500" align="center"・・> は、style記述の
    <span style="color: rgb(0, 153, 0);">や、<table style="width: 500px; text-align: left; margin-left: auto・・・> などと記述される。
    ここで「CSS」に設定しておいて、中身をテキストエディターなどで無理に従来記述をすると、編集時に不具合が起きる。逆も同様。
    いったん書いたら、自動変換はしてくれないので、どちらかに決めたらそれで通すしかない。
    従来記述にすると、CSSでの定義と競合した場合の優先度が違ってくる。例えば表の幅はCSSの方が優先度が高い。
    チェックを外してもCSSエディターは使えるが、チェックをして両方合わせておいた方が無難である。
    (HTML4.01の推奨以後かなりたっても、従来記述のページが多く、HTMLエディターやWYSIWYGソフトにも従来記述式のものがあり、
    他で作ったものを KZで編集する場合は特に注意が必要。)
  3 Tools/Preferences/General他の項目は特別必要がない限りチェックしておく。
  4 Tools/Preferences/Font/ で、Fonts for = Japanese   proportional = sans-serif と変更する。
    KZの画面上の表示を、ブラウザ(IE,Firefox)での表示に合わせるために、sans -serif(文字の太さが変化しない文字)16pixに変更する。
    KZ画面での表示だけの問題で、HTMLの中身が変わるわけではない。
    (デフォルトのserifだと文字の太さが変化する明朝体で表示されてブラウザの表示と一致しない)
    ソース画面の文字の種類やサイズを設定するには、
    KompoZerの場合は、Fonts for = Western でMonospace =MSゴシック, Courier New 14pix などと設定。
    (Nvuの場合は、Fonts for = Japanese Monospace = MSゴシック、FixedSys  などと設定。)
  5 Tools/Preferences/New Page Settings/Internationarization/   新規ページの設定
     Language=Japanese、  Character Set=UTF-8 Sift_JISなどに新規ページの文字コードの設定をする。(最近はUTF-8が優勢
    この設定で日本語文字のホームページの作成ができる。
    注意:ここで設定をしても「新規ページ」には反映されないので、新規ページを作る時は、必ず、Format>Page Title and Properties
    >Character Set で、文字コードを設定する。なぜなら、初期では、ISO-8859-1 と表示されていて、ソースが、 UTF-8 などと、なっている。
    しかし、この状態のまま、タイトル名などを記入したりしていくと、必ず、完全に ISO-8859-1 となってしまい、問題を起こすからである。
    あえて実験として、ISO-8859-1を選びなおして保存して、ブラウザ又はエディターで表示してみると、あい→&#12354;&#12356;と表示
    されてしまう。いずれにしても、新規ページを作る時には、その都度、Format/Page Title and Properties/Character Setで 
    横のボタンを押して文字コードを選びなおして設定する必要がある。
    ここで設定すると、単にmeta 部がcharset=UTF-8Shift_JISなどなるだけではなく、ファイル自体の文字コードもその文字コードになる
    実験として、KZで作成し UTF-8 で保存してから、テキストエディターでmeta 部だけを、EUC-JPに変えてFirefoxで表示させたら文字化けした。
    その場合、Firefoxの表示を手でUTF-8に変えたら正常に表示された。
    「既に作られているページ」を、KZで文字コードを変えると、中身も、meta部も指定した文字コードに変わるが、あまり変えない方がよい。
    文字コードの、一般的傾向は、 UTF -8 が優勢になっている。
    2008年頃からリニューアルされている大手のサイトはUTF-8が多い。 Yahoo!  MSN  Google など。 多種多様の charset 
    その後最近ではUTF-8が優勢となってきて、そうなると、Sift_JISでは日本語のURLエンコーディングの違いで、不具合が出る場合がある。
    UTF-8とSift_JISの違い 
    Firefox ではUTF -8はSift_JISと同じ表示になるが、IE6でのテストでは、UTF -8は、英文字が Time New Roman のフォントで表示される。
    対策としては、KZのCSSエディターで、対象範囲(bodyなど)に対してfont-family: Arial,Helvetica,sans-serif;を設定すれば一部解決する。
    一部というのは、IE(Firefox)で大きい文字サイズを使ったり、テキストズーム(表示文字の拡大)されて、ある一定の文字サイズ以上になると、
    半角の英数字の部分だけが異常に太い字となり違和感が生じる。(他の方法や後のIEで改善されるかもしれないが、テストが必要)
    元の文字が小さい場合はテキストズームしてもそれほど大きくならないので問題は少ないかもしれない。
     英文版の About Google Yahoo! のサイトでテキストズームしてみるとIE6では太字になる。
    その他、UTF -8ではキーボードで打つ半角\は、半角のバックスラッシュ \ になる。例えば価格\3,000- 書くと、価格 \ 3,000- と表示される。
    ¥(Yen)記号は全角で打つことが望ましい。違いを説明するときなど、どうしても半角で打ちたい場合は次の方法で出来る。
    ソース画面で &yen;  又は、&#x00A5; と書き以後その文字をコピーして使う。但しソース画面を開きなおすとコードは埋め込まれて
    隠されて見分けが付かなくなる。テキストエディターでも同様に見分けが付かなくなるので注意する。ブラウザでチェックする必要がある。
    フォルダ名を説明するのに、C:\WINDOWS\Temp  などと書くと C:\WINDOWS\Temp と表示されるのも同様。
    改行コードを \n と記す場合も同様。これらは本来はバックスラッシュが正式である。→ 文字参照 - Wikipedia
    逆に、Sift_JIS で \ を表示させるには、キーボードから \ を打ち込んでから、英文フォント( Arial など)にしてやればよい。    
    なお、文字コードをUTF-8 と Sift_JIS で相互変換するには、KZ で読み込んでから Format/Page title・・/Character Set で
    文字コードを選べば、大概は変換できる。または文字コード変換ソフト(文字コード変換ツール for .NETなど)を制限内で使う方法もある。
    (テキストエディターなどで無闇に変換すると、ファイルが破壊する場合もある。変換時はバックアップを取っておく。)
  
 6 Tools/Preferences/Advanced/ の、Markup で、Language=HTML 4 DTD=Transitional が無難。
特別に変えたい場合は下記【説明】による。
Nvuでは昔の不適切なDTDが設定されるので問題が有り、下記を参考にして修正する必要がある。 重要
 【説明】
DTDはブラウザにHTMLファイルをどのように処理するかを示す、重要な情報である。
新規のファイル作成時に1回だけ作られる。以後は読み込んだHTMLに記述されているDTDを維持する。したがっていったん作成されたDTDは KZのソース画面からは修正不可能となる。(KZ/Nvuのソースで修正してもKZ/Nvuが起動した時点の状態に戻してしまう。)
よって、DTDを変更するには、いったんNvu/KZを閉じて、テキストエディターで修正する必要がある。特にDTD をソース画面で入れ替えてテストしても、実際には変更されていないので注意する。
KZは、開かれたファイルのDTDがXHTMLなら、すべて、XHTMLの記述に変更する。
テキストエディターで DTDだけHTMLにすると、KZはすべてHTML記述に変更する。
KZのToolsでの設定は新規作成時だけ作用して、以後は開いたファイルのDTDに従って記述をすべて変更する。
Nvu,/KZの設定によって作り出されるDTDは次のようになっている。その中の、TransitionalURL付きが望ましい。
KompoZer=HTML4 Transitional 中央寄せ可 縦ずれ無し(標準表示)
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Nvu=HTML4 Transitional 中央寄せ不可 Box横ずれ有り 縦ずれ無し(互換表示)
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
KompoZer=HTML4 Strict.dtd 中央寄せ可 縦ずれ有り(標準表示)
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Nvu=HTML4 Strict.dtd 中央寄せ可 縦ずれ有り(標準表示)
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
KompoZer=XHTML1 Transitional 中央寄せ可 縦ずれ無し
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DTDの設定は非常にデリケートで、ブラウザの表示モードや、表の表示やフォントサイズなどに直接関係するので非常に重要である。
表の中央寄せ不可とはIEや Macでは、表やCSSで作ったBoxなどのセンタリングが不可になったりケタずれを起こすことである。表作成参照
縦ずれとは、Strict 系にすると、Firefoxの場合、画像を縦に折り返した時に隙間が空く不具合である。→例 Strict での例 Transitionalでの例
表の表示に関しては TransitionalURL がいいが、他の事があれば、その目的に適したDTDを選ぶ。 (URLの有無で異なる。)
大手のページは殆どが TransitionalURL (系)のDTDである。  Yahooは2007 年までは DTD 無しだが、2008年から TransitionalURL
DTDとTHMLのタグの記述とブラウザの組み合わせは何十通りにもなり全ての表示状態を調べることは困難である。ページの内容や目的と相手ブラウザによって決めるしかない。一番まずいのは、すでに出来ているページのDTDを無闇に入れ替えることである。
Transitional 「暫定」: は本来、HTML 4.01非推奨構文でも表示できるモードである。しかし各種ブラウザがStrict系で異なる表示をするので、標準的に使われるようになった。
Strict 「厳格」: はHTML 4.01非推奨タグは使用不可で文書構造は厳格さが必要である。いくら厳格に書いてもブラウザによって異なる。
XHTML にしたい場合は、設定を XHTML1 にする。KZ は新規の時だけXHTML用のタグになる。以後は開いたDTDに従ってすべて書き変わる。
KZ では最初の保存時にファイルのデフォルトの拡張子が.xhtmlとなっているので、.htmlとして保存する。
最近のサイトでは、(ブログやLivedoorなどは以前から) XHTMLの記述になってきている。
最近の GoogleMSN米国Yahoo などは、ソースをみると、単に<!DOCTYPE html>としか書かれていない。HTML5の記述かもしれない。
参考:HTML4.01非推奨タグ → center, font, strong, i, u, strike, frameなど。 
    HTML4.01における「属性値」の記述推奨 → 基本的にタグの「属性値」は、HTML内に書かず、CSS で定義するか、
                               又はインラインの style= " "で記述する。インラインは望ましくない。
参考サイト: DTD とブラウザの表示モード  ブラウザ別 DOCTYPE 表示モード表   たのしいXML XHTML の基礎知識
  7 Tools/Preferences/Advanced/ で、Real-time spell check をオフに設定。 スペルチェックを常時オンにすると、コンピュータ用語の英語
    は赤の下線だらけになり、見にくくなる。しかし英単語が混在する場合は時々オンにしてチェックするとよい。
  8 Tools/Preferences/AdvancedSpecial Characters で、「Only & < > ' and non-breakable whitespace」を選ぶ。
    Don't encode '>' outside of attribute values と Don't encode special characters in attribute values  にチェックをする。
    この設定によって、半角の &  < と半角の連続スペースだけが &文字(ソースコードに&がつく文字)になる。 
    デフォルトの「HTML4」 だと、その他に全角の→↓←αβγなども  &文字 になってしまう。
  9 Tools/Preferences/Advanced/Behavior of the Return Key/で、Return in a paragraph always creates new paragraphにチェックを
    入れる。 この設定で以下の操作が可能になる。
       <p> タグで段落ごとに文章を記述する場合に、操作画面の上から3段目の左端のボックス表示を Paragraph モードにしておくと、
       「Enter」キーで改行する度に、新しい段落になるが、「Shift+Enter」キーで改行すると段落内で<br>で改行される。
       ボックスの表示は、Body Text モードがデフォルトであるが、このモードはどちらのモードに設定しても、改行時に維持される。
       (Dreamweaverでは、Paragraph  がデフォルトであり、Body Text で改行するたびにParagraph  モードにリセットされる。)
    チェックを外すと、「Enter」キーで改行すると Body Text モードでもParagraphモードでも改行キーは全て<br>で改行される。
 10 設定後は、一旦閉じて、開きなおすのが確実。  設定を無闇に変えると、 HTMLが崩される場合があるので注意。
  設定の詳細(日本語翻訳)は、こちら→ プリファレンスの設定例と、ショートカットキーの一覧  を参照。
 
画面操作例
ワープロと似ているので画面を見れば大体わかるようになっている。
カラー設定をしている様子。(HTMLで文字の色や文字サイズを設定するのは旧式で望ましくないが簡易的には便利である。試しに記してみた。)


表を作成している様子。(表を枠組みに使うのは旧式であるが簡易的には便利である。)
表のセル結合と入れ子の例 
g g g g g
g g
h h h
h h h
h h h
g g g
h h h
h h h
h h h
g g g
最初5行6列の表(g)を作り、
縦・横に隣合ういくつかの枡を選択
して右クリックでJoin結合する。
次に2箇所のセルの中に子の表(h)を
別の所からコピーしてきて
入れ子にして貼り付ける。
 
押しピンを押してレイヤー状態にしてマウスで文字を適当な位置に絶対位置移動させた例。
(重なって混乱するので、多用は望ましくない。)
文字や画像を選択して、押しピンを押せば移動用の+印や□印になり、マウスで移動可能となる。
上のスライドバーを引っ張っても動く。重なると下のものは見えなくなるので、Front/Backボタンを押す。
(絶対値指定にすると、ブラウザで文字の表示サイズを変えた場合に、位置がずれるので要注意)
(IEでは、同じように表示されない場合がある。)

 



TOP
Kompozerの紹介
Kompozer の使い方
一般的な使い方と注意
Kompozer で始めるスタイルシート
概略編 段組(ボックス)編 修飾編
CSS
応用編


KZ の一般的な使い方と注意
 
  • 最初の注意  
    1. できるだけソースコードをいじらない。
      ソースコードを直接いじる場合は、専門的知識と細心の注意を要する。失敗した場合に回復が難しくなる。
      半角スペース、改行コード、整形、などの問題に注意が必要。
      詳しくは、「ブラウザの問題:半角スペース、全角スペース、改行コード、整形処理 のページに分割。
      ただし、ソースコードを直接いじらなければ、難しい事を考えなくてもHTML CSSを使ったHP作りができる。
    2. KZの改行問題:KZ は72文字の次に改行コードを入れる傾向がある。英文の場合は、「インストール後の調整」で回避できるが、
      日本語の場合は回避できず、改行コードが入って次の不具合を起こす。
       
      • KZの操作上、1字飛び越しの原因となる。 
        1字飛び越しとは、記入したいカーソルの所に、文字を打ち込めず、一字前に入ってしまう現象。修正が困難となる。
        原因は、【改行コード】と【特殊日本文字】の組み合わせによって生じる。 → 後述の改行コード対策をすれば解消する。
        日本語の文章だけに生じる現象である。Netscape時代からの長年の不具合で KZ でも改善は望めない。
        参照→ 1字飛び越しの原因
      • &文字化けの原因になる。半角の 「スペース」「&」「<」 の3文字が、 「&nbsp;」「&amp;」「&lt;」などと、&文字に文字化けする場合がある。   (内 容にかかわる不具合)(KompoZerで も起きる)
        原 因は、 &文字の直後に改行コードが入った場合に起きる。
      • Firefox 3 問題  
        2008 年中頃から Firefox 2 がFirefox 3 になって、日本語の間の改行コードが半角スペースで表示されるようになった。
        IEでは問題ない。
        そのため日本語は、いくら長くても、改行コード無しで書かなければならなくなった。
        英語では文章の単語と単語の間に改行コードを入れてソースコードを見やすくできるのに対して、日本語では、ソースの中の文章の中に改行コードを入れること ができなくなったので、日本語のサイトを作成するときには、ソースの中の日本語間に改行コードを入れないようにするしかない。
        米国のメジャーサイトのページのソースを見ると、改行コードが殆ど入っていないので、そういう流れかもしれない。
        改行コードによるスペースを見つけるには、Firefox  で Ctrl+F で下のステータスバーに検索欄を出して、そこに半角スペースを記入して、その横にある、「すべてを強調表示」を押せば、スペースがすべてピンクになるので、一目でわかる。

    3. 改行コード対策
      結論的には、
         1. タグ以後の文字数を「半角文字+全角文字」で72文字以下にする。越えそうなら<br>タグを入れる。
         2. KZのソース画面は絶対にいじらない。(いじった瞬間に72文字に関係なく多数の改行コードが埋め込まれてしまう。)
         2. KZを閉じて定着した改行コードは、その部分を選択コピーしてAlt+【E→O】 で置き換える。(ただし72字以内)
         3. アップロードする前に、問題の改行コード(全角文字間の改行コード)を正規表現ソフトでチェックして削除する。  
         4. ソースコードを掲載する場合は、pre タグで囲む。
      である。
      説明 
      1. 実験してみたところ、KZは、文字カウントは、<body>タグのあたりから、「半角文字+全角文字」の数でカウントをする。そして72文字の次に改行コードを入れて行く。つまり72毎に区切っていく。タグもコマンドも文章も平等にカウントして行く
      2. 以後は改行コードから新しく文字カウントを始める。
        これを利用して、長くなりそうな文章の中に半角スペースを入れると、カウントがリセットされる。ただしコンテンツをいじることになるので、あまり望ましくない。
      3. ある程度長くなったときに半角スペースがあるとそこに改行コードが入る。
      4. 前述の「72文字強制改行バグを回避する方法」 は適用する前提なので、スペース無しの半角文字が続く場合に限って改行コードは入いらない。
      5. 一度、72文字以上書いてしまい、開きなおすと、改行コードは定着して、断片化が増える。そして改行コードからカウントが始まる。
      6. 従って、開きなおして、書いたり消したりの編集を繰り返していくと、断片化が増えていく。
      7. この問題を回避する方法としては、タグ以後の文字数を「半角文字+全角文字」で72文字以下にする方法がある。
        理由はタグのところでカウントがリセットされるためらしい。<などを文字として書いてもダメである。
        (このページの記入最大幅は140桁くらいなので、全部全角なら1行分である。半角文字が含まれると更に短くなる。)
      8. 定着した改行コードは、その部分を選択してAlt+【E→O】 で置き換えれば72字内ならなくす事が出来る。
        (KZの、HTML画面で、出来ないことはないが、表示上の都合で改行表示をしているので、あまり当てにならない。)
      9. 問題は全角文字間の改行コードなので、アップロードするときに、正規表現置換のソフトやプログラムを使って日本語間の改行コードを削除すれば解決する。ただし勘違いや間違いでファイルを壊してしまう可能性もあるので、バックアップを取ってから行なう。
      10. 不思議と、pre タグ だけは、この改行処理をしない。 p や code やその他のタグでは改行コードが入る。従って、長いソースコードを掲載する場合は、pre タグを使うとよい。Firefox3 も pre 内の改行コードはスペースにしない。
        ただし、preは長いと枠をはみ出すので、overflow で auto にするなどの対策が必要。
        pre は、等幅以外にもできる。中を文字修飾する事もできる。普通はインライン化できない。
      11. ダミータグを所々に入れる「トリック」も考えられるが望ましくない。
        例えば em タグ、ユーザー定義タグ、カラー修飾タグ、などを入れて、ブラウザの表示上は目立たないようにしておく。
        設定したタグを削除するには、範囲を選択して、後述の「特定タグの一括削除」で簡単に消せる。
      12. ソース画面で改行を変えると、その瞬間に多数の改行コードが埋め込まれる。
        Nvuの時代は頻繁に起きたが、KZ になっても起きることがあり、いったん起きると必ず起きる。
        どうしてもソースコードをいじりたいときは、HTML画面で行なうか、テキストエディターで行なう。
      13. HTML画面で、改行コードを無しにできないことはないが、表示上の都合で多数改行表示をしているので、どれが本当の改行コードかわからず、時間がかかり、間違いの元にもなる。テキストエディターで行なった方が確実である。
        その際、KZは閉じて開きなおす。テキストエディターは変更された場合、読み直し警告が出るものの方が安全である。
      14. ただし、ソースをいじるのは、専門知識が必要であり、むやみにいじるとHTMLが壊れてしまい、修正が困難になるので、注意が必要。
    4. 正規表現置換ソフト
      詳細は 整形処理方法 で説明する。
  • アップロードについて KZには Publish 機能がついているが、専門のFTPソフトでアップロードした方が望ましい。
    専門の FTPソフトでUP した方が速くて確実である。KZが複雑なソフトな上に、FTPソフトも非常に難しいソフトであるため、いろいろ状況に対応出来るかどうかわからない。余計な事をやらせると、それだけリスクが増える。使うサーバーがどのFTP ソフトに対応しているか調べる必要もある。例えば、ロリポップではCyberduckを推奨しているようである。
 

━━━━━━
  KZを使う前に最初に知っておきたいこと ━━━━━

戻し時の1字欠け問題:日本語文章で、「書いた文字を Ctrl+Zなどで戻した後 Ctrl+Yなどで逆戻しした場合
   又は「選択状態のまま書き換えた後Ctrl+Zなどで戻した場合」 に、
   
後ろの1文字が時々又は必ず欠けるNvu KZ 共通の問題
   対策: 
Ctrl+Z などの戻し処理は使わないようにする か、こうした処理をした後は必ず確認るしかない
時々Ctrl+Zがきかなくなって、戻れなくなる事がある。何でも戻れると思ってむやみにいじくらないこと。

KZや、PCの異常停止や、自分の操作ミスによって、ファイルの中身の一部が消えてしまうことがある。
時々上書き保存ボタンで保存をする必要がある。
時々、バックアップソフトでバックアップを取っておく方がよい。(世代管理バックアップが望ましい)重要ファイルが、消えた時の被害は大きい。

●(他のソフトの問題)テキストエディター置換ソフトHTMLエディターな どの他のソフトを使って、 変更を加える場合は、特に注意が必要である。ソフトの設定や、文字コードの違いや、相性の問題や、自分の勘違いミス などで、HTMLファイルの中が何百箇所も一発で崩される場合がある。そうなると最悪、最初から作り直した方が速い。他のソフトを併用する時はHTMLの 中身をよくチェックし、使う場合も必ずバックアップを取ってから使う方がよい。

無理な使い方をすると、中身が崩れる場合があるので、処理中 KZ に別の処理させしたり、動作途中で閉じたりなどの無茶な使い方、無闇な使い方はすべきではない。特に CSSエディターで関係ない所をつつき回わさないようにする。

ファイル名、フォルダー名は、英数字と _ だけにするのが無難である。 - も時々見かける。(これらはRFC3986の非予約文字という。)
半角スペースURLエンコーディングが必要な文字で、状況によって、%20か+のどちらかになる。問題となることはまれであるが、
KZの場合は注意が必要である。KZで名前を付けて保存をすると、例えば、kompo2012 01.html は、 kompo2012%2001.html となって、わかりにくくなる。kompo2012_01.html とした方がわかりやすい。
ネット上では大文字小文字は区別されるので、大文字小文字は区別して使う。
大文字を使ったURLはあまり見かけない。URLを直接打ち込んでもらいたい場合は小文字だけの方が楽かもしれない。
ネット上では、日本語ファイル名は、まれに見かけるが、一般的ではないようだ。相手任せになる。
ただし、PC内では、整理・管理上、フォルダーやファイル名を、日本語名にすることはよくある。PC内では問題があっても自分で対処できる。

 

 ◆参考 URLに使える文字はRFC3986(2005年)で決まっていて、次の3種類がある。→ 英語Wikipedia 日本語Wikipedia

  1. 非予約文字 : そのままつかえる。
    a b c d e f g h i j k l m n o p q r s t u v w x y z
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
    0 1 2 3 4 5 6 7 8 9 - _ . ~
  2. 予約文字 : URL内で特別な意味を持っている文字で、通常の文字としては使えない。
    ! * ' ( ) ; : @ & = + $ , / ? # [ ]
  3. 上記以外の多数の文字 : 上記以外の文字は、「%xx」(xxは16進数)という形(以下URL文字列という)にエンコードすることが定められている。しかし、エンコード方法は文字コード(character set)により多種あり、複雑である。
    半角スペースや、日本語も、この種類の文字である。例えば「日本語」を URL変換すると「%93%FA%96%7B%8C%EA」となる。
    日本語の主な文字コードとしては UTF-8 Shift_JIS EUC-JP などがあり、エンコード方法も異なる。→ URLエンコード / デコード CGI's 
    日本語名は、URLエンコード方法、目には見えない中身の文字コード、Unicode文字、HTMLの記述、ブラウザ、各種ソフトの処理、PCやネット環境、などが関係して、複雑な現象を示す。

 -- 日本語名のファイルやフォルダーを参照(リンク)する場合の注意 -- 
この項目では、PC内だけで使用するHTMLファイルの作成編集に限った話とする。(つまりネット上にはアップしない使い方である。)
PC内では、整理・管理上、フォルダーやファイル名を、日本語名にすることはよくある。
その際に、KZで作成、編集するHTMLファイルの中で、日本語名のファイルやホルダーを参照する場合の注意について述べる。

  1. KZは日本語名のHTMLファイルを開いて編集することができるが、KZで開くHTMLファイルの中身に注意が必要である。
  2. 参照するホルダーやファイルは、基本的に上記非予約文字( 大小の英字 数字 _ - )の名前であればほとんど問題は起こらない。
  3. 参照するホルダーやファイル名が、日本語名の場合は、状況をみながら試行錯誤で対策を考えれば、ほとんどの場合解決する
    対策は、HTMLの記述方法、ブラウザのくせ、編集ソフトのくせ、PCやネット環境などによって対処の仕方が異なる。
    条件をいろいろ変えて実験してみたが、ケースバイケースで一概にこうだとは言えない。
    以下に実験した例を示すが、状況によっては、必ずしも同じにはならない。
  4. 例1:KZが作り出すURL文字列名で、日本語名のフォルダーや、ファイルを参照すると、ブラウザが正常に参照出来ない場合が多い。その時、URL文字列名をURLエンコードしない日本語名に変えたら、参照できた。(フルパスや、../../などでも参照できることもあった。)
    KZは、マウスドロップやファイル選択などの時に、URL文字列名に変換するが、タグを開いて直接日本語を記入することができる。
    以後KZは、勝手にURL文字列名に書き換える事はしない。
  5. 例2:URL文字列名で日本語フォルダを参照しているHTMLファイル(←Firefoxで保存したHTMLファイル)を、KZで開くと正常に処理されない事があった。
    このとき、日本語フォルダ名をKZでURLエンコードしたらエンコードタイプが違っていたので、それをテキストエディターで置き換えてから、KZで開いたら正常に開けて編集できた。
    (URLエンコードは、新規KZの上に、参照するフォルダ内のHTMLかCSSファイルをドロップすれば表示されるのでそれをコピーして使う。)
    編集したファイルは、Firefoxで正常に開けた。 IE では、Firefoxで保存したファイルも、それをKZで編集したファイルも正常に開けなかった。
  6. 例3:URLエンコードしない日本語名で日本語名のフォルダやファイルを参照しているHTMLファイルを、KZで開くと、参照して処理することができなかったり、正常に表示されないことがあったが、正常に開ける場合もあった。
    単に例1と合わせると、不成立となる場合がありそうに見えるが、例1か例2のような方法でだいたいなんとかなる。
  7. HTML の meta 部の charset を変えるとおかしくなるのはわかるが、このcharsetとブラウザが作り出すURL文字列名の種類が違っていることがあった。 KZもcharsetと違うURL文字列名を作り出すことがあった。実際の文字コードは、判別ツールを使わないとわからない。
  8. ブラウザが保存機能で作り出すURL文字列名や文字コードと、KZが作り出すURL文字列名や文字コードが違うことがあるようだ。
  9. ブラウザが保存機能で作り出すURL文字列名や文字コードは、Firefox と IE では違う場合があるようだ。
  10. ブラウザが表示できるURL文字列名や文字コードの組み合わせと、KZが表示できるURL文字列名や文字コードの組み合わせが、違うことがあるようだ。URL文字列名を別の文字コード方法で変換して置き換えたらうまくいった事があった。
  11. 画像ファイルは、英文名にした方が問題はすくない。空フォルダにまとめて移動して、リネームソフトでリネームすれば英文名に変えられる。
  12. 画像が不一致だと、FirefoxやKZではX印がでないので、確認のため一時的にCSSでimgタグに太いボーダーラインを設定しておくとわかる。

複数タブ画面を開くとタブ名がKZ名にならず誤動作する場合がある。 その場合は1つのファイルは1つの画面で開くようにする。(タブ画面を閉じるには、タブの右端の赤のX印を押すか右クリックする。) いろいろやらせるとそれだけリスクが増える。

新しいページを作成する時の一番初めに、必ず、 Format/「Page Title and Properties」で、Shift_JIS UTF-8 などの Character setを設定する。後で変えると問題を起こす。

●META タグ などは ソース画面からダイレクトに記入する。
キーワードの例 < meta name="keywords" content="  ,   ,  ">
説明の例 <meta name="description" content="     ">
但しDTDだけは、KZのソース画面で修正してもKZの起動時点の設定に戻されるので、テキストエディターで変更する必要がある。
例 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

●KZ で作ったページは、必ずIEのブラウザで確認する。 IE は、KZ や Firefox とは表示が異なる場合が多いので要注意。

●ツールバーのアイコンを増減するには、K/Z ではツールバーを右クリックして、マウスで移動できる。(Nvuの場合は View/Show/Customize )

●編集中のホルダーのパス(アドレス)を調べる方法 フォルダーを開く方法
1 File>Browse Page (又はPF5)でFirefoxで開かせると、URL欄にフルパスが表示される。(日本語ファイル名だと開けないので↓下の方法)
このフォルダーを開きたい場合は、フォルダー部分をコピーして、Explorer の上のアドレス欄に貼り付けてEnter。 
2 File>Save As  で開いたダイアログから、開いているファイルのアイコンをつかんで、Firefox の上にドロップする。後は上と同じ。
3 Format/「Page Title and Properties」で開くボックスの最上段の灰色の小さな文字列で見る。 ただし、コピーはできない。

●ページの全体共通の文字カラー、背景カラー、背景画像は、Format/Page Colors ...でも設定できるが、最近はCSSで設定する。

画面下のステータスバーは非常に便利で、使用頻度が非常に高い。

ステータスバーに表示される<タグ>をクリックで選択すると、その中身(例えば Table など)ごと一括してコピー・削除・貼り付けができる。
Ctrl+C でコピー、Del で削除、Ctrl+V で貼り付けができる。表やタグの範囲などの一括コピー削除が簡単にできる。

ステータスバーに表示される<タグ>を右クリックして、 Advanced Properties で属性を修正できろ。 Remove tag では、タグを外すことができる。タグを外して別のタグに置き換えるのに非常に便利である。

ステータスバーに表示される<タグ>の上にマウスポインターを置くとそのタグに割り付けられているコードが表示され、確認に便利。

ソース画面に 切り替えるには、その前に、見たい文字の所にマウスポインターを置くか、見たい所の文字2〜3文字をマウスで選択するか、ステータスバーの該当タグを押し て反転させるなどしてから、ソース画面に切り替えると、その部分が開く。マウスポインターを置いただけの場合は場所が分かりにくいが、矢印キーで動かせば カーソルの場所が分かる。
metaタグの記入、<br>タグの追加削除など、ソース画面でなければ出来ないこともある。

前述のように、ソース画面はいじらない方がよいが、やむを得ずソース画面で編集する場合には注意が必要である。

JavaScript別ファイルにする。
script
内の記述内容によっては、ソース画面を操作しただけで、ファイルが壊れる場合がある。
KZにはJavaScriptのコンソールもあって問題ないはずだが、
この例のようにHTMLタグ文字を含むscript 行を入れると
KZがHTMLタグと勘違いしてファイルの破壊が発生する。
対策→  script を別ファイルにすれば問題は無い。< body> 内でもいい場合があるがKZが勘違いしない保証はない。

Insert HTML 画面は、一部分のソースを修正するのに便利である。
  メニューバーから、 Insert / HTML でボックスが開き、該当部分のソースコードが表示される
タグを選択後、Alt+I→H キーでも開く。
  但しタグをまたいで開いて修正すると、前後のタグが切れてしまうので、”タグ単位” (1又は複数のタグ)で、選択反転してから開く必要がある。
  タグ単位で開くには、ステータスバーで該当部分のタグを押すなどして選択してから開く。ソース画面では、該当部を探すのが大変なので、
  この方が速くて問題が少ない。
なおこのボックスは、コーナーをマウスでドラッグすると拡大出来る。
ショートカットキーコピーはCtrl+C、貼り付けはCtrl+V。 戻し Ctrl+Z、進み Ctrl+Y もよく使う。 切り取りは、Ctrl+X
  ブラウザからコピーしてきた文字をタグ無しで文字情報だけ貼り付けるには、 Alt+[E→O] ででき、非常に便利である。
  但し、
タグ無しで文字情報だけ貼り付ける場合、この機能が働かないことがある(KZに多いようだ)。その場合は、一旦KZ  を閉じて、
  開きなおせば OK。
これは、Edit>Paset Without Formatting  または、右クリック>Paset Without Formatting  でも同様。
検索は、 Ctrl+Fでできる。置換もできる。 検索窓を閉じてからの次の検索は、PF3キー。 

開きなおしは、  閉じて開きなおすのが確実。 開いたまま開きなおせる事になっているが、File>Revert では画像は開きなおせないとか、
File>Reload Images でも画像が読みなおさないなど、その他にも問題がありそうなので、RevertやReload Imagesは使わない方が安全

特定タグの一括削除 (便利な機能
 これを知らないと、ソースコードからそれらのタグを1個づつ消さなければならず、数が多いと作業が大変で間違いも起きやすくなる。
 KZでは、これらを一括して削除できるので、修正するときには、非常に便利である。
  削除したい範囲を選択して、メニューバーから、次の操作で一括削除できる。
  1. p h1〜h6 pre は、Body Text を選びなおせば、こららのタグはすべて削除される。div タグは、ステータスバーから1個づつ消す。
  2. カラータグ span style="color 〜 は、カラーボタンを押して Hex 欄の mixed を削除して、カーソルをそこに置いた状態でEnterキーを押す。
  3. 文字サイズタグ、 big、 small、 font size=〜、 は、Format>Size>midiumで一括削除される。
  4. リストタグ ul、 li、 ol は、リストタグボタンを押せば消える。一度で消えない場合は、もう一度押せば消える。
  5. 自分で設定した、SPANタグ(頭にピリオドがつくタグ)は、メニューバーの左から2番目の選択ボックスを押すと、選択部分に入っているSPANタグが、仕切り線の上側に表示されているので、消したいタグをクリックすれば、そのタグが一括削除される。
  6. 確認は、同じ範囲を選択して、Alt+【I→H】 でHTML画面を開いて確認する。
●(Nvuだけの問題下の注意事項にもあるが、目次や、参照で、自分のHP内のページに相対リンクを張ると、
 file:///C:XXXXと、自分のPCの場所のリンクになってしまう場合がかなりある。このまま、ネットに UPしてしまうと、リンク切れになって
  しまう。UPする前に、必ず、file:///などの文字を検索するか、マウスポインターを当てて、file: ///C: XXXXと表示されるかどうか確認
 する必要がある。修正は、リンクボックスで、「URL is relative to page location」にチェックをすれば、相対指定になる。

------------ 便利な使い方 ------------
●HTML ファイルをKZで開く方法
  方法1 ファイルエクスプローラーFTP ソフトファイラーなどのソフトから、右クリック>送る で起動する。ただし、Send To フォルダーに
        KZ のショートカットをコピーしておく。 Send To フォルダーの場所は、C:\Documents and Settings\xxxx\SendTo  
  方法2 ファイルエクスプローラーややFTP ソフトファイラーなどのソフトで、
       目的のファイルをつかんで、デスクトップの KZ  のアイコンの上にドロップすれば開く。
  方法3 Firefox  に ViewSourceWith を組み込み、Firefox のメニューバーに出来たアイコンを押して開く。
       (日本語のホルダ名やファイル名でも開ける。) ViewSourceWith では、テキストエディターでも開けるので便利である。
  方法4 最近開いたことのあるファイルなら、File/「Resent Pages」で開ける。
  方法5 File / Open File で記入ボックスから開く。
       記入ボックスのファイル名に「ファイルエクスプローラーからホルダーのフルパス」又は「ブラウザからファイルのフルパス名」を
       コピーしてしてきて貼り付けて「開く」を押しても開らける。       
  方法6 KZ の新規画面に、ファイルエクスプローラー又はブラウザからファイル名を(1つづつ)ドラッグ&ドロップすると、
       KZ の新規画面に、リンクアドレスが表示されるので、それを、右クリックで、Edit Link inNew window を選択。
       注意:1KZ に1つづつ行う。(複数まとめてドラッグすると、エラーの元)
  方法7 やや面倒な方法だが、Site ManagerをPF9キーで開いて、サイト名一覧から開く。Site Managerを閉じるにはもう一度PF9キーを押す。
       サイト名を登録するには、Edit sitesボタンを押し、Site Nameにサイト名を記入し、Select directoryでフォルダーを選びOK。
       赤のX印でファイルを削除すると元も消えるので要注意。ファイルの並び順は文字順のみ。自動リフレッシュはされない。

●KZで作成中のページをブラウザで開方法。 
F5キー (File>Browse Page) (ただし日本語ファイル名は不可なので↓下の方法で開く)
File>Save As  で開いたダイアログから、開いているファイルのアイコンをつかんで、ブラウザ の上にドロップする。
エクスプローラーや、ファイラーでファイルのあるホルダーを開いておいて、その中の該当ファイルをダブルクリックして開く

●KZで作成中のページのファイルのあるフォルダーをExplorerで開く方法。
  同じフォルダー内の画像など他のファイルを見たい時に知っていると便利。
  → File<Browse Page またはF5キーでブラウザに表示させ、ブラウザのURL欄にある、file:///から始まるフォルダー名を
  コピーして、Explorerのアドレス欄に貼り付けてエンターキーを押す。
●KZ からリンク先のページをダイレクトにKZで開く場合は、リンク部分を右クリックし「Edit Link In New Window」を選ぶ。

------------参考 ------------

●KZ画面や、ブラウザ画面や、記入欄で、文字列を全部選択単語選択する方法。
トリプルクリック(高速で3回続けてクリック)すれば、全部選択でき、ダブルクリックすれば、単語選択ができる。

●ブラウザのURL欄にファビコン(Favicon)を表示させる方法。
<link rel="shortcut icon" href="favicon.ico"> を<head>〜</head>間に置く。  TAG index  参考 参考 
画像は、16X16pxのBMPファイルをGimpなどで ico (Microsoft Windows アイコン)で保存すれば作れる。
ファビコンはブラウザのバーの背景が一般的には#ECE9D8(236 233 216)でブックマークの背景が白なのでどちらでもわかるように作る。

●閲覧者がFirefox で保存した時にHTMLのファイル名ではなくタイトル名で保存させる方法。 (問題もあるので使う場合は下記注意*が必要。)  
リンクして飛んでいった先のページのURL の最後が/で終わるように表示させる。ブログなどでよく見かける。

   ← このサイトの親のサイトであるが、このようにリンクすれば保存するときのダイアログに出る保存ファイル名がタイトル名となる。 
検索エンジンに登録する場合に、index.html を省略して、最後が/で終わる形で登録する例も同様である。
参考: 自分のサイト内で、自分のサイト内のメインファイルにリンクを貼るときに、index.html とせずに、同じホルダーのindex.htmlなら ./ (ピリオド1個とスラッシュ1個)と記載してもよい。
1段上のフォルダーのindex.htmlなら ../ (ピリオド2個とスラッシュ1個)と記載する。2段上なら、 ../../  1段下なら xxxxxx/     
*注意1 ただし、その際フォルダ内には必ずindex.htmlを置くこと。index.htmlが無いと、サイトの全部のツリー構造が表示されるのでよくない。
相対パスの階層指定方法 → 参考 
*注意2: 最後が/で終わる場合は、ローカルでクリックしたときにそのページにジャンプできずに、そのフォルダーの全ファイルが
表示されてしまうという問題もある。PC内にWEBサーバーを設ければジャンプできるが今度は、そのページからHTMLファイルを
開けないという問題がある。
* 注意3: Firefox で保存した時にHTMLのタイトル名で保存させる方法は、ファイル名がindex.htmlのファイルにしか有効でない。1ファイル1フォルダとしてファ イル名をindex.html にした方がやりやすいという人もいるし、それではindex.htmlのファイル名だらけになって管理しにくいという人も いる。

ブラウザの保存機能に注意!

  ブラウザで見ているページをブラウザの保存機能で保存させた場合は、

・IE6、とFirefox3 とも、実際のページのソースコードとは違うソースコードで保存される。IE6、とFirefox3とも長い文章の間に改行コードが入る。

・IE6では、小文字を一部大文字に書き換える。IE6では、CSSファイルも書き換える。IE6では、DTDを入れ替える場合がある。

・ホルダー構造は実際とは異なり、まとまったフォルダーとして保存される。

・表示/ソースで見た場合は、元のソースとの違いはあまりない。ただしFirefox3では空白行が入ることがある。

・ Firefox3で保存したページは、Firefox3やIE6では正しく表示されない場合がある。理由はFirefox3はCSSファイル内の@リンク 先のCSSファイルや画像ファイルを取り込めない問題(a)と、日本語のファイル名にするとソースがURL文字列名となって保存され、IE6で見れない問 題(b)などである。

・(b)の場合は、Firefox3で日本語名で保存してから、ソースの%を含むURL文字列のホルダ名を日本語名に置換してみる。

・(a)の場合は、CSSファイルの中の「@リンク先のCSSファイルと画像ファイル」を元のHTMLファイルのソースコードのlink親ホルダーからた どって同じ保存ホルダー内にDLして、「@リンク先」を「/ホルダー」無しに修正して、DLした同じ保存ホルダー内を参照できるようにする。リンクをたど るとき、../は一つ上のホルダー、./は同じホルダー。画像はbackground として数十個数百個張られている場合は、手作業は大変。その場合は WeBoX(参考) などのページDLソフトを使えば同じホルダ構造で全て一括してDLできる。

・IE6で保存するとCSSファイルの中の@リンク先のCSSファイルを保存できる場合があり、日本語のホルダー名がURL文字列にならなくていいが、IE6 では保存できないページもかなりある。その場合には次のような方法がある。
(a) Firefox3でファイル名を 英語(半角).html にして保存する。そのファイルをIE6で開いて、「完全」でなくて「webページHTMLの み」で拡張子を .html と追記して保存(ファイル名は日本語でもよい)する。その保存したHTMLファイルを再度IE6で開いて「完全」で保存(同 じファイル名で拡張子も同様に .html と追記)してみる。その際必要に応じてCSSファイルの中の「@リンク先のCSSファイルや画像ファイル」を DLしてリンクし直してみる。
(b) IE6で「webページHTMLのみ」で保存してしてから、そのHTMLファイルをIE6で開いて「完全」で保存してみる。その際必要に応じてCSSファイルの中の「@リンク先のCSSファイルや画像ファイル」をDLししてリンクし直してみる。
(c)上の方法でSCRIPT関係のタグ(一般的にはJavaScript)を無効にしてみる。SCRIPTを外してもある程度内容のわかるページもある。ブラウザのJavaScript設定のON/OFFはページの取り込みとは関係なさそうである。

・WEB ページをDLするソフトではソースコードを書き変えることはなさそうだ。リンク先の先までたどってフォルダ構造をDLするが、無駄なフォルダーまでDL してファイルサイズが大きくなる場合がある。またフォルダー構造が複雑になって、どのフォルダーに親ファイルがあるかがわかりにくい場合もある。

・IE6で保存したファイルの注意: ヘッダーのトップが下記のように変換される。1行目は特殊なDTD、2行目は元ファイルのURLの記録場所である。
この2行目が問題で、これによって、IE6ではファイルのリンクが開かない問題が発生する。 
対策:試行錯誤の末:2行目の<!- - saved fro, url=(・・・・・ <!  - - saved fro, url=(・・・・・ に変えたら(2行目の3文字目にスペースを2個入れたら)解消した。(タグの<>印は、文字化け防止のため全角で書いているが使うときは半角に戻して使う。) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"
<!-- saved from url=(0077)http://www.geocities.co.jp/SiliconValley-SanJose/2485/image_soft_compare.html -->
<HTML lang=ja><HEAD><TITLE>

Firefox11(2012.03.11公開) を利用すると、見ているページを解析することができる。

Firefox11の保存機能

・Firefox11で保存する各種方法

  • 画面を右クリックして、「名前を付けてページを保存」
  • 画面の右下のコーナーの三角マークを右クリックして、「名前を付けてページを保存」
  • ファイル>名前を付けてページを保存
  • Ctrl+S
・保存は、英文のファイル名.html で 「 Webページ完全保存」で保存する。
 日本語名だとKZで表示ができない。
 保存すると、HTMLファイルのサブホルダとして、ファイル名_files のフォルダが作成され、その中に画像やCSSファイルが保存される。

Firefox11の「ソース表示」機能  

・Firefox11でソース画面を開く各種方法

  • 選択してから右クリックして、「選択した部分のソースを表示」
  • 画面を右クリックして、「ページのソースを表示」
  • 画面の右下のコーナーの三角マークを右クリックして、「ページのソースを表示」
  • ツール>ウェブ開発>ページのソース
  • Ctrl+U
Firefox11の「ページの情報」機能 (使っている画像を調べることができる。)
・Firefox11でページの情報画面を開く各種方法
  • 画面を右クリックして、「ページの情報を表示」
  • 画面の右下のコーナーの三角マークを右クリックして、「ページの情報を表示」 
  • ツール>ページの情報
  • Alt+(T→I)

・メディアタブの欄で、画像を見ることができる。(右と下にスクロールバーが出ているときは範囲外に隠れているので動かして見る。)

・メディアタブの欄で、画像を1つ以上選んでおいて「名前を付けて保存」ボタンで保存できる。
(保存するホルダーは、別途先に作っておいてそこに保存する。ここで新規に作成すると複雑になる。)

Firefox11の「要素を調査」機能  (CSS要素の内容を調べることができる。)

・Firefox11で要素調査の画面を開く各種方法

  • 画面の調べたい所をを右クリックして、「要素を調査」
  • 画面の右下のコーナーの三角マークを右クリックして、「要素を調査」 → 見たい所はHTML欄から選ぶ
  • ツール>ウェブ開発>調査  → 見たい所を左クリック
  • Ctrl+Shift+I  → 見たい所を左クリック

・下のバーのHTMLを押すと下にHTMLコードの画面が開く。スタイルを押すと右欄にCSS構造が表示される。右下のXで元に戻る。

・調査箇所を変えたいときは、ツールバーの調査をクリックして、画面の見たいところを左クリック。HTML欄から指定することもできる。

・このページで試したのがこの画像である。

・更に下のバーの3Dを押すと、ボックスの並び構造や多重化構造が積み木細工のように立体的に色分けして表示される。
このページで試したのがこの画像である。
この立体はマウスでグルグル回せて、ホイールで拡大縮小できる。そして積み木のひとつをクリックすると、その積み木の色が変色し、そのHTML、CSSを見ることができる。マウスの他に→←↓↑ASDWRIOのキーが使える。
最初にクリックした所を中心に立体化して見ることができるが、ただやたらと長いページは、あるところで積み木の底になってしまい、それより下は見えず、最初にクリックした所でなくて、ページのトップからの立体表示になる。
CSS欄では、HTMLの該当部分が使っているCSS要素とその要素の内容が表示される。
CSSは上位の要素の仕様を継承しているので、それらも表示される。
調査バーに並んでいるタグボタンを押すと上位要素を見ることができる。

・似た機能として、Firebugがある。ツール>Web開発>その他のツールでインストールができ、インストール後、Firefoxの右上の虫のマークを押して出るコンソールで見れる。ただし立体表示はできない。

 

基本的な文書作成方法 

------------ 文字修飾 --------
   文字の修飾をHTMLで行うのは旧式で望ましくないが直接的で分かりやすい。CSSファイルで行う方法につては後で説明する。
●文字カラー、文字の拡大、縮小、太文字、中央寄せ、文字の背景色、の設定は、文字列を選択してツールバーの、アイコンを押す。
  メニューのFormat / Text Style から 取り消し線<line-through>、強調文字<em><strong>、上付き文字・下付き文字<sup><sub>
  などが設定できる。
  文字カラー、文字の背景色、のリセットは、ツールバーのアイコンを押し、HEXコードをダブルクリックで選択し、削除してEnterキーを押す。
●フォントの設定は、文字列を選択して、ツールバーの白い選択ボックス又は、メニューバーの Formatから選択。
●文字修飾した文字列の前後に文字を書き加える場合に、文字修飾が効かない場合がある。その時は、一旦マウスで文字列の中に
  カーソルを置いてから、カーソルを文字列端に移動して書き加える。
LINK や文字修飾状態をOFFにするには: Link  をOffにするには、Ctrl+Shift+ K 。文字修飾をOff にするには、Ctrl+ Shift+Y 。 
  何か文字を記入してからそれを選択して、右クリック/Remove All Text Styles でもできる。 改行しただけではだめである。
文字列修飾のリセット:文字列の編集を繰り返すとタグが細切れになりソースが見難くなる。その場合は、いったんリセットする。
  リセットは、文字列を選択して右クリックし、「Remove All Text Styls」でできる。この場合リンクタグは消得ないので都合がよい。
  リンクタグも消したい場合は、一たんコピーしてからAltキーを押したままE→Oと押せば、文字だけが貼り付けられる。 
文字サイズを px,em などで このように 細かく指定したい場合は、文字を選択しておいて、
 span型を利用するために、仮に太文字又はカラーを設定する。 span タグを入れるためである。
 次に、画面下のステータスバーから、その文字に対応する<span>タグを右クリックで選び、Advanced Propertiesを選んで、
  Inline Style で Property→ font-size、Value→ 24px のように設定し、その後、仮設定はRemoveで削除する。
●文字修飾をインラインでCSS修飾する場合も、上の文字サイズを細かく指定するのと同様に、span型を利用して設定できる。
------------ 文字修飾の注意 --------
文字修飾をすると、編集のたびに同じタグが増えてHTMLは汚くなる。
解消するには本当は後述のCSSで設定するのが望ましいが、簡易的には次のように<div>タグにブロック修飾する方法で解消できる。
ブロック修飾:行頭にカーソルを置いて、ツールバー左端のボックスから、Generic Container (div) を選ぶと<div>〜</div>タグが入る。
この<div>タグに上と同様な文字修飾を行えば、<div> 〜</div>タグ間のブロック範囲は全て同じ修飾になりHTMLはきれいになる。
●<div>タグに修飾を設定するには、画面下のステータスバーで< div>を選んでから、文字カラー、文字の太さなどの設定をする。
ただし、文字サイズは、ツールバーから< div>タグの修飾ができないので、画面下のステータスバーで<div>を選んでから、
右クリックで、Advanced  Propertiesを選んで Inline Style で Property =font-size、Value=small、 big、 13px などを設定する。
------------ 文字列操作 ------------
●文字列の移動:マウスでつかんで移動。
  その時、一旦マウスでつかんでKZの枠の外を通ってからドラッグすると、移動しないで同じ複製が張り付く。
生の文字の貼り付け:  Ctrl+C だと、タグの情報まで張り付くので、生の文字だけを貼り付けるの場合は、
 右クリック/Past Without Formattingで張り付く。 Alt+[E→O] キーでも可。
------------ リンク ------------
リンク設定方法  次の方法がある。
  1. 文字列を選択して鎖のアイコンを押すか、Ctrl+L で 設定画面を開き、URLをコピーしてきて貼り付ける。URL窓のアイコンをドラッグしてもURLは貼り付く。
  2. KZの画面に、ブラウザのURL窓のアイコンをドラッグする。この場合HTMLファイル名となるので、後でタイトルを書きなおす。
  3. KZの画面に、ブラウザの履歴欄から、ドラッグする。この場合はタイトル名がそのまま貼り付く。
    タイトルのないページは、ファイル名で貼り付くので後で適当なタイトルに書き変える。
    タイトルが長すぎて修正したい場合も貼り付けてから書き変える。
    いろいろ閲覧しているうちに、履歴欄のかなり下の方になってしまい探し難い場合は、ブラウザのURL窓のアイコンを、ブラウザの中にドラッグすると、再アクセスとなり、履歴欄の一番上に上がってくる。リロードでは再アクセスにならないので上に上がってこない。
  4. KZの画面に、ブラウザのブックマーク欄から、ドラッグする。この場合はタイトル名がそのまま貼り付く。
    タイトルを修正したい場合、ブックマークで取り込むときに名前を変える手もあるが、面倒なので、貼り付けてから書き変える。
  5. ブラウザの中に書いてあるリンクを貼り付けるには、リンク文字を、ドラッグしてきて張り付けられる。この場合タグもコピーしてくるので、貼り付けた後でタグを外す。外し方は、ステータスバーの不要なタグを右クリックして Remove tag 。
  6. ネッ トにはアップロードしないで、自分のPCだけで自分のPCの中のファイルをブラウザでリンクして見たい場合がある。その場合は、エクスプローラーのファイ ルをマウスでつかんで、KZの上に持ってきて落とす。すると、フルパスのフォルダー/ファイル名で、リンクが貼られるが、これをブラウザでクリックして も、アクセスできない。
    そこで、ソースを開いて、<a href="aaaaaa">bbbbbb</a>のbbbbbb(日本語の部分は特殊な%を含むURL文字列になっていてフルパスに なっている)をコピーして、aaaaaaの所に入れ替える、そして、bbbbbbの所には、エクスプローラーのファイル名をコピーしてくるなりして、わか りやすい好きな名前にしておく。これで上書きすれば、動画やPDFやHTMLなど好きなファイルを開く事ができる。(間違ってこれをアップロードしない 事)
●相手がクリックした時リンクを別ウィンドウで開かせるには、リンク設定画面で、「More Properties 」ボタンを押し/
  「Target / Link is to be Opened / in a new window 」 にチェックをする。
  または、リンク設定画面で、「Advanced Edit」ボタン/Attributeに target と記入し/ Value にblankと記入してもできる。
●リンク場所の確認は、リンク文字をダブルクリックするか、またはリンク文字にマウスを当てれば表示される。
●リンク文字の色をリンク部分だけ自由に設定できる。リンク部分を選択して、カラーアイコンで設定できる。
●アンカー(ページ内のポイント)挿入は錨マークのアイコンを押してアンカー名yyyを記入する。アンカーへのリンクは、
  リンク画面で、ページ内の場合は、▽ボタンの一覧表から#yyyを選ぶ。別ページからの場合は、 xxx.html#yyyと記入する。 
● リンクを削除した時に、空リンクが残ることがあり、この空リンクが改行系のタグにはさまれていると、
  KZやFireroxでは、改行されないが、IEでは改行されて表示される。この問題が生じたら、テキストエディターで ></a> を検索して、
  アンカーかどうか調べる。アンカーでなければ、空タグの可能性があるので確認して削除する。
●リンクタグをコピーして別の場所に貼り付ける場合、自分のページの相対アドレスURLへのリンクタグをコピー&ペーストすると、
  自分のハードディスクの絶対アドレスに変わってしまう場合がある。→マウスを乗せて必ずチェックする。
  (普通は起きないがページ構成によるのかもしれない。
  その場合は、リンク設定ボックスを開いて相対URLのボタンを押す。  同じページにリンクをするケースは少ないと思うが注意が必要。

------------ 画像 ------------
画像貼り付けは、ファイルエクスプローラーから画像ファイルをNvu の画面にドラッグ&ドロップすれば張り付く。
  (夕焼けの)画像アイコンを押して、ホルダ名やファイル名を設定してもよい。
画像のサイズを設定した方が、画像が読み込めない場合などの画像サイズのずれを防できるので望ましい。
  サイズの設定は、画像をダブルクリックで開く設定画面で、Dimensons タブを押して、Custom Size にチェックを入れるだけでよい。
画像からリンクさせる場合は、画像をクリックして選択後、鎖のリンクアイコンを押して、 Link 先を設定する。ダブルクリックでも設定できる。
●画像の縮小率を変更するには、画像のダブルクリックして、Dimensions タブで設定。
画像を縦に並べる時の縦ずれ横ずれの注意: ソース画面や、又はテキストエディターで修正する場合に起きる場合がある。
  Nvu、Firefox、IE、印刷、によってずれ方が異なる。どちらでもぴったりくっつけて並べるには、
  1 Strict 系のDTDは使わない。
  2 画像の直後に< br>タグを入れて折り返させる。
  3 <img>タグの前後にスペース又は
、&文字のスペース「&nbsp;」、を入れない。
  4 最後に、テキストエディターの検索で、
<img>タグの前後のスペースの有無をチェックする。 正規表現検索例: <img [^>]*>
  理由: 横ずれは、 Firefox、IE、印刷時、空白スペース、&文字のスペース「&nbsp;」、などの組み合わせによって、表示されたり
  されなかったりする。 縦ずれの理由は、 Strict での例 Transitionalでの例 を参照。
画像無しの注意! 画像を貼り付けた後でフォルダ移動や、アップロードのミスなどで画像ファイルがない場合は、Nvuでも、Firefoxでも何も
 表示されなくなるので、画像なしになっていることすらわからない。画像サイズやリンクを設定しておいても何も表示されない。
 IE6だと、赤の [ X ] 印が出るので画像なしであることがわかる。必ずIEでチェックする必要がある。
 ただしNvuではダブルクリックで画像ダイアログを開くと画像サイズが入り、Nvuで見た場合に枠線が見える場合もあるが、あてにならない。
● ブラウザから利用可能な画像をドラッグでコピーしてNvu に取り込むには、後ろの項目の【ブラウザからの画像取り込み】で取り込む。
------------ 水平線 ------------
水平線(horizontal line)は、Insert / Horizontalで設定。
  区切り用の水平線の幅の設定は、ラインを右クリック/[Horizontal Line Properties]で設定。
  左クリックでは選べないので注意。それでも選べない時は、HTML Tags 画面にすれば選べる。
  長さの設定は、ブラウザなどの状況によって左中右の表示位置が変る場合があるので、100%以外にする場合は表示結果に注意する。
  水平線の削除は、ライン真上を「右クリック」してからDelキーで削除。
  色の設定は、[Advanced Edit]/[Inline Style]/property/background-color=#00ff00 でできるが、幅3pix以上でないと、
  枠線に隠れて色は出ない。(3-D Shadingはチェックのままにする。チェックを外すと、IE6では正しく表示されない。)
------------ レイヤー(絶対値) ------------
画像や文字のレイヤー(絶対値)移動ができる。
  絶対値指定は混乱するので望ましくないが、CSSでは特別の場合に必要になる。またツールバーから操作するとインラインスタイルシート
  記述になるため今は望ましくないが実験的には面白い機能なので記載する。
  画像や文字を選んでからツールバーの「押しピン」のアイコン(K/Zでは隠れているアイコンを表示させる)を押して「右向き」にすると、
  絶対値指定になる。絶対値を指定すると同じ位置にいくつも重なるのでレイヤー状態ともいう。
  HTMLコードには<div style="position: absolute;  のタグが入り、画面上には、左上に灰色の+印又は□印が現れる。
  この印をマウスでつかんで動かせば画像や文字を画面の好きな位置に絶対値移動できる。
  移動後、別の場所をクリックすれば、そこで固定する。再移動は、画像や文字をクリックして+印を出して移動させる。
  解除戻しは、+印が出ている状態で、押しピンを押せば、解除される。戻る時は何故か改行されて次の行に戻る。
  レイヤー状態にした画像や文字同士が重なる場合は、+印が出ている状態で、押しピンの横の 「Front」 「Back」のアイコンを押す。
  レイヤーのリセットは、文字又は画像を削除してもできるし、画像をダブルクリックして、 Advanced Edit で削除設定しても良い。
  ただし、ブラウザ側で文字の拡大縮小をされるとずれてしまうので安易に使わない方がよい。(複数のブラウザでのチェックが必要)
  (一般的には表のセルを使って表示位置を決める)(何回も移動すると、Nvuがエラーを起こす。)
------------ 表作成 ------------
 最初の注意
  1 表は物事を表形式で記述するときに使うもので、表をページのレイアウト(枠組み)に使うのは旧式で望ましくない。
    ページのレイアウト(枠組み)は、CSSのボックスで行うようにする。CSSのボックスについては後で説明する。
  2 表の作成は以下のように行うが、CSSを使うとその表の修飾を更に細かく行うことができる。CSSファイルで行う方法につては後で説明する。
表の作成は、ツールバーの「表アイコン」を押して設定できる。 
  新規に作る場合は、ダイアログの、Precisely と Cell で height 以外の設定ができる。後でも、表アイコン又は、表をダブルクリック、で変えられる。
  heightはAdvanced Edit 画面のInlein Stile でProperty=height Value=200px などと設定できるが、面倒なので、後から設定した方が楽である。
行や列や表を挿入削除するには:セルを右クリックして選択肢から選ぶ。
  セル内をクリックすると、 <|(X)|> 印が現れる。ここで <| 印を押せば < の方向にセルを追加でき、
   (X) を押せば、直角方向の「行又は列」を削除できる。
表の中央寄せは、ファイルの先頭にあるDOCTYPE: DTDを適切に選ばないと、IEやMacでは有効にならない。 最初の設定を参照。
  画面下のステータスバーで<table>タグを選んで、ツールバーのアイコンから表設定ボックスを開いてできる。≡アイコンでも出来る。。
  但し、表設定画面で advance の設定をすると左寄せにリセットされてしまうので再度設定する。
  DOCTYPEに左右されない方法 下の注意 もあるが望ましくない。
複数セルの結合は、表の複数のセルをつなげて選択して、右クリックすれば、選択セルの結合が出来る。
  ただし1つの表で何箇所も結合すると、表が乱れて収拾がつかなくなる。その場合は、セルの中に新しく表を作って
  入れ子にして目的の形を実現する。(一番上の行と一番左の列を結合しないで残しておければ他はいくつ結合してもいいようだ。)
表全体を丸ごとコピーするには、画面下のステータスバーの< table>タグをクリックしてCtrl +Cでコピーできる。
  コピーしたテーブルを貼り付けるには、 Ctrl+V。
  (セルの中にカーソルを置いて[右クリック/Table Select/Table]で選択してから、Ctrl +C でもできる)
  マウスで表の少し上から、少し下までドラッグして選択コピーした場合は前後のものも一緒にコピーできる。
表全体の背景色・文字色の設定/リセット: ステータスバーの<table>タグをクリックして選択後、
  ツールバーの「色設定アイコン■/□」で設定できる。 色のリセットは、色設定画面の「HEXコード」をダブルクリックして削除。 
単独セルの背景色・文字色の設定/リセットは、セルをクリックしてから、ツールバーの「色設定アイコン■/□」で設定。
複数セルの背景色・文字色の設定/リセットは、マウスで複数のセルをドラッグして選択し、「色設定アイコン■/□」で設定。 
表/ セルの詳細設定・変更(表サイズ・枠線・文字位置・背景色など)は、表の中にカーソルを置いて、ツールバーから
  「表設定画面」を開いて設定。この「表設定画面」の Cells 画面で、 Next ボタンを押すと次の Cell に移動。Applyボタンで反映。
  又は、セルを右クリックして、選択肢から、[Table Cell Properties]又は[Table or Cell Background Collor]を選んでもできる。
別の表/セルに同じ色を設定するには、(1)  色設定画面で、 Hexコードを2〜3回クリックでコピーして、
  (2) 別の表(セル)に同じ操作で、一旦何かの色にしておいてから、Hex コードをダブルクリックで上書きしてEnterキー。
●表の詳細を変更する場合は、単に設定しなおしてもうまくいかない場合がある。 その場合は、
  一旦、[Advanced Edit]で、[HTML Attributes] と[Inline Style]を開き、該当部を[Remove]してから設定しなおせばよい。
●表の背景に画像を張る場合は、表の中にカーソルを置いて、「表設定画面」を開いて、[Advanced Edit]/[HTML Attributes]で、
   Attribute=background、 Value=yyyy.jpg と直接書き込む。
表の中に表を入れ子にするには、目的のセルにカーソルを置いて、右クリック/Table Insert/Tableで挿入するか、
  又は、小さな表の原型をいくつか用意しておいて、それをステータスバーからコピーしてセルの中に貼り付ける。
  (原型の表のコピーはステータスバーの<table>タグを押せばできる。)
  親の中に複数の子、子の中に複数の孫というように、多重に入れ子にすることもできる。
入れ子にした親の表の設定を変更するには、画面下のステータスバーに現れる親の <table> タグを左クリックしておいて、
  画面上のツールバーから表設定画面を開いて設定する。
表と表の間に隙間を空ける方法。2つの表の間のスペースをなくすと、上下の表がつながってしまい、離す事ができなくなる。
  表と表の間を空けるには、上の表の右下の枠の2mmくらい右外を(又は、下の表の左上の枠から2mmくらい左外を)クリックしてから、
  Enterキーを押せば分離できる。 うまくいかない場合は、ステータスバーの<table>タグを選択して、
  「Insert HTML」画面を開いて、最先または最後に文字を書き込めば、間にその文字が入って間が空く。
●表の仮想枠線を消すには、画面下のPreviewボタンを押す。ブラウザ状態で見れる
●表の外での色設定やサイズ設定は、表の中に及ばないので確認が必要。(このページの最後の優先順位表を参照。)
表のセルの横幅を指定しない場合は、幅はセルの中の文字数によって自動的に決まる。(全セルの幅を無設定にする。)
  注意:セル幅を設定しない桁に文字が入っていないで全角スペースや半角スペースだけだたと、IEの場合は幅ゼロで表示するので、
      必ずそのセルの横幅を設定する。
表のセルの横幅設定は、最上行だけ設定すれば下の行はそれに従う。
表のセルの横幅は、一箇所でも指定した場合は、全てのセルについてサイズを指定すべきである。ただし最上行だけでよい。
表のセルの横幅設定は、画面上のスライドバーをマウスでドラッグして設定できるが、次の問題があるので望ましくない。
  1 最初に、全体の幅を、Pixe でl設定にして置かないと、各セルの幅の設定値がでたらめになる。%値は不可。
    (全体幅は、左端の枠をマウスで伸び縮みさせても設定できる。)
    (合計が表の全体幅と合わないことがあるので注意が必要。)
  2 横幅を%で設定にして、ブラウザの画面サイズに合わせて、表が伸び縮みするようにしたい場合はスライドバーは不可。
  3 スライドバーを使うと全セルにpixel値が設定されてしまい、以後の変更が困難になり、削除が大変になる。
  4 セルの結合がある場合は、各セルの幅値がでたらめになり収拾がつかなくなるのでスライドバーは特に不可。
    いったんスライドバーに触ると全セルに、 pixel値が設定されてしまい削除が大変になる。
  4 セルに幅を設定しないで、記入された文字に応じた幅に自動設定したい場合もスライドバーは不可。
  いずれにしても、手で幅値を入力するのが確かである。
セルを結合した場合には、複雑に結合した場合は、全セルに、横幅を設定しないと、表示が崩れる。
表のセルの幅を文字サイズより小さくするには、スペーサー画像を入れる。
  (CSSが主流になった現在ではスペーサー画像や表をデザインに使うのは望ましくない。)
  スペーサー画像は、透過GIFを2〜3個持っていれば使うときに自由にサイズを変えて使える。例えば「」は10X10pixの透過GIF。
  小さい画像はマウスでつかみにくいのでタスクバーの「HTML Tags」を押して選択し、HTML画面で指定してもよい。
  背景色と同色の画像、又は透過GIFはスペーサー画像といって空白セルの横縦を細かく埋められるのでよく使われる。
●表の横幅を全く設定しない場合で、セルの中に何も書かないと、ブラウザで表示した時そのセルの前のセルが伸びてきてしまう。
  半角又は全角スペースだけの場合も同じ。対策としては、横幅を設定する。隠し文字は不正とみなされる。IE6、や旧DTDの場合起きる。
●表の横幅を設定してある場合でも、表のセルの中に何も書かない場合は、ブラウザで見たときに背景や枠線が表示されない
  ので、全角または半角のスペースを入れておく。
●表の高さ(縦幅)の設定で、Nvu 上での表示は高さがずれて見えるが、ブラウザで見れば正しく表示される。ただし、DTDの設定
  適切でないと(Strict 系のDTDでFirefox系の場合)、画像の折り返し間に隙間が空く。→例 Strict での例 Transitionalでの例
  その場合は、スペーサー画像も機能しなくなる。 Nvu の画面では高さ表示がずれる。 DTDの設定は、 最初の設定を参照。
●テーブル枠の1辺の設定: 線幅と線色を指定する場合に、上下左右の4辺とも同じにしないで、各辺ごとに設定を変える事ができる。
  例 <td style="border-left: 1px solid black; border-bottom: 1px solid black; border-top: 1px solid black;"
      align="middle" valign="bottom"> </td>  と、CSSのBorders 設定と同じ記述をする。
●表の中の文字サイズを細かく指定するには、「表設定画面」を開いて、[Advanced Edit]/[Inline Style]で、
   Property=font -size 、 Value=13px などと直接書き込む。
------------ リスト形式 ------------
リスト作成: 並列列挙リスト<ul><li>順序付きリスト<ol><li>定義リスト<dl> <dt><dd> の設定とリセットは、
  ツールバーの「リストアイコン」又はFormat/Listで作成できる。再度「リストアイコン」を押せば、通常の文に戻る。
  並列列挙リスト<ul><li>と順序付きリスト<ol><li>の応用については、こちらを参照
  リストの下に、更にリストを作成する方法: 1 リストの末尾にカーソルを置いて、Shift+Enterでそのリスト内で改行し、次に
  改行した場所で、ツールバーの「リストアイコン」を押せば下位のリストが作成される。
  定義リスト<dl> <dt><dd>の意味と使い方は分かりにくいので、こちらを参照
 
------------ ブラウザからの 文字や画像 の取り込み保存 ------------
●ブラウザの画面全体をそのままNvuに取り込むには、
  【Nvuを使う方法】 ← CSSファイルを取り込まないので正常に取り込めない問題がある。
  ○ 1段階目 : Nvuの画面で、File/「Open Web Location」で記入ボックスを開き、ブラウザからURLをコピーしてきて、 
  記入ボックスに貼り付けてcreateボタンを押す。 (アドレスバーの中のマークを、記入ボックスにドラッグしてもよい。 
  create  ボタンが灰色になっていて押せない場合は、一旦 Choose File ボタンを押して Cancel で戻る。)
  FirefoxにアドオンのView Souce Withを組み込んでNvuを指定しておけば、そのボタンを押してNvuに取り込める。
  ○ 2段階目: 自分のPC内に新しい空のフォルダーを作って、そこにNvuから File> Save As・・で、xxxxx.html(ファイル名は英文字)の
  ファイル名で保存すると、Nvuの画面に表示されている直接リンクの画像やCSSファイルが全てローカルファイルとして保存される。
  (新しい空のフォルダーでないと画像やCSSファイルなどは保存されない。) (うまくいかない場合は、NvuでFile>Save As で保存するとき、
  右上の「新しいホルダーを作成」のアイコンを押して新しいホルダーを作成するとうまくいく。)
  但しCSSファイルが参照している先の画像までは取り込めないので、ブラウザからURLでアクセスして、ブラウザの表示/ソースで
  ソース画面を開き、 <head> の中の  <link rel= の中のCSSのリンクアドレスを参照して保存する。
  【ブラウザを使う方法】
  ブラウザで「ファイル/名前をつけて保存」で保存すると、HTMLファイルの下に
  「サブホルダー」が作られその中に、画像やCSSファイルなどが保存される。(CSS ファイルが参照している先の画像は上と同様。)
  この場合、ファイル名は英文字にしないと、後でNvuで正常に開けない。
●ブラウザの画面の一部を(画像や文字の部分を)コピーして Nvuに取り込むには、
  ○ 1段階目: ブラウザの画面をマウスでドラッグして選択した部分を、Nvuの画面にドロップすれば、文字や画像や表を一括
  コピーできる。コピー&ペーストでも同様。但しこのまま保存すると、画像が直接リンクになってしまうので、非常にまずい。
  ○ 2段階目: 自分のPC内に新しい空のフォルダーを作って、そこにNvuから File> Save As・・で、xxxxx.html(ファイル名は英文字)の
  ファイル名で保存すると、Nvuの画面に表示されている直接リンクの画像が全てローカルファイルとして保存される。
  (新しい空のフォルダーでないと画像は保存されない。また背景画像は保存されない) (うまくいかない場合は、NvuでFile>Save As で
  保存するとき、右上の「新しいホルダーを作成」のアイコンを押して新しいホルダーを作成するとうまくいく。)
  (IEからのコピーでは画像がコピーされない場合がある。)
  【確実にコピーする方法】
  ○ 文字を確実にコピーするには、Ctrl+C などでコピーしてきて、右クリックで、Past Without Formatting でテキストで貼り付ける。
  ○ 画像を確実にコピーするには、ブラウザの画像をつかんで、Explorer のフォルダーの中にドロップする。
    次にそのフォルダーの画像をつかんで、Nvuの中にドロップすれば貼り付く。(png画像は拡張子無しになる場合があるので後で付け加える。)
    背景表示で表示されている場合は、右クリックで背景を表示でつかむ。
    つかめないときは、Firefoxの画面を右クリックして「ページの情報を表示」で、(又はこの方法で)メディアタブから
    目的の画像を選んで保存して、次に保存ホルダーから保存した画像をつかんで、Nvuの中にドロップする。
    フラッシュの場合は、スクリーンコピーして、必要な部分だけカットして保存して使う。
 
 
------------ その他 ------------
●カラー選択ボックスでカラーグラーデーションの枠内をクリックしたまま
  一旦マウスを枠の3mmくらい外に出してからボタンを放すとボタンを放したまま選択色を動かせるので指が楽。
●ショートカットキーの応用  → 文字色設定は[Alt+ O→Alt+C]   テーブルの設定変更は[Alt+B→Alt+O] または[Alt+B→Ctrl+O]
   新規画面を開くには Ctrl+NまたはCtrl+Shift+N
インデント(40px左ずらし)の設定とリセットは、ツールバーのアイコンでできる。
●ツールバーの左のボックスから[Paragraph] (段落) [Heading] (見出し) の設定ができる。リセットは、[Body Text]を選ぶ。
上付き文字下付き文字にするには文字を選んで、 Format/Text Style/で[Superscript]か[Subscript]を選ぶ。例:  m2  CO2  
取り消し線を付けるには、文字を選んで、Format/Text Style/で[Strikethrough]を選ぶ。例: 消し
●CGI (PHP)やJavaScript用の入力ボックスや、押しボタンの作成は、Insert/Form またはFormアイコンで作成できる。

 
------------  注意 ------------
【注意】絶対リンク化 (Nvuの問題)(KompoZer では改善
  自分のHP 内のページに相対リンクを張ると、file:///C:xxxx/yyyy.htmlと、自分のPCの場所の絶対リンクに変わってしまう場合
  がたまにある。このまま、ネットにUPしてしまうと、リンク切れになってしまう。
  Nvuの設定状態や、PCの状態や、HTMLファイルなどの状況による問題かもしれない。
 対策:UP する前に、必ず、 file:///などの文字を検索する。マウスポインターを当てて、file:///C:xxxx/yyyy.htmlと表示されるか、
  yyyy.htmlと表示されるかを確認する必要がある。(Grep のできるソフトか置換ソフトを使うと便利。)
  修正は、ダブルクリックで開くリンクボックスで、「URL is relative to page location」にチェックをすれば、相対指定になる。

【注意】一字飛び越し問題 日本語文字の修整時に、一字飛び越して前に作用する不具合が起きる場合がある。
  原因:Nvuが「日本語の」文字列間に改行コードを自動的に入れ、その後Nvuが自分で入れた改行コードを適切に処理できないことによる。
      (長い日本語の文字列の場合、Nvuが自動的に適当な所に改行コードを挿入する。)
      参照→Nvuの改行コード問題と対策 で、日本語間の改行コードを削除する。
  飛び越しが起きる場所
  ソースコードをテキストエディターで見た場合、
  【日本語1文字】【改行コード】【日本語1文字】【特殊日本文字1】又は
  【日本語1文字】【改行コード】【特殊日本文字2】のパターンになると発生する。
  特殊日本語文字とは「」「」「」「」「」などの小さいかな文字と「」「。」 「」 「」、 右括弧 )    
  特殊日本語文字とは左括弧 ( 「 【 『  など。
 対策1:(一番安全で簡単な方法)一字飛び越しが起きた時は一文字後ろにカーソルをずらして 再度書きなおす。
 対策2: → 改行コード問題と対策 の方法で、日本語間の改行コードを削除する。
 対策3:ステータスバーで該当部分のタグを選択後、メニューバー/Insert/HTML、又は Alt [I→H]キーで
  Insert HTML 画面を開き、そこで修正する。
  但しタグをまたいで開いて修正すると、前後のタグが切れてしまうので、”タグ単位”で、選んで開く必要がある。
 対策4:ソース画面で修正したい文字を入力すれば入るが問題がある。(問題の箇所の2文字くらいを選択反転させておいてから、タスクバーの
  「Source」を押すと、その部分のソースコードが表示される。) 
  注意ソース画面での修正すると、即座にNvuが再編集処理をして改行コードが入る場合がある。短い文字列でも入る場合がある。
  特に、改行を削除すると多数の所に改行コードが入ることがある。これにより、別の所で、1字飛び越しが頻発することになる。
  このページの場合、整形後に一箇所改行コードを消したら、約 500箇所に改行コードが入った。(3回テストしたが3回とも起きた。)
  従って、ソース画面で改行コードを消すのは意味がなく、望ましくない。
 重要注意 2008年後半からFireFoxVer.3 になって、改行コードスペースとして表示するようになったため、
  日本語間の改行コードを削除することは非常に重要になってきた。
  参照→ Firefox3とNvuの改行問題

    
【注意】表を中央寄せに設定した場合IE やMacでは左寄りになる場合がある。
      対策: 
      ◆最上部の DOCTYPEの DTD を、適切に設定すれば、問題は解消する。 最初の設定の4項を参照。
        CSSでボックスを中央に設定する場合も、DTDを適切に設定すれば中央になる。
        例 <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      ◆表を入れ子にする方法 DTD の設定に左右されない方法であるが表を枠組みに使うのは望ましくない。(上の方法が望ましい)
        幅100%、横3枠、border= 0,spacing=0,padding=0のダミー表を作っておいてその中央のセル内に本来の表を入れる。
        入れ方は、本来の表を、ステータスバーの<table>タグを押してCtrl+Cでコピーし、
        Ctrl+Vでペーストする。 ソース画面をいじらなくてすむ。表全体の文字色設定ができなくなる問題も起きない。
        同じ手法でCSSでボックスを横に3個作ってその中央のボックスに表を入れる方法でもよい。
     旧対策の問題 
      1 <div align=center> 又は <center>タグを使って、中央寄せにする方法 
        問題:Nvuの処理上、表全体の文字色設定ができなくなる問題がある。 <center>タグは非推奨タグなので望ましくない。
       ソース画面から、テーブル全体のタグ(<table> < /table>)を、
        <div align=center> - - -</div> で挟む。<div align=center>の代わりに<center>でもよいが非推奨。
        表全体の文字色設定ができなくなる問題は、更に<div align=center>又は<center>の後ろに<span></span>の空タグを
        挟んでおくことによって回避できる。(div タグ挟みの問題と同様)
        <div text-align=center>は似ているが不可。  参照 WDG
        <table style="text-align: left;" align="center"は、 Nvuが書き換えてIEで対応しないので不可。
        右寄せにするには、<div align=right> - - - </right> で挟む。
        左寄せに戻す方法   ソース画面から、テーブル全体のタグ(<table> < /table>)の外側の、
        <div align=center> - - -</div>または<center> - - - </center>を削除する。
        中央寄せした表をコピー・移動する方法  <div align=center> - - -</div>のセットでコピー・移動する必要がある。
         表の上と下を1行空けて、そこに仮に文字を書いておいて、その上下の文字を含めてマウスで選択してCtrl+C。
      2 テーブル全体のタグ(<table> < /table>)を、<div style="text-align: center;"> - - - </div> で挟む方法
         は、IEでは、有効だが、Firefoxでは、Nvuでの表設定が優先されてしまい有効ではない。
         Nvu での中央寄せ設定は、表設定画面のAdvanced設定で設定をすると、Nvuが左寄せにリセットしてしまう。
      3 表を入れ子にして親の表の中にこの表を中央寄せにする方法。
         Nvuでの中央寄せ設定に頼ることになるため、Advanced設定で何かの設定をすると、Nvuが左寄せにリセットして
         しまうので注意が必要。
      4 ソース画面から、<table style="・・・"の後ろに、align="center" を記入する方法もあるが、
         表設定を操作するとNvuが又左寄せに戻してしまう。
      5 画面下のステータスバーに現れる<div>タグを右クリック/
           /Advanced Properties/HTML Attributes/Attribute からalignを選択/Valueからcenter
         選択する方法は、表設定を操作するとNvuが又左寄せに戻してしまう。      
【注意】&文字化け問題:編集を繰り返すとまれに、半角の 「スペース」「&」「<」 の3文字が、
      「&nbsp;」「&amp;」「&lt;」などと、
      &文字に文字化けする場合がたまにある。   (内容にかかわる不具合) (Nvu の問題)(KompoZerでも起きる
      一度おきだすと、同じところが何度も文字化けする。 
      原因は、 &文字の&の直後に改行コードが入った場合に起きる。
      Nvu の設定や使い方、HTMLファイルの設定や内容、PC の状態などによるかもしれない。
      対策: 最後に必ず & を検索してチェックして、修正する、何度も同じ所が文字化けする場合は、
      2度と起きないようにするには(<やスペースを)全角に変える手もある。 参照→改行コードの問題と対策
      一度全角にして安定した後、しばらくたってから、半角に戻すと直る場合もあるが不明。
      但しその際にソース画面で改行コードを削除すると大量の分断化を誘発するので注意が必要。

●タイトルの間違いに注意! 
なぜ問題か: ネット上にアップして、相手のブックマークに、取り込まれた場合、ブックマークの名前は、以後、こちらからは変えることができない。
ページのタイトルは、仮に適当に付けておこおうという安易な考えでアップすると、相手のブックマークに名前が残ってしまうという問題がある。
昔の、Firefoxは、上部に表示するタイトルをブックマークから取ってきたので、古いタイトル名が上部に表示されたままだった。今のFirefoxはそれはないが、ブックマークの名前は残ってしまう。
(ブックマークの名前は利用者が自由に変えられるものなので、こちらから勝手に変える事はできない。)
(記事の内容は、Googleのロボットが毎日のように巡回して取り込んでくれるので、変更しても検索上の、問題はおきない。)
Nvu でのタイトル分断化問題。 KZ では今の所、この問題はおきない。
現象: タイトル内に半角スペースや改行コードが入る場合があった。起き出すと、そのファイルは、時々そうなる。
原因: ソースコードのコードを含めて先頭から半角文字+全角文字が72文字を越すことで生じるためと思われる。
対策: ページ作成後に、必ず、Nvu と IEで、一番上のバーを見てタイトルが正しく表示されているかチェックする。
起きた場合は、テキストエディターで、タイトル部(<title>・・・</title>)を修正する。

【注意】半角ハイフン(-)が沢山続くと、その間に改行コードが入る場合がある。その場合はブラウザでは半角スペースが表示される。
      対策:そのようになったら、ソース画面からではなくて、テキストエディターで最初のハイフンの前に改行コードをいれる。
【注意】Nvu での検索は、通常画面、ソース画面とも Ctrl+F (以後F3キー)でできるが、
      検索しにくい場合は、ブラウザで開いてそちらで検索するとよい。
●【注意】Nvuの別の場所や、ブラウザからテキスト文字をコピーしてきてそのまま、Nvu に貼り付けると、タグも一緒についてくるので、
      表示が異なってくる場合がある。 
      対策:貼り付ける時は、「右クリック/書式を付けずに貼り付け」 (Paste Without Formatting) で貼り付けた方がよい。
      ただし、Nvu の調子で、このPaste Without Formatting ができない場合がある。その時は、Nvuを開きなおせば、できるようになる。
●【注意】選択文字をマウスでつかんでかなり離れた場所に移動させる場合、画面が上下にシフトしてくれない。
      対策: 一旦 Ctrl+X 又は Shift+Del で切り取って画面をシフトしてから、Ctrl+Vで貼り付ける。
●【注意】<IFRAME> タグ(Inline Frameのタグ)を使うとその中に書かれたものは大きく崩される。
 
 


TOP
Nvuの紹介
Nvu の使い方
一般的な使い方と注意
Nvu で始めるスタイルシート
概略編 段組(ボックス)編 修飾編
CSS
応用編
 
     Nvu/KompoZerで始めるHTMLスタイルシート

 
Nvu なら、簡単にスタイルシートを作れる。
概略編

CSS 作成作業の紹介
NvuでCSSの編集をしているところ。
  各ボックスの色、幅、大きさ、などを目で見ながら変えられる。

  Nvu の CSS Editoor で値をインプットすると、瞬時に見ている画面に反映されるので、デザインしやすい。


IE は特殊な動作をするため、IEでチェックしているところ
       
 
 
CSSを使ったデザインの概略


 CSSを使うと、デザインを生かしたきれいなホームページが作れる。ここでは、「Nvuを使ってCSSを簡単に始める」ということを主にして、CSS デザインとしてはあえて幼稚なデザインで例示した。基本は同じなので、いい画像を使えば商用のページのようにデザインできる。以下の、ほとんどの説明は、CSSそのものの説明や注意事項が主である。Nvu自体の使い方は一部であり簡単である。

 

  HP 作りは完全にCSSの時代に移行し、HPは膨大なCSSの塊りと化してきて昔のようにHTMLを見ればデザインがわかるということはなくなった。HTML にはただ文章と最低限のHTMLが書いてあるだけであり、デザインは大量のCSSファイルを解析しなければわからない。特に最近のページは方々にCSSリンクを多重に張るなど非常に複雑化してきて解析も画面の保存も困難になってきている。
 
CSS は多様なHPデザインを自由に行うために各種のブラウザ製作者が草根の根的に作り出したものである。統一しようとして協議会でたくさんの規則や命令を作る のだが利害関係や言語間の問題があって、各ブラウザ毎に仕様が異なり、実際に使う側にとっては試行錯誤のテクニックが必要になってくる。教科書どおりには いかず、CSSデザインは思ったほど楽なものではなくなった。
 
しかし、Nvuは各ブラウザで共通に使える命令のほぼ全てをうまくまとめているため、初心者でも画面を見るだけでCSSをはじめやすい。速度が速く安定し ているため、多数の試行錯誤に耐える。WYSIWYGのためデザインの結果がすぐわかりデザインの発想も進む。Nvuの画面で作れば、最新の多様なデザイ ンのページでも短時間で作れる。Netscapeからの資産をそのまま受け継いだブラウジングも標準的で安定しているのもメリットである。

  このページでは、大量の説明を記したが、ブラウザの動作などに単純な法則はなく、ゲームと同じで、いじっていれば自然とできることであり、

  これらをいちいち覚えている必要はない。しかし自分が使うあたりは知っていると答えを導き出すのが速く、知らないと答えがわかるまで何日も

  かかることがある。

  

  なお、CSS の各種テクニックについては、できるだけいろいろな例を、どのブラウザでも同じ表示になるように示した。詳細については、インターネット上の解説ページなどを参考にするとよい。また、CSSフレームワーク(雛形)や、テンプレート、CSSライブラリー、リセット CSSなどについては、複雑怪奇なCSSの動きに、更にライブラリーの仕様が加わって何がなんだか分からなくなる可能性もあるので、最後の方で使い方や考え方を説明した。
 


  参考 実際のインターネットのページのデザインやソースを見ると参考になる。
★インターネット上のページのCSSとHTML のソースを見る方法。
  (1)ブラウザで「ファイル/名前をつけて保存」でHTMLファイルとして保存する。 ファイル名は英文にする。
    (ファイル名を日本語にするとNvuで正常に開けない。) その後、保存したHTML ファイルをNvuで開いて見る。
  (2)HTMLファイル保存時に「同名のサブホルダー」が作成され、その中にCSSファイルが入っている場合は、
    それをテキストエディターで見る。
  (3)CSS ファイルが多数の階層にリンクされている場合はリンク先の画像や、CSSファイルは保存されないのでCSSファイルの
    中にある画像ファイルのアドレスを調べて、ブラウザに表示させて見る。
  (4)階層が複雑化していて、正しく保存されない場合はWeBoX WeBoX - Software ベクターソフトニュース  窓の杜
    などで保存できる場合がある。
 
 CSS によるデザインの基本は2つある。

  「第1の基本」は、まずボックスという考え方である。 ブログのような画面の「段組」をボックス配置によってデザインすることである。
  ボックスの概念を知らなければ不思議に思うが、やり方は、単純で、<div>タグで挟んだボックスを、入れ子にしたり、並列にしたりする
  だけである。   詳しくは→ スタイルシートで段組を・・
  最初にCSSエディターで、必要な数の 要素 を定義しておく(最初は名前をつけるだけの定義でもよい)。次にHTMLの方で、
  <div>タグで挟んだボックスを自由に配置して、各<div>タグに、各 要素名を割り当てる。
  例1: 多重ボックスの例 <div id="box1"> <div id="box2"> <div id="box3"> <div id="box4"> あいうえお</div> </div> </div> </div> とすれば、
       4つのボックスの中に あいうえお が入る。 
  例2: 上からボックスを並べる例 <div id="box1"> </div><div id="box2"></div><div id="box3"></div><div id="box4"></div>
       とすれば、上から順番に あ う お き の部分がボックス化されて縦に並ぶ。ボックスの間には、 い え か が入る。
  各ボックスのデザインやボックス内の文字のデザインはCSSで定義する。サイズ・色・枠線・背景色・背景図・配置位置などを定義する。
  
  「第2の基本」は、文字修飾という考え方である。文字に対する修飾フォーマットを、あらかじめ、CSSエディターで、要素定義として、
  修飾定義(サイズ・色・枠線・飾りなどの定義)をしておいて、使うときに HTMLの方で、「任意のタグ」に使いたい 要素 を割り当てて、
  そのタグで文字を挟むことによって文字修飾を行う。テーブルのデザインも文字修飾と同じ考え方で各テーブルタグを細かく定義できる。
 
 ボックスの並び方は、全体の幅、各ボックスの幅にしたがって、(左詰の設定の場合)上から順に、次に左から順に並んでいく。
  ボックスの中にボックスを入れ子にすると、そのボックス内で上から順に左から順に並んでいく。
  右に余裕がない場合は下の段に行って左に並ぶ。 そして最後に(clear: bothで)閉じるボックスで閉じることによって全体がひとつにまとまる。

 ボックスを配置して、全体の段組レイアウトができたら、次にそのボックスの中に文章や絵を入れていく。

 注意:CSSを使うと複雑な表現ができるが、凝りすぎると、ブラウザによって表示が異なる場合が多いので、IEや、Firefox で
  必ず表示の確認をする。

 なお、段組みデザインは、Nvu の表作成機能を使っても、同じような段組デザインができる。昔はほとんどテーブルで段組デザインをしていたが
   今はCSSで段組デザインをするようになった。  参考(このページの最後の方)



TOP
Nvuの紹介
Nvu の使い方
一般的な使い方と注意
Nvu で始めるスタイルシート
概略編 段組(ボックス)編 修飾編
CSS
応用編


段組(ボックス)編

段組デザインの方法:BOX配置


内容 1 ボックス単純配置  2 CSSエディターの使い方  3 ボックス要素の定義とタグの記述方法  4 段組デザインの詳細
    5 ボーダーラインを使ったボックスの段組デザイン  6 ボックス定義の注意事項 (まとめ)
    7 Boxの詳細設定項目の意味( CSS文法 )  8 ボックスの縦位置調整
  9 ボックスの応用例  10 3列画面の段組のレイアウト
   11 段組デザインのいろいろ  12 
全ページのボックスの一括変更



はじめに

段組デザイン用のボックスには、基本的に4つの並べ方がある。
  1. 上から下に並べる(一般的)
  2. 横に並べる(フロート指定で横に並ぶ。 並べ終わったらクリヤーで閉じる。)
  3. 入れ子にする。(外ボックスの中に内ボックスを記入する。)
    入れ子にすると内ボックスが外ボックスの中のコンテンツの1つとなる。そのため、外ボックスのコンテンツの上に内ボックスのコンテンツが重なる事はない。
    背景は外ボックスの背景の上に内ボックスの背景が重なる。
  4. 別の所に書いたボックスをコンテンツを含めてある場所に重ねる。(絶対値位置指定absolute指定で重ねる。混乱するので段組にはあまり使わない。特別なとき以外はあまり使わない。)
注意:段組ではボックスの入れ子をよく使うが、Firefox11の要素解析では この図のように重なっているような錯覚になるが決して重なってはいない。

 ボックスの単純配置

段組デザインの詳細は後で説明するとして、最初に、ボックスの単純配置の例を示す。

    ブラウザの中央に幅 500pix のボックスを設けその中に 上段に box-top 、
    中段に box-left と box-right 、下段に box-bottom を配置する
    
    表示例は ここをクリック 
ソース (矢印→以後は説明書き)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"><head><meta content="text/html; charset=Shift_JIS" http-equiv="content-type">
<title>簡単なボックス配置</title><style type="text/css">

body {margin: 0px;}  →(上下左右のマージンがゼロという意味で、上部の隙間を無くすために設定しておく。)
#box-outer {width: 500px;margin-right: auto;margin-left: auto;}   →(外枠を設定。幅 550px。中央寄のためにautoと設定。)
#box-top {background-color: #99ffff;}  →(上段枠を設定。背景色を設定。)
#box-left {float: left;width: 40%;background-color: #33ff33;}  →(中段左枠を幅40%に設定。左詰フロート設定。背景色を設定。)
#box-rigtt {float: left;width: 60%;background-color: #ffff66;}  →(中段右枠を幅60%に設定。左詰フロート設定。背景色を設定。)
#box-bottom {clear: both;background-color: #9999ff;}  →(下段枠を設定。clear: bothでフロートを閉じる。背景色を設定。幅は100%にしてもよい。)

  </style>
</head>
<body>
<div id="box-outer">
<div id="box-top">box-top</div>
<div id="box-left">box-left</div>
<div id="box-right">box-right</div>
<div id="box-bottom">box-botom</div>
</div>
</body></html>

 1 CSS Editor でボックス名を定義する

  最初に、CSS Editorを使ってボックス名を定義する。 
  定義の方法は上のソースを参考にする。

  この段階では、ボックスの詳細定義まで設定しないで、名前だけ設定しておいて、
  後で画面の表示結果を見ながら詳細を定義する。 
  あらかじめ紙の上で、ボックスの配置、ボックス名、などを決めておいた方が作業はしやすい。 
  (注意:多重ボックス構造の場合に、</div>タグと<div>タグの間に 
<br> タグが入るとボックス構造が正しく表示できなくなる。)


 2 メニューバーからボックスを配置する

  テキストエディターでソースコードを直接書いてもいいが、ここでは、Kzの画面からボックスを配置する方法を説明する。  
  
目安となる文字列を書き、その文字列を選択して、メニューバーから<div>ボックスを選ぶ。これを繰り返して必要な数だけ作る
。 

ボックスの配置が終わったら、
 Insert/HTML でソースコードを表示させて</div>タグと<div>タグの間の<br>タグを削除する。

 
 説明
  1 通常画面で、メニューバーの左選択ボックスから、「 General Container <div> 」を選んで、 <div> タグのボックス(親)を作る。
    KompoZerでは、赤の点線で枠が示されるのでわかりやすい。
  2 そのボックス内でにそのボックスのコメントを書いておく。(後で混乱しないためである。)
上の図の例では、box-outerとコメントを書いた。
  3 ボックス内で何行か改行してボックスの縦長さを広げる。
  4 その中に子のボックスを作成したい場合は、1と同様にして、  <div> タグのボックスを作り、コメントを書いておく。
    
上の図の例では、4つ縦に並べて作成して、box-top box-left box-right  box-bottom とコメントを書いた。
  5 次にCSSエディターで、ID要素名を定義する。(ID要素は1ファイルに1回しか使えない。何回も使うときは Class要素名にする。)
    
CSSエディターの使い方は次項に記す。
  6 次に、1〜4で作成した、ボックスの中にカーソルを置いて、画面下のステータスバーから<div>タグを右クリックして、
    表示されるリストのID又は、Classの一覧から、5で定義した要素を選んで、
<div>タグに要素名を割り付ける
  7 
注意:最後に不要な<br>タグを削除する。削除方法は、一番外側のボックにカーソルを置いて、ステータスバーから
      
<div>タグを選択して全体を選んで、Alt+[ I→H ] キー又は、Insert/HTMLを押してその部分のソースコード画面を開く、
      その中で、不要な<div>タグを見つけて削除する。 
理由:<div>の後に<br>があるとエラーを起こすため。
      
(<br>タグは3でボックス幅を広げる時に入るので、後でこれを削除する必要がある。)

3 HTML ソースでボックスを配置する方法
  CSS で定義したボックスを配置するためには、上述のツールバーから作る方法以外にも、
  ソースに直接「divタグ」を記入する方法がある。
  (Source 画面で修正するのは日本語の場合改行問題がおきる場合があるので望ましくない。)
  記入したい場所にカーソルを置いて、
HTMLインサート画面(Insert/Html)または、(Alt+I+H) から入れる。
  文章が入っていない初期の段階では、Source画面からでも問題はない。

  divタグの記入方法:
  <div></div><div><div></div></div>などと記入する。
  
  ボックスの要素名を割り付け方法:
  このdivタグで作ったボックスに、ボックスの要素名を割り付けるには、
  ステータスバーから前述と同様に割り付ける


4 後でボックスを追加する方法
  追加したい直前のボックスにカーソルを置いて、下のステータスバーに表示される、ボックス名をクリックして選んでおいてから、
  (Insert/Html)または、(Alt+I+H) で、HTMLインサート画面を出して、その最後の</div>の後に、適当な文字列を記入しInsertする。
  すると、ボックスの後に、文字列が表示されるので、その文字列にカーソルを置いて、下のステータスバーに表示される<div>タグを
   右クリックして、ID またはClass から 要素名を割り付ける。 



2 CSS Editorの使い方

  1. Tools/CSS Editorで「CSS Editor」を開く。アイコンでも開く。
 
Nvu の場合 (K/Zでは不要)
  1. CSS Editor は横に長いので、右下の「Close」が見えるまで横に延ばす。(指定しているファイル名が長いとCSS Editor が横に長くなる。 左下の Expert mode にチェックしてあることを確認。 
  2. Style elt ボタンを押して出た画面で、
  3. (1) Media list = 無記入とし、
  4. (2) Title  = 無記入とし、 Create Stylesheetボタンを押す。 (参考:CSS の参照方法 )
  5. 次の画面で Media list はデフォルトのallになっている。      
  6. ここで、disabled のチェックを外して保存有効にする。 (disable はデフォルトで保存無効になっている場合がある)
  7. 次に Rule ボタンを押して、「style applied to all elements of type (enter type below)」にチェックをする。
 
 
K/Z の場合 (Nvuでは不要)
  1. 「custom style rule 」にチェックをする。(慣れたらその上のチェックを使うと少し楽ができる。)
  1. ボックス名(element名) を#eebox または eebox などとインプットして Create Style rule ボタンを押す。
    自分で定義した名前の場合は、頭に又はをつける。(HTMLの規定のタグを使う場合は#や.は不要)
    を付けた名前はID要素といい一回しか使えないので場所が特定できる。を付けた名前はクラス要素といい何回でも使える。)
  2. 次にパレットアイコン(NvuではRuleボタン)を押して、繰り返して必要な個数のボックスを作る。
    (例えば、ブラウザのウィンドウ全体のボックス:eebox1、その中に入れ子にする有効全体ボックス:eebox2、
    さらに有効全体ボックスの中に入れ子にするボックス:eebox3、eebox4、eebox5、eebox6、などを作る)
  3. ボックス作成と同時に詳細設定をしてもいいが、(設定しながら画面で連動して見て確認したいので)
    この段階では、ボックス名だけ作って、後で、画面を見ながらボックスの詳細設定を決めていくことにする。
  4. CSSエディターの設定を終わったら、K/Zの場合絶対に Close ボタンや X 印を押してはならない。(K/Zの問題
    これを押すと、ファイルを開いた時点までさかのぼって削除される。閲覧だけした場合でも必ず OK を押して抜ける。
  5. Nvu の場合は、抜けたままでは、本文を修整しない限り、保存ボタンを押しても保存はできない。Nvu の問題)(K/Zでは改善)
    対策: CSSエディターを抜けたら、必ず一字でも書着替えて保存する。 
  6. CSS設定はいつでも外部リンクにすることができる。(今回は全て設定し終わった後で外部リンクすることにする。)
    注意1:一般的には外部リンクとする
    注意2:作られた外部 CSSファイルの1行目に、Mozilla又はKompoZerの出所コメント行が入る。
    不要なら1行目を削除してもよいが、CSSエディターで修正すると、再度出所コメントが入るので意味がない。
    (CSSファイルの中にコメント書くと、全て削除されるので書くことはできない。)
  7. CSS 設定の外部リンクの方法は、CSS Editor の左画面で一番上の「internal stylesheet」を選択してから、
    右画面の Export・・ ボタンを押して、拡張子 .css のファイル名でエキスポート(の予約を)する。
    注意1Nvuの場合は、外部リンクに Exportするボタンを押してCSSを抜けた後、保存ボタンが灰色になって、
     保存された状態に見えるが、実際は何も保存していない。
     そのままNvuを閉じると、それまでの修正内容がすべて消えてしまう。  (Nvu の問題)(K/Zでは改善)
     対策: CSS エディターを抜けたら、必ず一字でも書着替えて必ず保存する。 
     KompoZerでは外部リンクボタンを押した瞬間に保存される。
    注意2Nvuの場合は、 Link アドレスは、(相対指定ができず) PC 内のフォルダー指定になってしまうので、
     後で、ソース画面で href="xxxx.css"などと修正する必要がある。  (Nvu の問題)(KompoZerでは改善)
    注意3K/Zの場合は、CSSの設定が消えたり、別のものになったりする場合があるようなら、その都度CSSエディターを閉じて
      開きなおした方がよい。(K/Zの問題
  8. 外部に作られたCSSファイルの中身は、各定義の頭にインデントとしてスペースが2〜4個入る。
  9. 内部定義に戻すには、 Source画面で、 <link rel="stylesheet" href="xxxx.css" type="text/css">を削除し、
    <header></header>内に<style type="text/css">  </style>タグを設けてその中に貼り付ける。
  10. すでにある外部CSSファイルを Link するには、
    (1) K/Zの場合は▼ボタンでLink(Nvu の場合はLink eltボタン)を押して、Choose File ボタンで、HDDの中のCSSファイルを選択するか、ネット上のURLを記入し、(Alternateには通常はチェックしない)
    (2) Media listは無記入とし(デフォルトでallとなる) 
    (3) Titleは無記入とし、(通常はタイトルはつけない)
    (4) Create Stylesheet ボタンを押した後、 Disabledにチェックが入っていたらチェックを外す。
    Link 後は内部設定と同じ要領で CSS 定義の編集ができる。
  11. 注意:外部リンクにした場合、保存ボタンを押さなくても、CSSエディターで修正後、OKでエディターから抜ける度に、
    外部CSSファイルが逐次更新されてしまい、Ctrl+Zで元に戻すことができない
    必要に応じて、元のCSSファイルのバックアップをとっておくとよい。 
    なお当然のことだが、外部リンクのCSSファイルを他のページで共有している場合は、1つのHTMLファイル側でCSSファイルを変更修正したら、
    他のHTMLファイでの表示も確認した方がよい。
  12. Nvuの場合は、 CSSエディターで「General 」のタブを見ると、関係ない(設定してもいない)単語
    : value, source, physical などの単語が表示されるが、特に考える必要はないので間違わないように注意する。
  13. K/Zの場合は、「 General 」に直接記入でき、ここからコピーもできるが、General で書き換えると誤動作を起こす可能性があるので、General を書き換えたらすぐにCSSエディターをOKで閉じて開きなおして確認した方がよい。(K/Zの問題

 
 ボックス要素の定義とタグの記述方法 

ボックス設定と修飾
--- 要素定義とタグの記述 ---
  id (identity) =固有識別要素(同じidは1ページ当たり1回しか使えない)
  class =クラス要素
  名前のつけ方=
id名の頭に#、class名の頭に.以下小文字の英語と - を使う。( _ や大文字や数字も使えるがやや少数。)参照
用途 要素の定義方法 タグの記述方法
ボックス設定 ユーザーが名前をつけた固有識別要素を使う場合。(id 要素定義)
 1回しか使えない。
 #xxxx  
<div id="xxxx ">  </div>
ユーザーが名前をつけたクラス要素を使う場合。(class 要素定義)
 何回でも使える。
 .xxxx  
<div class="xxxx ">  </div>
HTML要素を使う場合。(HTML 要素定義)
 例: xxxx   
<body>   </body>
修飾
(概略)


ユーザーが名前をつけたクラス要素を使う場合。(class 要素定義)
 .xxxx  
   (IEでの表示チェックが必要)
 class 要素を文字単位の修飾(spanタグを使うインライン修飾)に
 使うのは望ましくない。
<div class="xxxx ">
  </div> 行単位の修飾
<span class="xxxx ">
  </span> 文字単位の修飾
<p class="xxxx ">
  </p> タグ単位の修飾
HTML 要素を使う場合。HTML要素定義)
 xxxx  例:p, h1・・・ h6, #footer p(#footer 内の p)
    
body, a, table, td,  th, など。
<p>   </p>
<h1>  </h1>

<td>  </td>
名前 一般に使われている名前で誰でもわかる用途を表す名前をつける。
global base window base-window box pane outer inner back back-window wrapper wrap container
main main-box guide-box index addition information advertising  content  contents
top header headline  heading  title  menu link main left  right center colmun spacer panel
sidebar side footer  bottom area  block  frame layout layer nav navigation banner
module caption  division  unit leaflet  row index  list  page  source form border
document text description  note section chapter  comment  summary topic
holder  format  large  big  small  mid  tiny   clear
item  button  label  tabs  thumb  cast  marker  reference  bookmark arrow  ico
info  view latest logo  support  hiddenform  date  map  sizer line  group  
event  new  total  join  build  find  plan  call  updates
home  issues  signup  float   feature rounded  feed   short secondary  outlined 
video mobile  slideshow  entry  separator  attention  reset  model   access
 

 段組デザインの詳細

 段組デザインの例1

  趣旨
  ブラウザのウィンドウ全体の back-window の中に、中央に移動する container-window を入れ子にして、
  その中に、上段に header 、中段に left と right を横にフロート状態で並べ、その下で
フロート状態を clear ボックスで閉じ、
  下段に footer を設ける。
  結果の表示 実際の表示はここをクリック (ソースは実際の表示画面からソースを表示させれば見られる。)
  

  (各ボックスは、中に文字や画像を入れれば下に伸びていく。 


  Kzで作業の途中の状態
    作り方は上の「ボックスの単純配置」の方法と同様
  
  各ボックスにわかりやすいようにボックスを現す文字列を入れておいて作成し、
  最後に、ブラウザには表示させないボックス、back-window、container-window、clear のボックスから文字列を削除する。
  文字列以外にも<br>タグが入っている場合はそれも削除しないと、表示されてしまう。

  ソース
<style type="text/css">
body {margin: 0px;}
#top-space {}
#back-window {text-align: center;background-color: #ccffff;}
#container-window {margin-right: auto;margin-left: auto;
text-align: left;width: 600px;}
#hedder {background-color: #6633ff;width: 600px;}
#left {float: left;background-color: #33cc00;width: 150px;}
#right {float: left;background-color: white;width: 450px;}
#clear {clear: both;}
#footer {background-color: #e1e1e1;width: 600px;}
#bottom-space {}
</style></head>
<body>
<div id="top-space">top-space</div>
<div id="back-window">
<div id="container-window">
<div id="hedder">hedder</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="clear"></div>
<div id="footer">footer</div>
</div></div>
<div id="bottom-space">bottom-space</div>
</body></html>
  

制作上の要点

 1 back-window  のTextで IE で中のボックスを中央寄せに表示させるために Text: Aalignment=centerとし(URL有りDTDでは不要)、 
   Background でcolorを設定。(その瞬間に後ろのNvuが濃い緑になるのを確認)

 2 container-window  のBox項目で width: 600px とし、  中央寄せする為にMarginsを  Left:auto  Right:auto とする。
   このボックスの中に入るボックスの中の文字は、上の設定で全て中央寄りになっているので、
   再度、左寄せに戻すために、
Text で Text: Aalignment=left と設定。
 3 hedder  のBackground を設定し、 Box項目で width: 600px とする。(高さを決めるために height: 60px などとしてもよい。) 
 4 left のBackground を設定し、  Box項目で横に並べるために float: left width: 140px  とする。
 5 right のBackground を設定し、 Box項目で横に並べるために float: right width: 450px   とする。
   横にボックスがたくさん続くと、だらだら左から右に続いていき、行き着いたら下に折り返す。
   注意: float を使う場合、1行に並ぶ全ボックスの合計の横幅を一杯にすると横に行かずに下にずれることがある。
       何かの状況(IE6 で印刷時など)で発生するので、その場合は、
       1px分、%指定なら1pxに相当する分(例えば0.4%など小数点以下まで)少なくしておく。

 6 clear で float状態 をリセットするために、Box項目で Clear: both と設定。これをしないと、次のボックスが乱れる。
 7 footer のBackground を設定し、 Box項目で width: 600px とする。
 8 この例では、上下に top-space と bottom-space を設けて隙間を空けてみた。
 
 ■■■ 中央移動の背景切れ : 問題と対策 ■■■

段組の中央枠がブラウザの幅に応じて中央移動するものが一般的に多い。外側ボックスに背景がなければ問題がないが、外側ボックスに背景を張る場合もよくある。
その場合一番先に問題となるのが、外側ボックスの背景切れの問題である。
外側ボックス(上の例では back -window )のボックスに背景色又は背景画像を付けた場合、移動する中のボックスを背景無し(透明)にしておくと、ブラウザの幅を狭くして隠れた部分を横にスクロールして見た場合に、外側ボックスの背景の右側が切れてしまい非常に具合が悪い。
上の例で hedder と right のボックスの背景を無しにしたのが これ である。 hedder と right の後ろで外側ボックスの水色の背景が切れる。
それを解決する方法が3つわかった。
  1.  移動する中の全てのボックス(上の場合は hedder、left、right、footer 、container-window )に、何らかの(例えば白でもよい)背景を張る。
    (ただし上の例のように、外側の背景ボックスの上下に移動しないボックス top-space bottom-space を設けた場合は、上下のボックスには背景無し又は白にしないとずれが見えてしまうので注意する。)
  2. 外側の背景ボックスには背景をつけないで無色にする。無色なら、切れても見えないので問題がない。例→ニュースやポータルサイト
    上の例では水色の背景をつけているので、ずれが見えてくる。
  3. 外側の背景ボックスはやめて<body>に背景を張る。
    この場合は、ボックスに関係なくページ全体に背景が張り付くことになるので用途が限られる。
    (この場合も外側の背景ボックスの上下に移動しないボックスを設けて、それに背景を張ると似たような不具合が生じるので注意。)

段組デザインができたら、各ボックスに文字を記入する。
 ・まず、上の段組の状態で文字を記入してみる。
 ・文字を消す時に、空白ボックスでbackSpace を押すと、必要なボックスも消えてしまうので注意する。

  文字を記入した例 →  
  


説明
 本文が縦に伸びると、緑のメニューの下側に水色の隙間ができる。この例の場合、中央の全体のボックス(container-window)に、
 背景を張ってないので、その外側の背景ボックス(back-window) の水色の背景が出てきて見栄えが悪くなっている。
 これを解消するには、中央の全体のボックス(container-window)に、適当な色(この場合は緑がいい)の背景を張ればよい。
 背景を張らないページでは、このような心配はしなくてもよい。

 




ボーダーラインを使ったボックスの段組デザイン

 
ボックスの段組にボーダーラインを設定した例を示す。
ボーダーラインを設定する場合はいろいろと工夫が必要。ブラウザ(Firefox, IE5, IE6, IE7, IE8 ・・・)やOSなどの状況によって表示が異なる場合があって、組み合わせ方によっては難しくなる場合がある。
  
  下の左の図は、divタグだけを配置している図。
  多重ボックスは入れ子にしておく。Konpzerで左上の窓からdivタグを割り付けると<br>タグが付加されるので、
  作成後、テキストエディターで<br>タグを削除する。(ボックスにしたい行に適当にコメントを記入し、これを左上の窓でdivタグ化した。)
  Konpzerではdivボックスが赤の点線で示されるが、多重ボックスかどうかは、見ただけではわからない。(下のタスクバーをクリックすればわかる。)
  ボックスの構造をわかりやすくするために、別途紙などに書いて計画的にデザインするとわかりやすい。
   
  下の右の図は、Konpzerで各divタグにCSS定義をしている図。    

       
 
 下の図は、各divボックスに、CSS定義を割り当てて、修正して、最終的な形になった図。 
 → 例1(ソースはブラウザの表示>ソースで見る。) 左右欄の背景の下が白くなる。IE6で左右欄の<p>タグ文字の下のマージン部分が空かない。
 → 例2(ソースはブラウザの表示>ソースで見る。) 上の不具合を解決。
    背景は left-border, right-borderで設定し、 left-inner, right-inner でのwidth設定をやめた。
    なぜ子ボックスのleft-inner, right-inner でwidth設定をするとだめになるのかわからないが、結果的に解決した。
    どうしても子ボックスでwidth設定をしたい場合は、後述 のように最下行の下に高さ (height)1px の空ボックスを置く(0pxだとダメだった。)
    但し、font-sizeを数pxと小さくしてline-height 0%など小さい値にしておかないとIEでは、下に隙間が開いてしまう。
 
 1 一番上のtopの欄は画像などを貼り付けることを考えてborder無しとした。footerの欄もborder無しとした。
  
 2 右欄には左borderが設定して無いので、右欄の中の文の行数は、左欄の文の行数より長くならないようにして使う。
 
 3 右欄や左欄のボックスに単にパディング設定をすると、段組が崩れる。(崩れ方はIEとFirefoxで異なる。)(原因はwidth+ paddingなどによる。)
   そのためpadding分だけwidthの設定量を小さくする必要がある。(但し更に内側に子ボックスを設けてそこでパディング設定するか、
   文字に振るpタグなどの段落系のタグを使ってそのタグにパディング設定をする場合は、Widthを変える必要はない。)
   → 内側の子ボックスでパディング設定した例 

 4 left-inner, right-innerのボックスは無くてもいいように思えるが、組み合わせ状況によっては、left-inner, right-innerボックスでwidthを設定しないと
   IE6で段組が崩れてしまう場合があった。状況によって設定する。

 5 少し複雑にすると、FirefoxとIEの表示の差が生じやすくなる。表示をみながら試行錯誤での調整が必要である。
 
 6 各ボックスには、上位ボックス(親ボックスなど)の設定でもよいが、font-sizeやline-heightなどの設定が効いていないと崩れる場合があった。
   そのため、最上位のボックスに基本的なfont-sizeやline-heightを設定しておくとよい。この例では合えて何も設定してない。
 
 別の例
 下の図は、左右のボックスの境に隙間を空けた例。
 隙間を空けるために、右列のボックスに左マージン margin-left: 10px; を設定して width+marginで550pxとした。
 (左マージンを設定せずに、width=550pxとして、中のボックに左マージン margin-left: 10px; を設定してもよい。)
   実際のページ例は下↓をクリック (コードはブラウザのソースで見る) 
    → 実際のページ例はこちら(ソースはブラウザの表示>ソースで見られる。)

  参考 無料サイトの 「無料Yahoo Geocitiesの広告バナー」との関係
  • 無料Yahoo Geocitiesの広告バナーが、「文字バナー」になると、Firefoxでは、バナーの下とHPの最上部との間に隙間が空くことがある。IEでは隙間は空かない。
  • 対策=最上部に隙間が出来ても問題ないようなデザインにしておく。(スペーサーボックスを入れるなど。)
      
 
  
 CSS メニューを付けた例
  下の図は、後述のCSSメニューをつけた例である。(テスト1、テスト2の所にマウスをもって行くと色が変わってクリックでリンク先に飛ぶ。)
  → 実際のページ例はこちら(ソースはブラウザの表示>ソースで見られる。) 
 
 
 



ボックス定義の注意事項 (まとめ)

 
●  id 要素で定義したボックスは1回しか使えない。同じ仕様のボックスを何箇所にも使う場合は、クラス定義を使う。
●  DTDは、「TransitionalのURL有り」にする。(センタリングの問題を解消するため。IE,Firefoxの違いのため。)
● 全体幅と背景
  全体幅=Width+Margin+Border+Padding  となる。 → 実際例  参考:WEB作成の豆知識
        最内側の文字を書けるエリアがwidthとなり、その外側周囲がpadingの透明エリアとなり、さらにその外側周囲がborderエリアとなり、
        更にその外側周囲がmarginの透明エリアとなる。
        背景は、最内側のwidthのエリアとその外側周囲のpadingのエリアに張り付く。
     このため、ボックスを入れ子にするときは、注意が必要。
  IE5の問題(昔の話し)IE5では、全体幅=Width+ Margin となり、Widthの中にborder+paddingを含めた場合があったらしい。
● 一番外側のボックスの Margin 設定は、ユーザー定義のボックスでは、 margin: 0px が効かない。
  対策: HTML規定のタグ <body>を使って Marginを全て0px に設定する。
●  float を使った場合は、フローティング状態を閉じるために、その下に閉じるボックスを設けて
   「 Clear =both  」とする)
   Clear=bothで閉じないと、以後の各ボックスの配置全体の表示がおかしくなる。
   何も書くことがない場合でも、ダミーの閉じる空ボックスを置いて必ず閉じる。
   ダミー用の「Clear =both に設定した空ボックス」は、Nvuでは表示されるが、ブラウザでは表示されないので問題ない。
   (イメージの右側や左側に文章を回りこませた場合も、フローティング状態になるので、それらが入っているボックス内で、それらの後ろに
   ボックスを設定している場合には、フローティング状態が継続して作用するので同様の注意が必要。)
   大きな問題ではないが、このボックスがあると、Nvuで表示した時に、縦に隙間が開くことがある。(ブラウザで見るときは関係ない)
   どうしてもこれを防きたい場合は、次に<div></div>タグをおくとよい。
● ボックス内に更にボックスを中央寄せで入れ子にする場合は、子BoxでLeft=auto Right=autoとする。
   autoは入力枠に直接打ち込む。(KZでは選択肢有り)
   (中央寄せのできないDTD設定をしている場合には、親Boxでtext- align=centerとしておき親Box で中央寄せ指定にする。
   その場合は、子・孫ボックス内の文字も、中央寄せになるので、子の方でtext -align=leftに設定しなおす。)
● ボックスの背景に画像を張る場合、「縦横に連続してタイルを張るかどうか」は、 background のTile 項目で設定できる。
 Nvu KZでボックス間に隙間を空ける方法。2つのボックス間がつながった場合に、その間を空けて何かを書きたいときには、
  ステータスバーの<div>タグを選択して、
ソース画面又は「Insert HTML」画面を開いて、前のタグの後ろに適当な文字を書き込めば、
  間にその文字が入って隙間が空くので、そこに書きこむことができる。

 全体の横幅(width) 昔のポータルサイトでは750pxくらいだったものが2008年ころから
   950px〜1000pxくらいのものが増えてきた。1000pxを越えるものは少ないようだ。
   19インチのディスプレイだと1200px以上になると全部見るには横スライドが必要になる。
●  CSSはブラウザによって予想外の表示になる場合があるので、必ずIE で、できれば印刷プレビューまでチェックする必要がある。



------ 以下は見ない方がいい。 見ると頭が痛くなる。 おかしな事が起きて解決できないときに参考にすればよい。 -----------------
      CSSとブラウザ(バージョン毎に違う)とが組み合わさった挙動は、原因や対策が複雑で、すべて頭に入れる事は不可能である。

● ボックスの下にボックスがある場合、上のボックスの下ボーダーに、1pxを設定した場合は(IE,Firefox,では表示されていても)
  Nvuでは表示されない場合があるので注意する。(Nvuの問題KZでは未確認)
  対策: CSS設定を見て確認する。その後必ずブラウザで確認する。
  なお、下のボックスの上ボーダーを設定した場合は表示される。
● ボックス幅のずれ問題
  ボックスに左右の Magin(外側の間隔)やPaddings (内側の余白)を設定したり、border(1px の線など)を使う場合は、
  「ブラウザの種類」や「ボックスの構成」や「その他の状況」によってボックス幅の表示が異なる場合がある。
  そのため、単純にデザインしても、IEFirefoxでは必ずしも同じにならない場合がある。
● ボックス幅のずれ対策(多重ボックス)
  このような問題の対策として多重ボックス(入れ子ボックス)を使う方法がある。
  例えば、width, marginのボックスの中にborder, paddingのボックスを入れてみるとか、
  更には、
width, margin, border, paddingの設定はそれぞれ多重ボックスにしてみる。 
● ボックス幅のずれ問題の例  次のようなものがある。
  1. Border の場合は特に注意が必要で、複雑である。
    1. 横並びボックス無し(float無し)の場合、1つのボックスで、Borderとボックス幅を両方設定した場合は、ブラウザで表示が異なる場合。
      対策: 2重ボックスにして、外ボックスで Width を指定し、内ボックスで、Borderや背景を設定して、その中に文章を書く。
    2. 横並びボックス有り(float 有り)の場合で、横並びボックスが入る親ボックスに縦のボーダーラインがある場合は、IE6の場合、親ボックスの縦ボーダーが一部消える場合がある。
      対策としては、外側ボックスを3重ボックスにして、第1ボックスでwidth設定、第2ボックスで、Borderや背景を設定、第3ボックスで外側ボックスの取りしろ合計を引いた値以下で、中に入る横並びボックスの合計以上のWidth を設定してその中に、横並びボックスを配置する。 (Widthが無指定だと、その段の付近で縦ボーダーラインが消える。)→「ボックスの縦ボーダーライン消え」参照)
    3. 注意 Firefox の場合は、全体幅からBorderの幅分が外に飛び出す。
    4. 注意 IEの場合は「中ボックスのwidth 」が「外ボックスのwidth -(border+padding) 」より大きいと外ボックスを広げてしまう。
    5. 親ボックスでwidthを設定し、子ボックスでborderを設定するのが安全。但し、子ボックスの中の孫ボックスでwidth設定はしない方がよい。理由はわからないが、結果的にうまくいく場合がある。→上の実例を参照。
  2. Paddingの場合も、(Firefoxの場合は)全体幅からPaddingの幅分が外に飛び出すという問題がある。
    対策としては2重ボックスにして、外側のボックスで Width を指定し、内側ボックスでは Width は設定しないで、Margins やPaddingsを設定するとよい。
  3. Borderや背景を使い、更にMargins やPaddingsを設定したい場合は、上の1,2を組み合わせるとよい。
    親ボックスで全体幅Width を指定し、その内側の子ボックスでは幅指定をしないで、背景やBorderを定義すれば、親ボックス幅の中にボーダー幅が入る。
    次に、子ボックスの内側に孫ボックスを作って、孫ボックスでWidth 指定をして、更にその中にひ孫ボックスを作って、ひ孫ボックスの方でMarginやPaddingを設定して文章を入れるとよい。
  4. 内側のWidth 指定をしない場合は孫ボックスは省略してもよいし、問題の起こらない範囲で一部兼用してもよい。
  5. 最終手段 Firefox, にしてもIEにしても、細かい設定になると、必ずしも思ったようには表示されない。
    そのような場合には、多重ボックスの間に、Width 指定のあるボックスWidth 指定のないボックスや、高さheight= 1px、line height=0%のボックスを 挟むとうまく行く場合がある。
    ブラウザの挙動は単純に考えたようにはいかないので、適宜いろいろ変えてIE,Firefoxで試す必要がある。
● ボックスを左floatに設定している場合、左 marginを設定すると、その分全体的に右にずれる。
   ボックスを右floatに設定している場合、右 marginを設定すると、その分全体的に左にずれる。 
● float を使う場合、1行に並ぶ全ボックスの合計の横幅を一杯にすると全体のボックスが縦に伸びることがある。
   どうしてもうまく行かないときの最後の手段として1px分、少なくするという対策もある。
● ボックス定義の中のPosition 設定は、通常はunspecifiedでよい。移動原点を利用したい時にPosition=relativeとする。参考
●  テスト時のオーバーフロー問題:よくあるトラブルであるが、できたボックスの中にローマ字をたくさん続けて書いてテストをすると、
  文字がボックス外にオーバーフローする事がある。これは、CSSの間違いではなく、HTMLの英文処理の仕様である。
  英文は、所々にスペースが入らないと折り返すことができない。
  aaaaaaaaaaaaaaaaaaaaaaaaaとせず、aaaaa aaaaaaaa aa aaaaとスペースで切って書けば折り返す。カンマ , やピリオド . だけでは
  切れないのでその後に必ずスペースを入れる。日本語の場合はどう打ち込んでも折り返す。
● 空ボックス非表示の問題:配置したボックスの中に、文字などが書いてないか、書いてあっても半角スペースだけの場合は、
  ボックス自体が表示されない。逆にボックスを非表示にしたいと思って空ボックスにしてもブラウザによっては表示されてしまう。
● ボックスの背景に画像を張る場合、相対指定ができず、PC内のフォルダー指定になってしまう。Nvuの問題KompoZerでは改善
  ソース画面で background-image: url(xxxxx.jpg); などと修正する必要がある。  
● ボックスの背景に画像を張る場合、「背景画像を固定する(スクロールさせない)」設定は、IE6ではbody> 要素に対してしか
  使えない。
● CSS 定義をxxxx.cssファイルとしてLinkさせる場合、Link アドレスが(相対指定ができず)PC内のフォルダー指定になってしまうので、
  ソース画面で href="xxxx.css" などと修正する必要がある。 Nvuの問題KompoZerでは改善
● ボックスの高さが小さいホームページ(例えば文字が10行くらいページ)の場合は、背景を張っていると、ボックスの下が白くなってしまう。
   ボックスの底辺をウィンドウの下まで伸ばすには、底辺部に空白行(<br>タグ)を伸ばす分だけ入れる。
● ボックスの中の文字を消すときに、消しすぎると、前後のボックスが内容ごと消えてしまう。直後ならCtrl+Zで復活できるが
   後で気がつくと復活できなくなる。  (時々、バックアップで保存しておいた方がよい。)
●  Nvuの表示がおかしくなったらNvuを一旦保存して閉じて開きなおすとよい。  
 -----印刷の問題-----
●  印刷プレビューで見た場合、IE では、横幅の合計がぴったりだと右端のボックスがずれる場合がある
  その場合は、合計を 1px 少なくするとずれない場合がある。普通はずれないが、印刷プレビューでチェックしておいた方がよい。
● 印刷プレビューで見た場合、Firefox では、ページの下まで一番外側のボックスの色で満たされてしまう。
  それでもいいとするか、一番外側のボックスの色を白にして、わからなくするか決める。
● 文字サイズを生の%やemで指定した場合にIEで印刷すると文字サイズが拡大する場合がある。 
● IEで文字のサイズを拡大すると、印刷サイズが変わる場合がある。
● Firefoxで、「用紙に合わせて印刷」するモードで印刷すると、Firefoxが横幅だけ見て縮小率を決める。
● 固定幅がだいたい 700pxくらいを超えると、A4サイズで印刷した時に右端がはみ出す。
   B4サイズだと、だいたい900px くらいを超えるとはみ出す。
● 横幅を固定しない場合は、印刷サイズに合わせて文字が折り返す。
 
  


Box の設定の補足

ボックスの並びは Float= left Float=right Float=unspecified の3種類あり、それによって、左詰、右詰、次の行となる。
Box の Margin とは Box の上下左右の各辺の位置のシフト量のことで、親ボックスの枠から、自分のボックスの外枠までの距離。
Box の Padding とは Box の内側の上下左右の余白のこと。 参考1 参考2 参考3 参考4 参考5 参考6 

ブラウザのデフォルトサイズは、16px( = 12pt )である。
medium サイズは16px 相当で、xx- small, x-small, small, medium, large, x-large, xx-largeの順に、1.2倍づつ大きくなる。

1em のサイズは、文字サイズの場合、親ボックスで決められた基準サイズを1emとして表す単位。0.875emなどとして使う。100%のサイズも同様。但し、ボックスやボーダー関係の長さの 1em は、自分のボックスで決まった文字サイズを 1em として表し、親ボックの文字サイズではないことに注意。
多重ボックスで何回も基準変えをするとその度にIEとFirefoxの誤差が生じるので基準変えの回数は少ないほうがいい。
 
pxやptでもいいが、テキストズームをしやすくするために em を使う方法もある。
em は最終的には px に換算されてモニターに表示される。em の小数点以下の数字は IE と Firefox では換算ずれが生じる。ずれはボックス毎、改行の度に累積される。両方のブラウザで確認しながら少数以下の数字を調整すると少なくできる場合もある。
例: 16px = 1em  15px = 0.94em  14px = 0.88em  13px = 0.82/15px = 1em  14px = 0.94em  13px = 0.87em/14px = 1em  13px = 0.93em
 
 
 
 
ボックスの縦位置調整

  • ブラウザで確認しながら書いていけば何とかなるのかもしれないが、縦位置を計画的に正確に出そうとすると、その法則は FirefoxとIEの違いもあって非常に難解である。
  • margin, padding, border だけはなく、ブラウザによっては、line-heightも関係する場合があり、状況によっては、font-size も関係するのでそれぞれ値を変えてIE、Firefoxの両方で確認する必要がある。(また空ボックスか文字有りボックスかによっても違う場合もある。)
  • 縦位置のデザインをする上で、ブラウザ毎に異なる多数の入り組んだ法則を考えながらデザインするのは至難の業である。あらかじめ各場合分けで現象 を整理して、問題の無いパターンを決めておきそのパターンの範囲内で使用するとよい。しかしそれでも数多くのことを考慮し各ブラウザで確認する必要があ る。
  
◆ <p>タグの空白行問題−その1

1 ブラウザはソースコードで <p></p> となるものを、「無し」とみなして表示しないという問題がある。
問題は、Nvu 上では<p></p>を空白行として表示されることである。
(Nvuとしては、文字をかいてくれるのか、何も書かずにEnterをおすのかが分からないので改行表示して文字の入力を待つというようにせざるを得ないのでNvuが悪いわけではない。)

2 どういう場合に、 <p></p> ということになるのか?
具体的には改行キーを2回押せば <p></p> となってNvu上は空白行が入って見える。しかし、これは上述のようにブラウザでは表示されない。

3 文章に空白行を入れるにはどうしたらいいか?

  スペースを打ち込めばよい。

4 問題

  空白行にスペースが打ち込んであるかどうかはNvu上では見えないので、自分の記憶だけが頼りとなる。又はマウスでドラッグすれば黒くなる。

対策1: <p>タグ文章では必ず空白行にスペースを打ち込む習慣にする。 スペースがあれば、ブラウザは1行分空けて表示する。

対策2: 空白行にスペースを打ち込んだかどうか自信がない場合は、ソースコードに <p>< /p> があるかどうか検索する手もある。

      ただし検索する場合は、間に改行コードあるものも検索する必要がある。

 

 <p>タグの空白行問題−その2

1 ブラウザはソースコードで<p>の次に「スベースや文字」が来てその次に<br>の次にすぐに続いて</p>がくる場合の<br>は改行しないという問題である。つまり<br>はなかったと同じである。この現象は例えば、Nvu で、Pタグで記述していて、Shift+Enteを押したとき、ソースに<br> が入り、表示上改行されることである。
(Nvuとしては、<br>の次に人間が文字を書いてくれるのかどうかが分からないので改行表示して文字の入力を待つというようにせざるを得ないのでNvuが悪いわけではない。)
そこで文字を打たずに、Enterを押して、改行すると、Nvu上では更に改行されて空白行が入った状態になる。
通常、生のPタグにはデフォルトで上下に1行のマージンがとられているのでこのことは表面化してこないが、CSSで上下のマージンを0pxなどに変えると顕在化してくる。

2 もう一つの問題は、ブラウザはソースコードで <p><br></p> と3つ直結された場合には改行表示するという問題である。

3 どういう場合に、<p>の次に「スベースや文字」が来てその次に<br>が来て</p>で閉じるということになるのか?

  具体的にはShiftキーを押しながら改行キーを押せばそうなってNvu上は空白行が入って見える。

4 空白行を入れるにはどうしたらいいか?

  スペースを打ち込めばよい。

4 問題 

  空白行にスペースが打ち込んであるかどうかはNvu上では見えないので、自分の記憶だけが頼りとなる。又はマウスでドラッグすれば黒くなる。

対策1: <p>タグ文章では必ず空白行にスペースを打ち込む習慣にする。 スペースがあれば、ブラウザは1行分空けて表示する。

 

◆ 段落タグと段落タグの間の縦間隔

1 単なる文字の改行の場合は、Line height の分だけ下にシフトして改行する。

2 段落系のタグで囲まれた文字の場合は、段落区切りで、(Line height)+(縦Margin)の分だけシフトする。縦Marginは上下のMarginの大きい方で決まる。

3 段落系のタグで囲まれた文字がボックスの最上部にあると、ボックスの更に上に段落タグの上Margin分のスペースがあく。

4 段落系のタグで囲まれた文字がボックスの最下部にあると、ボックスの更に下に段落タグの下Margin分のスペースがあく。

5 段落系のタグで囲まれた文字の上の行に通常の文字行があると、上下の文字のLine heightが及ぶ範囲の間に段落タグの上Margin分のスペースがあく。

6 段落系のタグで囲まれた文字の下の行に通常の文字行があると、上下の文字のLine heightが及ぶ範囲の間に段落タグの下Margin分のスペースがあく。

7 段落系のタグで囲まれた文字がボックスで囲まれている場合、ボックスの外側の上や下に段落タグの上下のMargin分のスペースがあく。

  対策: ボックスの外側の上や下に段落タグの上下のMargin分のスペースがあかないようにして、内側に Margin分のスペースを空けるには、そのボックスの外側に親ボックスを設けて、その親ボックの上下のPaddingを1pxと設定するとよい。この方 法はIEとFirefoxの両方に共通して有効である。(試行錯誤で見つかったがこれ以外の方でもできるかもしれない。)

 
◆ ボックスの縦位置
 
1 【実験】ボックスの縦位置はFirefoxとIEの場合に分かれて次のようになり、関係は複雑である。実験した結果以下のような関係があることがわかった。
 
  heightを指定した場合は、
   Firefox では、指定した height でボックス高さが決まり、 border があればその分大きくなる。
   1 文字が入っていない場合は、特に変わりはない。
   2 文字が入っている場合は、文字はボックス枠の上辺とそこから H だけ下がった間の文字枠の中央に位置する。
     文字がボックス枠からはみ出した部分は下のボックスとオーバーラップする。
   IEの場合は、
   1 文字が入っていない場合は  height と、font-seze X 1.15  の内、大きい方でボックス高さが決まる。
      border があればその分ボックスの高さが大きくなる。 
   2 文字が入っている場合は、 height と line-height の内、大きい方でボックス高さが決まる。
      border があればその分ボックスの高さが大きくなる。
 
  heightを指定しない場合は、
   Firefox では、
   1 文字が入っていない場合は、ボックス高さは 0 となり、border があればその分ボックスの高さが大きくなる。 
     但し、Nvuではボックスの高さが表示されるので注意する。
   2 文字が入っている場合は、line- height でボックス高さ決まり、border があればその分ボックスの高さが大きくなる。
   IEの場合は、
   1 文字が入っていない場合は、font -seze X 1.15 でボックス高さ決まり、border があればその分ボックスの高さが大きくなる。
   2 文字が入っている場合は、line- height でボックス高さ決まり、border があればその分ボックスの高さが大きくなる。
 
2 【対策】以上の実験結果から、IEでもFirefoxでも同じ表示になるように使うには、次のようにするといい。
  heightを指定する場合は
     できるだけ、文字又は(全角)スペースをいれて空の行にしない方がよい。半角スペースでもいいがNvuで文字化けする可能性がある。
     ● 文字又は(全角)スペースを入れて、height ≧ line-height  height ≧ 1px とする。
     IEでは、文字又は(全角)スペースをいれないと表示が2pxより小さくはならない。
     文字又は(全角)スペースを入れない場合は、height ≧ line-height   height > font-seze X 1.15 とする。 
  heightを指定しない場合は
     ● 文字又は(全角)スペースをいれる。
 
3 この状態で、上下の margin  padding を設定した場合は、ボックスの高さと背景の高さはpaddingを足した値になり、その外側の上下のボックスとの間隔はmarginを足した値になる。
 
4 また、文字の位置は、ボックス枠の上辺から上padding だけ下がった所と、そこから更に line-height だけ下がった間の部分が文字枠となり、文字の中心は文字枠の中心となる。
 
5 この時、line-height > font- sezeの半分 としておかないと、下のボックスとの間隔がある値で空き、下 margin  にプラスされるので注意が必要。
 
6 以上の条件で文字を書いていった場合、改行すると、
Firefoxでは、文字だけがシフトしていき、下のボックスにオーバーラップしていくが、
IEの場合は、改行して文字枠の下線がどんどん下にシフトして行き、 ボックス枠の下辺まで行き着くと、今度はボックス枠の下辺を押し下げていく。ボックス枠の高さを決めておいても、ボックス枠はそれより下に伸びていき、 ボックスの高さと背景の高さを下に伸ばしていく。このため、更に次の注意が必要。
   ボックスの高さを指定しないで、下に伸ばす設計をする。
   ボックスの高さを確定したい場合は、親ボックスで高さを設定し、子ボックスの高さが改行でシフトしてもそれ以内に収める。
 
7 改行するとline-height 分だけシフトする。例えば H が150%の場合は150%から文字サイズの100%を引いた50%分の行間が空く。
 
8 Line-height の例外?
一般的には前述した通りであるが、ある条件で次のようになることがあった。ただし再現はできなかった。
文字枠の中央に文字は配置されるが、文字枠が文字サイズ以下の値になると、文字の下辺は文字枠の下辺に張り付いたまま、文字全体が文字枠の上辺を乗り越えて押し上げられ、その結果文字はボックス枠の上辺を越えて上の行や上のボックスとオーバーラップしていく場合がある。
 
9 その他には次の注意をした方がよい。
  Line-height は Body要素では指定しない。 リストの場合は li ではなく、ul ol などの親要素で指定する。
 
◆ ボックスの縦ボーダーライン消え

 例1 このページではIE6で表示させた場合に、、の部分で次の図のように外側ボックスの縦のボーダーラインが一部消えたので、下記対策をした。
 
  これは横並びボックス有り(float 有り)の場合で、横並びボックスが入る親ボックスに縦のボーダーラインがある場合で、
  親ボックスの縦ボーダーが一部消える場合がある。
  対策としては、外側ボックスを3重ボックスにして、第1ボックスでwidth設定、第2ボックスで、Borderや背景を設定、第3ボックスで
  外側ボックスの取りしろ合計を引いた値以下で横並びボックスの合計以上のWidth を設定してその中に、横並びボックスを配置する。
  (Widthが無指定だと、その段の付近で縦ボーダーラインが消える。)
 
例2 Firefox (またはIE) における「縦ボーダーラインの一部消え」
  以下のいずれの場合でも消えたことがあった。
  (その後この症状はなくなった。ブラウザやOSのバージョンやアップデートの状況にもよるのか原因は不明。)
  消えた時は、以下の対策で正常に表示されるようになったので、再発した時のために対策を記しておく。
  1. ボックス内の最下行の文字にタグが設定されていて、そのタグが<p><h1><ul>などの段落系のタグで、下マージン(margin-bottom)がデフォルトのままの場合。
  2. ボックス内の最下行の文字にタグが設定されていて、そのタグの下マージンが、1emなどプラスに設定されている場合。
  3. ボックス自体に、下マージン(margin-bottom)が、1emなどプラスに設定されている場合。
  4. 以上は「下」の場合だが、「上」の場合でも同じ症状が起きてもよさそうなものだが何故か起きない。もし起きたら、「上」を「下」に置き換えて下記の対策を参考にして模索して見る。
  対策としては次の2案が見つかった。
  1. 最下行としてタグ無しのスペースの行を入れる。ただし間延びしてしまうので見栄えはよくない。
  2. 最下行の下に高さ (height)1px の空ボックスを置く。(0pxだとダメだった。)但し、font-sizeを数pxと小さくしてline-height 0%など小さい値にしておかないとIEでは、下に隙間が開いてしまう。
    ボックスが複数横に並ぶ場合は、一番下に長く伸びるボックスの最下行について対策をすればいいと思うが、安全のため他のボックスの最下行に対策をしてもよい。
  その他にもネットからコピーしてNvuに張り付けると、Firefox における「縦ボーダーラインの一部消え」が生じることがあった。
  ボックスに影響するタグやコードが混ざっていることが原因なのか不明。タグを完全に取り切るのは困難でリスクを伴う。一旦テキストデータにしてから
  貼り付ければ問題ないが、構成がわからなくなる問題がある。そこで別ファイル名として保存しなおして、貼り付けた所をテキストエディターで
  テキストデータに変換して、 貼り付けた所を削除してから置き変える。元のファイルをIEで開けてその構成を見ながら、テキスト部分を修飾
  する方が結局は確実で速い。
 
◆ 多重ボックスの縦位置の調整
  • ボックスの高さを確定したい場合は、多重ボックスを使うといい。
  1. 背景やボーダーを使うときは、親ボックスを設定して親ボックスで使うとデザインしやすい。ただし背景もボーダーもなければ親ボックスは不要。親ボックスで Marginや Paddingを設定すると、全体が下にシフトして全体のバランスが変わるのでデザインしにくい。
  2. 全体の高さ指定が必要な場合は、親の外に祖父のボックスを作ってそちらで高さを指定すれば、ボーダーの幅に影響されずに全体の幅が決まる。ただしボーダー指定がなければ親ボックスで高さ指定しても問題ないので祖父ボックスは不要。
  3. 次に、親の中に子ボックスを作り、親ボックスに対する内容物の位置を上 Padding(余白)で設定する。
    子ボックスで上 Margin 設定をすると、親ボックスを含めて全体の縦位置が下にシフトし、全体のバランスが変わるのでデザインしにくい。下 Margin を設定した場合は、IEでは下に伸びるがFirefoxでは伸びないので望ましくない。
  4. 文字をテキストズームしても間隔が崩れないようにするには、余白の設定は em で指定する。(その場合は文字も em でサイズ指定する。)
  5. 親ボックスで全体の高さ指定をしても、内容物が回り込んで、下限を越えた時、IEではボックスが下に伸びていく。
    下に伸びないようにするには、回りこまないようにする。
    下に伸びるようにするには、高さ指定をやめる。
  6. 以上に加えて、状況によって、後述の「縦ずれ:IEのトラブル対策」をする。
 
◆ 細長いボックスの作り方
  1. クラス要素を<div>タグに適用する。 (h1などを使うときはリセットして使う。)
  2. height を指定する。height は1px以上にする。
  3. ボックス内に、(全角)スペースを入れる。(空だとIEの場合1pxの細いボックスが作れない。)
  4. height ≧ line-height > font-sezeの半分 とする。
    例えば、height = line-height = font-seze  = 1px とすれば上の関係を満足し、 1px の細いボックスができる。
  5. 1px の細いボックス(border設定のある場合は除く)の場合、line-height = 100%とすると、IEの場合、WindowsのDPIを拡大されると何らかの誤差で太く表示されることがある。特に他の問題がなければ、1px、 1em、90%、としておいた方がよさそうだ。
  6. 影付きにする場合は borderで行うがその分ボックス全体の高さは増える。
  7. 上下のボックスとの間に間隔を空けたい場合は、縦margin で設定する。
  8. ボックスの高さもborder幅も指定しない場合は、そのボックスは表示されず、そのボックスはないのと同じになる。
 
◆ Span タグの縦位置調整

 
インライン修飾になるので、<div>タグやHTMLタグなどのボックス修飾とは考え方が違うので注意が必要。
<span class="span-height">いいいいいいいいい</span> のように書いた場合、
縦の位置は、Line height だけで決まる。( ↓ 例)

あああああああああああああああああああああああ
いいいいいいいいい
うううううううううううううううううううううううううううううう

上のように、上下2本のライン間に「い」を9文字書いた場合、(ラインの上に「あ」が、下に「う」が書いてある)
  • 文字枠の高さは、 line-height となる。 line-height: 7px;
  • 改行間隔は、 line-height となる。
  • 文字の中心は文字枠の高さの中心になる。 font-size: 14px;
  • 縦marginや、heightや、width は機能しない。改行間隔は line-height で決まる。
  • 横位置は横marginで決まり、横幅は横paddingと書いた文字数で決まる。 margin-left: 60px; padding-top: 15px; padding-bottom: 30px;
  • 文字の背景全体の高さは、(font-size)+(上padding)+(下padding)+(縦のborder幅)=(背景の高さ) となり、
    文字枠を超えた部分は、上下の文字とオーバーラップする。上の行から順に重なる。 border: 10px dotted #ff6600;
  • 同じタグ内で改行すると文字枠分だけ下にシフトし、横marginは無視されて行頭から始まる。
Line height が%やem指定の時は、(font-size)X(line height)が実際のline heightになる。
−−−上の例のCSS−−−
.line-box {  line-height: 100%;  background-color: #cccccc;  width: 300px;  height: 5px;  font-size: 4px;  margin-top: 0px;
  margin-bottom: 0px;}
.span-height {  border: 10px dotted #ff6600;  color: #6600cc;  width: 100px;  height: 70px;  font-weight: inherit;
  margin-top: 70px;  background-color: #c5ffde;  margin-left: 60px;  padding-bottom: 30px;
  padding-top: 15px;  font-size: 14px;  line-height: 7px;}
−−−上の例のHTML−−−
あああああああああああああああああああああああ<br>
<div class="line-box"></div>
<span class="span-height">いいいいいいいいい</span><br>
<div class="line-box"></div>
うううううううううううううううううううううううううううううう<br>
 
◆ 文字の縦ずれ:IEのトラブル対策
  1. 1em のサイズや100%のサイズの場合、親ボックスで決められた基準サイズを1em(100%)として表す単位。0.875emなどとして使う。
  2. 但し line-height、 height、 width の長さの 1em は、自分のボックスで決まった文字サイズを 1em または100%として表す。親ボックの文字サイズではないことに注意。
  3. pxやptでもいいが、テキストズームをしたときに段組の横幅もズームできるようにするために widthに em を使う方法がある。
  4. em は最終的には px に換算されてモニターに表示される。em をpxに換算する場合、小数点以下の数字は IE と Firefox では換算ずれが生じる。このずれはボックス毎、改行の度に累積される。「換算ずれ」を小さくするには、両方のブラウザで確認しながらpxに換算した時の少数点以下の数字が小さくなるように設定するといい場合がある。
  5. 例: 16px = 1em  15px = 0.94em  14px = 0.88em  13px = 0.82 ・・ 15px = 1em  14px = 0.94em  13px = 0.87em ・・ 14px = 1em  13px = 0.93em
  6. 多重ボックスで何回も基準変えをするとその度にIEとFirefoxの誤差が生じるので基準変えの回数は少ないほうがいい。
 
◆ ボックスの縦ずれ:IE6のトラブル対策

1 例えばごく普通に書いたシンプルなページが下の図のように全く異なって表示される。→IE6トラブルの例
左が Firefox で右が IE6  である。高さが、2px(灰)、5px、2px(灰)、0px、2px(灰)、0px、2px(灰)、  の7個のボックスを縦に並べた
ものである。左のFirefoxでは、上から2px灰色で、その下に5px白くなり、その下に6px灰色になる。しかし右のIE6ではその通りにならな い。これを意図した高さに表示させ、なおかつIEでもFirefoxでも同じ表示になるようにする必要がある。(IE8では改善されたが、IE6も多いの で対策が必要)

   

 

2 1で示した縦ずれは、試した範囲では、  line-height font-size などに関係するようだ。 Bocdy でline-heightを設定すると、問題が起きるようだ。
ではbody で、 line-height を設定しなければいいかというと、それだけでは100%解決しない。各ボックスで font -seze や line-height を設定する必要がある。(どうしても Bocdy でline-heightを設定したい場合は、一番上のボックスに background-color を設定すれば、ずれが小さくなり、一見同じように見える。 line- height  と background-color が縦ずれに関係するとはなかなか思いつかないが試行錯誤で見つかった。ただしわずかにずれるのでBocdy でline-heightを設定する方法は推奨できない。

  このことから、細かく縦位置を合わせるには、下のボックスで(ボックスが不要の場合でもダミーボックスや、空ボックスを作って) 
例えば、font-sizeを縦幅以下、line-heightを100% などと
設定しておく。  (font-sizeはheight以下にするとよい。)

 

3 参考として、うまくいった実例を次に示す。 → 1 body で line-height を設定しない例 2 body で line-height を設定した例 

  bodyと#box01 の部分が対策した箇所である。2の例は同じように見えるがわずかにずれるので推奨できない。

 

4 横幅のずれは、DTDを適切に選び、横幅指定用のボックス中に子ボックスをもうけてそちらで Border、Margin、Padding などを設定すればだいたいうまくいくが、高さ(縦幅)のずれは難解である。

 

5 親ボックスで全体の高さ指定をした場合、IEでは文字列の改行や折り返しなどで内容物が回り込んで、
下限を越えた時、ボックスが下に伸びていく。
Firefoxでは、親ボックスを下に伸ばすことはなく、下のボックスの内容物とオーバーラップする
混乱を避けるには、親ボックスの高さ指定をしないか、文章を書く際に回りこまないように注意する。ただし閲覧者がテキストズームする場合もあり、Firefoxではpxでもテキストズームできるのでオーバーラップの可能性のあるものはボックスの高さは指定しないようにする。
改行や折り返しでは、line-height 分だけシフトする。
(折り返しについては、英数字のスペース無しの連続文字列は英文処理されるため長くなると折り返しができない。)

 

6 文字行の微小ずれの累積
IEの場合は、文字の行(タグのない文字行)でも、Firefoxに比べて2〜3行につき 1pxづつ下にずれていく。
対策: ボックスの定義で 必ず line-heigth を設定する。例えば 100%、 150%などと指定すればある程度改善される。

  <p> タグ付きの場合は更に大きく下にずれていく。  タグ付き、 <ul> <ol> なども相当ずれる。
1つの対策として、段落系のタグの場合、例えば<p>タグ付きの場合、<p>タグの上下のmarginを 1em とか 0px とかにしリセットするとある程度改善される。
親ボックスで全体の高さを決めてその中で、各行のずれを目立たないようにすれば全体としてそろうかもしれないが、そこまでする必要があるケースは少ないかもしれない。
リセットCSS最後の方で説明)というものがある。p h ul ol などの HTMLタグの margin を 1em0em にリセットするなど、ブラウザのデフォルト仕様に依存する部分をリセットするという手法である。しかしそれで一律うまくいくとは限らず、反って混乱する可 能性もある。無闇に沢山リセットするとそれだけ不安定要因を抱えることになるので、理解して目的にあった定義をした方がいい。

   

  例 Yahoo-JpYahoo-USはfirefoxとIEでずれが出るが、 Livedoor はfirefoxとIEの差はなく、ぴったり一致している。CSSをみるとHTMLタグはリセットしてから必要に応じて再定義して使っているようだ。

 

歴史 的背景  HTMLだけでHPを作っていた時代は、だいたいTable要素と、スペーサーといわれる画像を使って段組調整をしていた。Yahoo!などの ポータルページも2007年頃まではテーブルで書かれていた。しかしHTMLだけではデザインに限界がでてきて、CSSを使ってより細かいデザインをする ようになった。この段階になって、 IEのトラブルが表面化してきた。過去の事になるが、ブラウザの初期の頃に先行して圧倒的なシェアを占めていた Netscapeに対抗して、IEが出てきた。目的はほぼ同じことができて、しかも独自仕様で作ることであった。結果的にIEが世界のシェアの半分以上を 占めることになったが、この「独自仕様で」ということが問題の一因だったのかもしれない。 IEがいろいろな部分で奇妙で不可解な表示をすることがわかってきてCSSデザインは思ったほど簡単ではなくなった。(バージョンアップで改善されている 部分もある。)CSSを使うには、IEのトラブル対策が大事である。

  


画像枠



 1 枠のある画像をボックスの背景に張って、その枠の中に文章を書くこともできる。
   

 2 画像枠の例(3行)
   枠用の画像を上、中、下と3つ用意して、それぞれ上ボックス、中ボックス、下ボックスの背景画像として貼り付ける。
   ボックスの横幅は固定である。
   中ボックスの縦長さを指定しないで(自由長にして)、中画像を縦のTile で並べれば中枠が縦に自由に伸びる。
   上
  
   中
  
   下

 3 画像枠の例(3行3列)
   3行3列のボックスを使えば、上下左右に伸縮する画像枠を作れる。
   画像は、上下左右と、四隅の画像(合計8個)を用意して、背景として貼り付ける。
   画像枠の角を丸くする(角丸にする)には、角の丸い画像を使えばよい。
   丸くした外側は背景色にする。 透過GIFはギザギザになってあまり望ましくない。
   更にグラデーション枠を使ったり、影つきの枠を使うと立体感が出る。

   上段は、ボックスをfloatで3個横に並べる。
   中断は、ボックスを同じ大きさ同じ位置で入れ子にして3層重ねる。一番下の第1層には背景画像を左に張り、第2層には
   背景画像を右に張り、一番上の第3層に文字を書く。背景色は第1層に設定する。
   (一番外のボックスには上段のフロートを閉じる役目もさせる。)
   (表の場合は、中央のセルが下に伸びると、左右のセルも自動的に伸びるが、ボックスの場合は、通常別々に伸びてしまうので
    このように入れ子重ねにすれば一緒に伸びる。)
   下段は、ボックスをfloatで3個横に並べ、最後にフロートを閉じるための幅指定無しの空ボックスを置く。
 
CSS 定義は右のようになる。
 
最初下のように
 div ボックスを作って 
並べておいてから 
CSS要素を割り付ける。  
  
使った画像
を90度づつ回転
したもの4個、と  
.imgframe {  width: 601px;  margin-right: auto;  margin-left: auto;  font-size: 10px;}  ←全体の囲み
a1 {  width: 15px;  height: 15px;  float: left;  background-image: url(g15x15hu.gif);  ←左上
  background-repeat: no-repeat;  background-position: right top;}
.a2 {  height: 15px;  float: left;  width: 570px;  background-image: url(g15x15.gif);  ←中上
  background-repeat: repeat-x;  background-color: #d4f9ff;}
.a3 {  height: 15px;  float: left;  width: 15px;  background-image:   ←右上
 url(g15x15mu.gif);  background-repeat: no-repeat;}
.b1 {  width: 600px;  clear: both;  background-image: url(g15x15.gif);   ←中段第1層
  background-repeat: repeat-y;  background-color: #d4f9ff;}
.b2 {  background-image: url(g15x15.gif);          ←中段第2層
  background-position: right top;  background-repeat: repeat-y;}
.b3 {  padding: 1px 5px;  text-align: left;  font-size: 14px;   ←中段第3層(上下に1pxのPaddingを設定)
  line-height: 150%;  margin-right: 15px;  margin-left: 15px;}
.c1 {  width: 15px;  height: 15px;  float: left;  background-image: url(g15x15hs.gif);  ←左下
  background-repeat: no-repeat;  background-position: right top;}
.c2 {  height: 15px;  float: left;  width: 570px;  background-image: url(g15x15.gif);  ←中下
  background-repeat: repeat-x;  background-color: #d4f9ff;}
.c3 {  height: 15px;  float: left;  width: 15px;  background-image:   ←右下
 url(g15x15ms.gif);  background-repeat: no-repeat;}
.cc {  clear: both;}   ←閉じるボックス(幅指定無しの空ボックス)
.b3 p {  font-size: 14px;  line-height: 150%;   ←pタグのブラウザによる行間の違いを無くす設定
  margin-top: 14px;  margin-bottom: 14px;}
          
KompoZer では下の画像のように、div ボックスの線が見えるので操作がしやすい。

実際の表示
青い四角の画像を枠の背景にタイル状に張っている。

コーナーは4種類の三角の透過GIFを背景にしている。
この枠の背景がボックスのwide(横幅)の設定に応じて自動的に横に伸びる。
また文字が折り返して文字の行数が増えると、枠の背景も下に伸びる。
絵柄の背景でやるともっと面白くなる。 下↓はこのページで実際に表示させたもの。

あああああああああああああああああああああああああああああああああああああああああああああああああ

いいいいいいいいいい

 
 HTML は右のようになる。

 画像を工夫すればもっと
 いろいろの効果を出せる。
 
  別画面で表示させたもの
      ↓
   別画面表示

.<div class="imgframe">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="b1">
<div class="b2">
<div class="b3">
<p>あああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<p>いいいいいいいいいい</p>
</div></div></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="cc"></div>
</div>

  注意:行間ずれの補正方法: 枠の中に文章を<P>タグで書く場合、枠の上辺と文章の行間がIEと Firefoxとでは異なる表示になる。
     (<p>タグに上下のマージンを例えば1emなどと設定しておけば問題ないのかもしれないが、デフォルトのままの前提で作ってみた。)
   1 内外のボックスとも幅指定無しの場合は問題ないが、幅指定有りだと、IE では行間がつまり、Firefoxでは空白行が入ってしまう。
     上の例では、中段のボックスb2が幅指定有りなので、その中に幅指定無しのボックスb3 を入れ子にして、
     更にそのボックスの上下を  padding: = 1px としてしている。これによってIEでもFirefoxでもほぼ同じように表示される。
     IE は不規則な表示をするのでその都度、試行錯誤で対策する必要がある。
   2 全体を囲むボックスで、フォントサイズを画像枠の幅よりかなり小さくしておかないと枠の下に隙間ができてしまうので、ここでは、
     10pxに指定した。
   3 <p>タグはブラウザにより行間隔のデフォルト表示が異なるため、font-size、 line-height、 margin-top、 margin-bottom などの
     行間隔に関係する定義は全てCSSで定義しておく。
 
4 上の例は、画面全体の背景があっても透過して背景が見える所が特徴である。
   これに対して、背景が白など単色に決まっていて透過する必要はない場合は、もう少し簡単にできる。
   その場合は、Floatingボックスを使わずに、重ねあわせだけですむ。 
   例1:上段の第1層に背景として非常に長い画像を右寄せに貼り付けて、その上の第2層に背景としてコーナー画像を左寄せに貼り付ける。
       重なった下は見えないので、結果的に上の画像枠ができる。下段の画像枠も同様にし、中段は10と同様にすればよい。
   例2:ボックス全体の背景を第1層として一番下にしておいて、その上に上段第1層に背景としてコーナー画像を右寄せに貼り付けて、
      その上の第2層に背景としてコーナー画像を左寄せに貼り付ける。
      重なった下は見えないので、結果的に上段の画像枠ができる。下段の画像枠も同様にし、中段は10と同様にすればよい。
 
5 ボックス、画像、などをうまく組み合わせればいろいろなデザインができる。
 
参考ページ → WEB 工房きくちゃん テンプレート・ギャラリー 
 
 
10−1

段組デザイン

  1. 全体のボックスの中に、コンテンツ用のボックスを中央寄せにする場合、全体ボックスに、枠用の画像を貼る方法がある。
    枠用の画像を作って、全体ボックスの背景として貼り付ける。枠用の画像は、当然コンテンツ用のボックスより大きくする。
    その際に背景は、中央として、上からタイルする(Y方向にリピートする)
  2. ウィンドウ全体のボックスの中に、ヘッダー用のボックスとそれ以外のまとめボックスの2つを作り、まとめボックスの中に、メニュー用ボックス、本文用ボックス、脚注用ボックスの3つのボックスを並列して入れ子にして入れる方法もある。
    ボックスの配置は好みによりいろいろの作り方ができる。
  3. 固定幅にしないで(Widthを設定しないで)、左寄せにしておいて(Float=leftにしておいて)、Window幅に応じて右側に伸びるようなデザインのしかたもある。
  4. 左画面を本文用、右画面をメニュー用にしてもよいし、タイトル画面の一部に、メニューを記載してもよい。
  5. 左をメニュー、右を本文とした2画面の段組もあるし、左をメニュー、中央を本文、右をリンク集などとする3画面の段組もある。
    3画面の場合は、入れ子にするボックスをもう一つ増やして、3画面の幅の合計を、有効全体ボックスの幅以下にすればよい。
  6. 本文用のボックスの中に更に孫のボックスを、記事ごとに次々と縦に並べて行くこともできる。
  7. 段組の見やすさ
    1. 主 に、1列、2列、3列、があるが、一番先に視線が行きやすいのは、上から少し下がった左上という傾向が考えられる。そのため一番頻繁に見られるようなもの を左にもってくるという方法もある。例えば、読み込むような長い記事や、リンク先をいろいろ変えて見たいものを次々にクリックして見る目次などである。
    2. 目次の数が少ないときは、1段組にして、目次は上の方の横バーに置くという方法もある。
    3. 2段組にする場合、目次を頻繁にクリックする場合は、目次を左欄にし、記事読む時間の方が長くて目次のクリック回数が少ない場合は、目次を右欄にするというような考え方もある。
    4. 広告やお知らせなど、気分を変えて見るようなものは、更に右に1列追加して、3列にする方法もある。
    5. 上の方の横バーに大分類メニューを置いて、更に左欄や右欄に目次がある場合、デザインによっては、目次は左欄や右欄だけと思って、上の方の大分類メニューに気が付かない場合も考えられる。そういう場合は、上の方の横バーを見てもらうための工夫も必要。
  8. ボックスの境
    1. ボックスの境は1pxのボーダーラインで囲むものが比較的多いようだが、ボーダーライン無しのものもあるし、画像を使うものも多い。
    2. ボーダーと隣のボーダーの間(ボックスの間)には、例えば5〜13pxの隙間を空ける例もあるが、間を空けずにボーダーライン1 本のみという例もある。
    3. ボーダーと隣のボーダーの間(ボックスの間)を空けるには、右側のボックスの左マージンを設定とする方法などがある。
    4. ボックスのコーナーは、直角が多いようだが、好みによって丸みを付けたり、画像を使っていろいろ工夫をする例もある。
    5. ボーダーラインの色は、背景が白の場合、グレーや薄いブルー、黒、グラデーション画像、その他いろいろある。
    6. CSS3 を使ってボーダーラインの角丸、グラデーション表示をする方法がある。 角丸+OR+グラデーション+css3 
      [CSS] すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ | コリス 
      画像を使わずにCSSだけで角を丸くする方法[ホームページ作成] All About 
      たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス
      Apple は徹底して角丸グラデーションを使っているが IE6〜IE8 では機能しない。
      IE でも機能させるには、別に動作ファイル(.js や .htc ファイル)をリンクさせる必要があるが、動作がかなり遅くなる問題がある。
      角 丸+OR+グラデーション+ie6+css 
      注意事項として、KZで編集すると、その部分が消されてしまうので、その部分だけ最後にテキストエディターで追加する。
      別 の利用方法として、ダミーページを作り、それをローカルで、 Firefox で表示させてから、そのプリントスクリーンで画面コピーして、 そこから画像を切り取って使うという方法がある。画像ソフトで作るよりも簡単で、KZで編集できて、どのブラウザでも表示できて、表示も速い。
  9. ボックスの背景と枠線画像のデザイン
    1. 背景は白が一般的に多いようだが、好みによっては色のある背景や、模様や画像の背景のものもある。
    2. 外側背景は白、使っても薄灰色くらいが多い。
    3. 角丸や、枠線はあまり使わないものが多い。
    4. 人気ブログでも丸枠は少数派、背景ゴテゴテは更に少ない。
    5. 枠線と隣の枠線の間に背景色を付ける場合もある。
    6. 枠線の幅はグラデーション部を含めて1〜8pxくらいが多い。
    7. 角丸はグラデーション部を含めて3〜8pxくらいが多い。
    8. 枠線は薄い灰色か少し青みがかかった灰色が多い。
    9. 枠線の外側、又は内側に薄くしていく例もある。
    10. 枠線の左右の外側に向かって外側の基本色にグラデーションを付けていく例もある。
    11. 背景の下の方に向かってグラデーションをかける例もある。
    12. 背景に写真画像はあまり使わない。
  10. スクロールバーとの距離
    1. スクロールはホイールで行うと考えれば、スクロールバーに触る頻度は少ないかもしれない。
    2. スクロールするほど見てくれればいいが、そもそも目に付いて興味を引いてもらえなければ意味がないので、やはり何を先に見てもらいたいかが先という考え方もある。
  11. ヘッダー(ページの頭)のデザイン
    1. デザイン的な文字、写真、イラストなどを置く例がある。
    2. 写真の場合、文字を重ねる場合が多いようであるが、文字色が目立たない場合は、写真を薄くしたり、文字の周りや文字の範囲の色を変えたりする例もある。
    3. ヘッダーの写真やイラストの特定の部分を押すと、リンク先に飛ぶという凝った例もあるが、気が付かないで別のサイトに行ってしまうということも考えられるので、どうしてもやりたかったら、気が付きやすいような工夫をする方法もある。
  12. Webページのデザインは、いろいろなサイトを見て参考にした方がよい。
    文字サイズは15px 13pxが多い。
  13. Webサイトのページの内容、CSS構造、画像を調べるにはFirefox11を使うと便利である。使い方は→こちら
  14. Webページのデザインに合わせた、画像作りも重要になる。


10−2

段組用WEB画像の作成

段組用のWEB画像を作成する方法
枠線、グラデーション付き枠線、アクセサリー付き枠線、角 丸、グラデーション付き角丸、単色背景、グラデーション背景、ストライプ背景、格子背景、ライン、ボタン、バナー、メニューバー、ヘッダー、波状グラデー ション、画像用文字(フォントのDL、文字のグラデーション、文字の影、文字の縁取り、曲線に沿って並んだ文字、文字の遠近変形、文字の横変形)

 
11−1

画像枠 実験

この方法は一般的でない

   応用として、3画面の段組で、中央のボックスが下に伸びると、同時に左右の背景も下に伸びるように出来るかどうか
   試してみた。
   Firefoxだけなら簡単だが、IEでも同じにするには、試行錯誤が必要で難解である。 → やめた方がいい
   下のように何とかできたが、一般的にはこのようにはせず、BlogやYahooなどのページのように、左・中・右の各列が独立して伸び縮み
   するように作成する方がよさそうだ。
   参考例 → Yahoo(JP) Yahoo(US) (Yahooは2007年頃まではテーブル枠構成) livedoor Blog(ブログ)

                何とか試してみた例  (別画面での表示は→こちら )

                下↓はこのページで実際に表示させたもの。 

                 (左欄と右欄の下限がわかるように、ボックスの下部に灰色のボーダーラインを付けてある。)

あああああ

ああああああああああああ

ああああああ

いいいいいいいいい いいいいいいいいいいいいいいいいいいいいいいいいい

いいいいいいいいい いいいいいいいいいいいいいいいいいい

いいいいいいいいいい いいいいいいいいいいいいいいいいいいい

ううううううううううううううううう

うううううううううううううううう 

  

    この例では、左・中・右の列ともに、3重構造にした。外は幅指定用、中間は背景指定用、内は文章用の3重構造にした。
    各ボックス穂幅はボーダー線幅とパディング幅を差し引いたものを細かく計算して設定する。
    IEの場合に、<p>タグ文章がボックスの上辺との間で行間が空かないのを補正をするために、
    幅指定無しの空ボックスを各文章ボックスの頭に置き、上下の margin を1mに設定した。特に理由は無く試行錯誤で設定した。
    (外ボックスに幅指定があると起きるようだ。<p>タグに上下のmarginを1emなどと設定すればいいのかもしれない。)
    (幅指定無しの孫ボックスを中に入れて、上下の margin を1mに設定し、その孫ボックスの中に文章を書いてもよい。)
    Float 状態を解除するために、閉じるボックスで、 clear: both とし、文字無しにする。
    IE対策として、この閉じるボックスを表示させないために、幅も高さも指定しないようにした。
    実際の文章ボックスは左・中・右とも独立して伸びるている事を示すために、文章ボックスの下の枠線を灰色にした。
    画像は、前に使った有り合せの青の三角図形を透過GIFにして背景にタイル状に張ってみた。   

    注意: Nvu/KZ の CSS 表示の縦ズレの問題:CSSエディターで上下のマージンやパディングを設定しても、
         Nvu/KZの画面上に表示がすぐには反映されないので、再表示させるか、ブラウザで確認する必要がある。
         又 div ボックスの行間にスペース行が入ったように見えるのでこれも、ブラウザで確認する必要がある。



11−2

3列画面の段組のレイアウト
 

この項目は前の方で述べた2列画面の例と似たような内容で、古いので、削除予定。

3列画面の段組にするのは、ボックスを1列増やすだけなので簡単である。
一例としてやり方を以下に示す。
1 CSS Editor画面で、#winbox, #palletbox, #upperbox, #leftbox, #centerbox, #rightbox, #lowerbox の7個のボックスを作る。
  #winboxの中に#palletboxを入れ子にし、#palletboxの中に、#upperbox, #leftbox, #centerbox, #rightbox, #lowerbox の5個を入れ子にする。

  bodyは余白用のボックスにしたが、#winbox を兼用して、#winbox を削除しても良い。
2 Source 画面で、 <body>と < /body>の間に <div id="winbox"></div>を記入し、
  その< /div>の前に、<div id="palletbox"></div> を記入し、その</div>の前に、<div id="upperbox"> </div>と<div id="leftbox"></div>と
  <div id="centerbox"></div>と<div id=" rightbox"></div>と<div id=" lowerbox"></div>の5個を入れ子にして記入する。
3 CSS Editor 画面に戻って、各ボックスのデザインを設定する。
  #leftbox, #centerbox, #rightboxの3つのボックスは、左詰に並べるために、3つとも Float: left とする。 
 (1) body の Box項目で Margin: 全て0px 、 Padding: 全て0px  とする。
 (2) #winbox のBackground でcolorを緑に設定する。
    Box の Margin は、外側の body で定義してあるので、何も記入しない。
    Textで IE で中のボックスを中央寄せに表示させるために text-align: center に設定する。(URL有りのDTDでは不要。)
 (3)   #palletbox のBackground で color を灰緑色に指定し、 Box で width: 800px 、
   外側余白として、 Margins で Top:0px Left:auto(記入) Right:auto(記入) Botom:0px と設定する。
   このボックスの中の文字や孫ボックスの中の文字は、(2)の設定で全て中央寄りになるので、
   再度、左寄せに戻すために、
Textで text-align: left と設定。
 (4) #upperbox のTextでcolorを緑に設定、Backgroundで画像を設定、 Boxで  width: 800px  height: 120px と設定する。
 (5)   #leftbox のTextでcolorを白に設定、Backgroundでcolorを緑色に設定、 Boxで Float: left  Width: 100px と設定する。
 (6)  #centerbox のTextでcolorを黒に設定、Backgroundでcolorを白に設定、 Boxで Float: left  Width: 629px と設定する。
    (IE で印刷プレビューで見た場合、右端のボックスが下にずれるので、1px少なくした。)
 (7) #rightbox のTextでcolorを白に設定、Backgroundでcolorを緑色に設定、 Boxで Float: left  Width: 70px と設定する。
 (8)  #lowerbox のTextでcolorを黒に設定、Backgroundでcolorを薄紫に設定、 
    Boxで
 Width: 800px 最終段を閉じるために「 float: unspecified Clear: both 」と設定する。

「3画面の段組」
ボックスのデザインを設定した所。


「3列画面の段組」
ボックスのデザインをした次に、ボックスの中に文字を記入した所。 実際の例はここをクリック


  HTML ソース  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"><head>
<meta content="text/html; charset=Shift_JIS"
http-equiv="content-type"><title>ee03</title>
<style type="text/css">
body { margin: 0px;
}
#winbox { background-color: rgb(153, 255, 153);
text-align: center;
}
#palletbox { margin: 0px auto;
width: 800px;
background-color: rgb(97, 153, 106);
text-align: left;
}
#upperbox { background-color: rgb(153, 255, 153);
width: 800px;
height: 120px;
background-image: url(green03.jpg);
}
#leftbox { float: left;
width: 100px;
background-color: rgb(0, 153, 0);
}
---右欄に続く---
#centerbox { background-color: rgb(255, 255, 255);
float: left;
width: 629px;
}
#rightbox { float: left;
width: 70px;
background-color: rgb(0, 102, 0);
}
#lowerbox { clear: both;
width: 800px;
background-color: rgb(194, 196, 253);
text-align: left;
}
</style></head><body>
<div id="winbox">
<div id="palletbox">
<div id="upperbox">題名<br></div>
<div id="leftbox">目次1<br>目次2<br>目次3<br> </div>
<div id="centerbox">折り返しと改行のテスト<br> あいうえお
かきくけこさしすせそたちつてとなにぬねの。 ABCDEFGHIJ
KLMNO あいうえおかきくけこさしすせそたちつてとな
にぬねの。<br>新しい行。<br>新しい行。<br>新しい行。 </div>
<div id="rightbox">Link1<br>Link2<br>Link3<br></div>
<div id="lowerbox">abcdefg</div>
</div></div></body></html>
  

 
12

別ページのボックスの一括変更


別のページのボックスを、一括して変更するには次のような方法がある。

1 Nvuの画面下のステータスバーを使う方法 (結果を見ながらできるので安心してできる。)
   1 最初に元のページの「ステータスバー」の該当ボックスの <div>文字をクリックして、
     Ctrl+C キーを押してボックスをコピーしておく。
   2 次に変更したいページをNvuで開き、ステータスバーの該当ボックスの <div>文字を
     クリックしてボックスを選択し、 Ctrl+V キーを押して置換貼り付ける。

2 検索置換ソフトを使って全ページ一括変換する方法。 
   一発で全ページ変わってしまうので、必ず全ホルダーのバックアップを取ってから行うこと。
   ミスや勘違いやで全ページが一瞬のうちに消えてしまったら被害は大きい。バックアップソフトなどでバックアップは必要。
   検索置換ソフトの機能としては、正規表現ができて、複数行について、"改行コードを文字とみなすか無視して"検索できることが必要である。  
   ほとんどのソフトは行単位検索が対象で、この条件を満たすソフトは少ないが、Devas-3.5b  Repl-Ace on .NET  で一括変更できる。
   Devasでうまく行かない場合、一度削除してから最新版を再インストールするといいようだ。
   他にも探せば有るかもしれない。
   「検索文字列」に、例えば、ボックスを挟む先頭コメント<!-- MENU -->と末尾コメント<!-- /MENU -->(何行か下にあってもよい)を
    .* 又は .*? を挟んで記入して、「置換文の窓」に、Nvu の「Souce」から該当ボックスの部分をコピーしてきて、
   貼り付けて、検索→置換で、指定ホルダー内のファイルを一括して変えられる。
   ただし、あらかじめ、各ページに、該当ボックス<div>を挟む先頭と末尾のコメントを埋め込んでおく必要がある。
   ピリオッドは任意の文字、アスタリスクは何文字でも可の意味
   .*? の?は最初に<!-- /MENU -->をヒットしたところまでという意味である。?が無いと複数ある最後の<!-- /MENU -->までが対称になる。
   1つのファイルに同じコメントは1つだけにした方が無難。
   置換文字列は、NvuのSourceからコピーすると、コードの中に読みやすくするための改行コードが入ってしまうので、ダメである。
   必ずテキストエディターから本当のソースコードをコピーしてくること。
   Devas-3.5b では、置換文字列入力欄の右端にある [....] ボタンを押すと複数行の入力ができる。
   Repl-Ace on .NET は使い方が少し難しく、検索する場所と検索ファイル名はエクスプローラーからコピーしてきて貼り付けて、
   その右の検索ボタンを押してStep1に表示させる。
   置換文字列は右端のボタンを押して、複数行入力を選ぶ。そこでは改行文字は¥nにする。
   正規表現を使うと改行を文字とみなすにチェックを入れて、追加更新のボタンを押してStep3に表示させる。
   次に、Step2のファイル名を右クリックして、置換シミレーションを押す。置換予定の部分が黄色で表示される。OKなら実行を押す。
   置換されたものは、各行単位で改行コードが入るが、NvuのSourceからコピーするに分には、元のNvuより悪くなることはない。
   (Nvuの日本語改行問題は別途対策が必要。)
   Greplace は置換されたものは、改行コードは入らず、全て1行の長い文字列になる。NvuのSourceからコピーすると、コードの中に読みやすく
   するための改行コードが入っていてそれを一律削除してしまうので、例えばスペースが消えてしまうなどの問題がおきる。元々改行コード無しの
   ソースコードに限ってテキストエディターからコピーしてくるという条件で使える。



 

3 フォルダー内の他のページについて、共通範囲を同期させる方法はあるか?
そういうソフトは見つからなかった。考え方としては、基準ファ イル名と、変更対象フォルダ名を登録しておき、次に検索範囲を複数登録しておく。実行時には、基準ファイルの指定範囲を正規表現で検索コピーしてきて、他 のページの同じ範囲を正規表現で検索置換すればよさそうである。
JavaScriptはPC内のファイルを書き換えできないので、Rubyで正規表現置換を使えばできそうだ。Rubyでフォルダ内にあるファイル全てに
参考:Ruby 「正規表現」 逆引きRuby - 正規表現(パターンマッチ) ファイルへのアクセスは Rubyの使い方は→Aptana の使い方 
正規表現のテストは ここ→ Rubular: a Ruby regular expression editorでできる。(動かない時は別の日にやれば動く。)実行サンプル

 


TOP
Nvuの紹介
Nvu の使い方
一般的な使い方と注意
Nvu で始めるスタイルシート
概略編 段組(ボックス)編 修飾編
CSS
応用編
  
 
修飾編
  
修飾の方法
  

  
概要
1 文字、表、ボックス、画像、リンク、などの修飾パターンを、CSSの定義部で定義しておくと、
  Nvu のツールバーからそのパターンを選んで、簡単に修飾が出来る。 
2 任意の名前(例えばss1)で定義(クラス定義)をしておいて、使う時は、修飾したい文字列にカーソルを置いて、
  Nvuのツールバーの左の選択ボックス(上下に二つある)をクリックすると、定義した文字修飾名が選択肢として現れるので、
  それを選ぶだけで、文字が修飾される。(但しこの方法は望ましくない)
3 CSS定義部を変更するだけで、全部の修飾設定箇所を一斉に変更することができる。
4 定義するのは面倒でも、一度作っておくと、何回も使う時に楽になる。自分用の道具として道具箱に入れておけば便利。
5 実は、2の方法は、インラインといって、文字単位の修飾になり、管理上望ましくないが、ワープロと同じ要領で分かりやすいので、
  最初は、主にインラインの定義を使って、Nvuの使い方を説明する。
  実際には、<div>タグや行単位のHTMLタグに対して、ブロック範囲で修飾をするのが望ましい。
  <div>タグは、ツールバーの左端のボックスで Generic Container (div) を選べは設定できる。
  理由はHTMLのソースコードには修飾情報を一切含めず、HTML のソースには文字情報だけにしてソースコードをすっきり
  するためであり、XHTMLの推奨に従う為である。(ブログや新しいページなどはXHTMLで書かれている。)
  この事は、後の5項(文字修飾の考え方)、6項(きれいなCSS の使い方:ソースコードを汚くしない)で説明する。
 
実際の手順


CSS Editor による修飾定義名の設定

  まず、CSS Editorを使って修飾定義名を設定する。
  この段階では、修飾の詳細定義まで設定しないで、名前だけ設定しておいて、
  後で画面の表示結果を平行してみながら詳細を定義する。

CSS Editor で修飾用の要素を作る

1 CSS Editor で素を作る
  (1) ユーザーが名前をつける場合は、
修飾定義名 を  .md1 などとする。
  (2) HTML の規定のタグを使う場合は、修飾定義名 を h1, h2, p などとする。
2 修飾定義を作る時に詳細設定をしてもいいが、(設定しながら画面で連動させて見て確認したいので)
  この段階では、修飾定義だけ作って、後で画面を見ながら詳細設定を決めていくことにする。

CSS による修飾定義とHTMLタグの記述例  参照:TAGindex 
修飾定義
--- 要素定義とタグの記述 ---
  id (identity) =固有識別要素(同じidは1回しか使えない)
  class =分類要素( id 要素やHTML要素に付属可能
用途 要素の定義方法 タグの記述方法
修飾 ユーザーが名前をつけたclass要素を使う場合。(クラス要素定義)
 .xxxx  
   div, span,HTMLタグに付属して使う。
   .aaa .bbb  (.aaa内の.bbb)   .aaa内の.bbbを定義。
 
 class 要素を文字単位の修飾(spanタグを使うインライン修飾)に
 使うのは望ましくない。

 同じ修飾定義をしても、文字単位の修飾(インライン修飾)と、
 行単位の修飾(ブロック修飾)とでは、表示結果が異なるので注意。
 <div class="xxxx">
  < /div> 行単位の修飾
<span class="xxxx">
  </span> 文字単位の修飾
<p class="xxxx">
  < /p> HTMLタグ単位の修飾
ユーザーが名前をつけたid要素を使う場合。(id 要素定義)
  (同じidは1回しか使えない)
 ボックスの id に直接修飾の設定をすることもできる。
 #xxxx  
<div id="xxxx">  </div>
HTML 要素を使う場合。HTML要素定義)
 p, h1〜h6,  body, a, table, td, th, などに直接定義。
 #aaaa p  (#aaaa内の p)   #aaaa内のpを定義。
 .bbbb p クラス要素内で使われる p を定義。
 p.bbbb  p にクラス.aaaaの仕様を付加する定義。(間を空けない。)
 (HTML要素にクラス要素を付加するときは間を空けない。)
 ol ul li  ol 内の ul 内の li を定義
 
.bbbb p と p.bbbb はほぼ同じ。
   但し上位ボックスに
#aaaa p があると#aaaa p の定義が優先される。
   
また、p そのものの定義があると p そのものの定義が優先される。
---------
特殊な定義例 
  dl#aaaa dd (id 要素aaaaで修飾されたdl の下位のdd を定義)
   (idは1ページに1回しか使えない。)
   (HTML要素に id 要素を付加するときは間を空けない。)
  多数あるid要素の定義のなかの共通な部分(例えばボーダーラインなど)を
  外して、別途Class要素として定義して、使うときに組み合わせて使う。

<p>   </p>
<h1>  < /h1>
<div id="aaaa"><p>   </p></div>
<div class="bbbb"><p>   </p></div>
<p class="bbbb">   </p>




---------
特殊な定義例
<dl id="aaaa"> <dd>  </dd> </dl>
 
 
 
 
<div id="box-a" class="border-line">

要素による違い (1) クラス要素で定義した場合と、
(2) HTML要素 h1〜h6 で定義した場合と、
(3) HTML要素 p で定義した場合とでは、
相手の環境によって修飾表示結果が異なることがある。
(4) 上下のボック階層で定義がかち合った場合の優先順位は、
id要素ボックスでの定義、HTML要素そのものの定義、
クラス要素ボックスでの定義の順に優先される。
 
まとめ書きの例 いくつかの要素をまとめて定義することもできる。
 <style>.t,td,.n a,.m{color:#000}.b td,.tc{padding:0} ・・・
 1つの定義は}で終わり、1行に3千字くらい並んでいる例もある。
1つの<div>タグに複数の
クラス要素を割り付ける例。
<div class="t bt"
名前の付け方
  ボックス定義の所 を参照
 

Nvu 画面で文字列に修飾定義を割り付ける
1 まず最初に、修飾なしの文章を書いておいて、
2 次に、修飾したい文字列にカーソルを置いて
Nvu のツールバーの左の選択ボックス(上下に2つある)をクリックすると、
  p(Paragraph)、h1 (Heading1)、 h2(Heading2)、・・・、又は、ユーザー定義の「修飾定義名」が選択肢として現れるので、
  それを選んで割り付ける

3 <div>タグや行単位のHTML要素に対して、修飾定義を割り付けるのが望ましい。(ブロックの範囲がまとめて修飾される。)
  
<div>タグは、CSSで定義した id 要素又は class 要素を割り付けて使う。(1つの id 要素は、一回しか使えない。)
  <div>タグは、ツールバーの左端のボックスで Generic Container (div) を選べは設定できる。
  
<div>タグの範囲はNvuでは目には見えないので、2文字以上書いてそれに<div>タグを振り、その2文字間をEnterキーで改行して
  上下に広げる。範囲の境界はその文字が目印となる。kompoZerでは赤の枠線が表示されるので分かりやすい。

4 文字修飾の割り付けをリセットするには、ツールバーの選択ボックスでリセットする。
  (1) p, h1, h2,・・などの「修飾定義名」の場合(HTMLの規定のタグ要素の場合)は、
      文字列にカーソルを置いて
「Body Text」を選択すれば元に戻る。
  (2) ユーザー定義の「修飾定義名」の場合(ユーザー定義のクラス名の場合)は、
      文字列にカーソルを置いて
、画面下のステータスバーからタグを選択し、再度クラス名を選択すれば元に戻る。
  (3) ユーザー定義の「修飾定義名」の場合(ユーザー定義のクラス名の場合)は、
      
文字列を選択後右クリックから、「Remove All Text Syles」を選んでもリセットできる。
  (4) それでも、リセットできない場合は、ソース画面で修正する。

5 CSSで定義しない状態のHTMLの文字修飾規則はおおよそ以下の通りであるが、自分で定義するCSS定義との違いを理解しておく。
  HTMLの文字修飾の規則と、Nvuでの処理 (Nvuのメニューバーで選択して使えるもの。)
HTMLの標準文字修飾
1 一般的に、p は文章用に使われ、h1 h2 h3 h4  h5 h6 は見出し用に使われる。

2 p h1 h2・・・は上下に1行分空く。
3 h1  h2・・・は太字になる。

4  h1 h2 h3 h4  h5 h6 と小さくなる。
5 その他:メニューバーから Format / Text Style で設定できるインライン(文字単位の修飾)用のタグ。
<sub><sup><em><strong><cite><abbr><code><acronym><samp><var>
Nvuでの処理
1 Body Text はベタにつながる。
2 Variable Width は、IEでもFirefoxでも表示サイズが同じ。(HTML のデフォルトサイズ)

3 Fixed Width にすると HTMLタグは monospace となり、IEとFirefoxで表示サイズが異なる。
   

CSS エディターで修飾定義の詳細を設定する
1  CSS Editor で、各要素について、TEXTのサイズや高さや色、Bacgroundの色、Borderの線の種類や色、
  BOXでのMarginやPaddingなどを設定する。
2  CSS Editor で定義すると、同時進行で、後のメイン画面に結果が反映されるのでそれを見ながら定義する。
3 修飾結果は、設定条件の組み合わせにより異なるので、反映される画面を確認しながら設定する。  

4 文字列の先頭に余白を入れるには、Margin や Padding で左側余白を設定する。
  文字単位の修飾に使うと、折り返し時に、頭に余白が空かないので、余白をあけたいときは、
  p h1 h2 div など行単位のタグに対して使う。
5 特定範囲の中だけで有効な定義をするには、例えば [#centerbox p]などの名前で定義する。この例では、
  特定ボックス内にしているが、サイズ指定のないdivタグで挟んだ範囲でもよい。例<div id="hanni">この範囲に有効</div>
6 文字修飾定義の詳細を設定した例を以下に示す。
修飾定義の詳細設定例
1 CSS Editor によって、各クラスの、Text, Background, Borders, Box の設定を、以下のように設定した。
  .titlem    font-size: 25px; font-weight: bold; padding-left: 40px; line-height: 400%;
  .mokujim   font-size: 16px; line-height: 200%; margin-left: 10px; padding: 4px;
             border: 1px solid rgb(51, 204, 0); background-color: rgb(0, 112, 0);
  #centerbox p  (centerboxの中だけで有効なp定義)
            
font-size: 14px; line-height: 150%; margin: Top=0px Left=10px Right=10p Bottom=0px;
            (上下に空白行が入らないように、Margin は、Top=0px Bottom=0pxとした。)
            (文字列の折り返しでも、頭に余白が入るように p を使った。)
  .linkm     line-height: 150%; font-size: 14px; padding-left: 10px;
  .footerm   line-height: 150%; font-size: 12px; text-align: center; 
2 .footerm ではフッターの文字の中央寄せができない、この例の場合は、ボックスでの定義が優先される。
 例題は順番にやることにして、ボックスの定義はいじらずに、ツールバーで中央寄せした。(HTML記述になる)

  
例:文字修飾の定義の結果 ↓ 実際の例はここをクリック

      上の例のソース(青の太字部が修飾定義部)(緑の太字部はフッターの中央寄せに関する部分
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"><html lang="ja"><head>
<meta content="text/html; charset=Shift_JIS" http-equiv="content-type"><title>ee03</title>
<style type="text/css">
body { margin: 0px;
}
#winbox { background-color: rgb(153, 255, 153);
text-align: center;
}
#palletbox { margin: 0px auto;
width: 800px;
background-color: rgb(97, 153, 106);
text-align: left;
}
#upperbox { background-color: rgb(153, 255, 153);
width: 800px;
height: 120px;
background-image: url(green03.jpg);
float: left;
}
#leftbox { float: left;
width: 100px;
background-color: rgb(0, 153, 0);
}
#centerbox { background-color: rgb(255, 255, 255);
float: left;
width: 629px;
}
#rightbox { float: left;
background-color: rgb(0, 102, 0);
width: 70px;
}
#lowerbox { clear: both;
width: 800px;
background-color: rgb(194, 196, 253);
}


-- -右欄に続く---
.titlem { font-size: 25px;
font-weight: bold;
padding-left: 40px;
line-height: 400%;
color: rgb(0, 102, 0);
}
.mokujim { border: 1px solid rgb(51, 204, 0);
padding: 4px;
margin-left: 10px;
font-size: 16px;
line-height: 200%;
background-color: rgb(0, 112, 0);
color: rgb(255, 255, 255);
}
#centerbox p { margin: 0px 10px;
line-height: 150%;
font-size: 14px;
}
.linkm { line-height: 150%;
font-size: 14px;
padding-left: 10px;
color: rgb(255, 255, 255);
}
.footerm { line-height: 150%;
font-size: 12px;
text-align: center;
}
</style></head><body>
<div id="winbox"><div id="palletbox">
<div id="upperbox"><span class="titlem">題名</span><br>< /div>
<div id="leftbox"><span class="mokujim">目次1</span><br>
<span class="mokujim">目次2</span><br>
<span class="mokujim">目次3</span></div>
<div id="centerbox"><p>折り返しと改行のテスト</p>
<p>あいうえおかきくけこさしすせそたちつてとなにぬねの。 ABCDEFGHIJKLMNO  あいうえおかきくけこさしすせそ
たちつてとなにぬねの。</p>
<p>新しい行。< /p><p>新しい行。 </p><p>新しい行。 </p>< /div>
<div id="rightbox"><span class="linkm">Link1</span>
<br class="linkm"><span class="linkm">Link2</span>
<br class="linkm"><span class="linkm">Link3</span><br></div>
<div style="text-align: center;" id="lowerbox">
<span class="footerm">abcdefg</span></div>
</div></div></body></html>
 

各種CSS修飾定義の例
1 修飾例に使う、CSS修飾定義のソースは次の通りである。
<style type="text/css">
  .ss1 { border: 2px solid rgb(51, 153, 153);
    margin: 0px 10px;
    color: rgb(0, 204, 204);
    background-color: rgb(234, 255, 246);
    padding-right: 10px;
    font-size: 24px;
    padding-left: 10px;
    line-height: 150%;
    font-weight: bold;
    }
  h5 { border: 5px outset rgb(255, 255, 0);
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 50%;
    padding-right: 10px;
    padding-left: 10px;
    background-color: rgb(255, 235, 233);
    color: rgb(255, 0, 0);
    font-size: 20px;
    line-height: 150%;
    }
  .moji1 { line-height: 140%;
    font-size: 14px;
    }
  .ss2 { margin-top: 0px;
    margin-bottom: 0px;
    color: rgb(102, 255, 255);
    background-color: rgb(0, 0, 153);
    line-height: 120%;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 32px;
    font-family: times new roman;
    }

 - --右の欄に続く---
  h4 { margin: 0px 30px;
    padding-right: 10px;
    background-color: rgb(205, 255, 204);
    font-size: 8px;
    padding-left: 10px;
    }
  h6 { border-top: 1px dotted rgb(0, 102, 0);
    margin: 0px 30px;
    border-bottom-color: rgb(0, 102, 0);
    background-image: url(green03.jpg);
    background-repeat: repeat;
    font-size: 16px;
    line-height: 150%;
    padding-left: 20px;
    height: 25px;
    color: rgb(0, 102, 0);
    background-attachment: fixed;
    padding-top: 5px;
    border-bottom-style: double;
    }
  th { border: 1px solid rgb(102, 51, 255);
    background-color: rgb(255, 234, 233);
    color: rgb(255, 102, 102);
    }
   .hh6 { border-top: 1px solid rgb(0, 102, 0);
    margin: 0px 30px;
    padding: 5px 30px 1px 10px;
    border-bottom-style: double;
    border-bottom-color: rgb(0, 102, 0);
    background-image: url(green03.jpg);
    background-repeat: repeat;
    font-size: 16px;
    color: rgb(0, 102, 0);
    position: relative;
    font-weight: bold;
    line-height: 200%;
    }
</style>

2 このように、一度、文字修飾定義をしておけば、以後、文中で何箇所にも同じ修飾を使う場合は、
  修飾したい文字列にカーソルを置いて、Nvuのツールバーの左の選択ボックスから「修飾定義名」を選んで
  割り付けるだけで、簡単に文字修飾ができる。(CSSを使わないでその都度、作成していくのは大変。)
  以下に、上の CSS定義を使って修飾を割り付けた例を示す。
 
3 ss1を割り付けた例
   番号

4 「h5(Heading5)」を割り付けた例
   border の線種をoutsetに設定した。
   右端からウィンドウ枠までの余白は、Box設定で、Margin- Right=50% と設定。
浮き上がり境界線
 
5 「moji1」を割り付けた例 (設定例:文字のサイズを 14pxにして、文字の高さを140%に設定した例) 
例3例3例3
あいうえお
かきくけこ
abcde
ABCDE
  
6 「ss2」を割り付けた例 (英文に対して使った例 font-family: times new roman;)
alphabet
 
7 「 h4(Heading4) 」 を割り付けた例 (文字サイズを8pxに設定した例)
   全角スペースの文字に対して割り付けた。 

 

   
8 「 h6 (Heading6) 」 を割り付けた例 (Boxの高さを25px、上余白を5pxに設定した例。実際の縦幅は25+5pxとなる。)
    背景に画像を縦横に並べてスクロール無し(固定)に設定(background-attachment: fixed;)してみたが、
    IEでは背景画像を固定できない。IEでは「背景画像を固定する(スクロールさせない)」設定は<body>要素に対して
    しか使えない。但し背景画像の固定は、文字が読みにくくなり、違和感を与える場合もある。
    なお二重線(double)(太さ無指定)は、IEでは外側が太く表示されるが、Firefoxでは同じ太さになる。

○ 画像背景
     見出しに記号を使ってみた。記号には  □■◎●○★☆◆◇ のようなものがある。他に、♠ ♤ ♦ ♥  ♡ ♣ もある。
    
   h6 を使わないで、<span>タグに対してクラス要素(.hh6 )定義すると、 Width  Height Margin の設定ができない。 
   その例を下に示す。 
あいうえお
   この場合、背景の高さは文字の高さと Pading  Border によって決まる。 IE と Firefox では背景の高さが 2px 程度違う場合がある。
   元々同じ枠内でも文字の表示位置が、IE と Firefox では 1px 程度上下にずれる場合がある。
   以上から、<span>タグに対してクラス要素(.hh6 )で背景を定義する場合は注意が必要。
   HTML の要素でも、Width  Height Margin などの設定ができない場合もあるので実際に試してから使う。
 
   しかし、同じクラス要素( .hh6 )でも、<div>要素に対して割り付ければ次のように、Width  Height Margin の設定ができる。
あいうえお
   但し、IE と Firefox では、文字の表示位置が、 1px 程度上下にずれる場合がある。
   文字に背景を貼る場合は IE と Firefox の差が目立たないようにした方がよい。
   Border 幅と全体幅の合計の計算の仕方も前述のように違う。
   幅や高さを定義した要素には、Margin や Paddingや Border の定義はしないようにする。IE と Firefox では幅合計が違うため。
   ボーダー線種の点線は IE の方が間隔が広い。ボーダー線種の二重線は IE の場合は外側が太くなる。
   (基本的にIEとFirefoxでは表示が方方で異なる。細部にわたって微妙に違うので完全に同じ表示にすることは難しい。)
  
9 表デザインにCSSを利用した例
 
 (1) CSSを使わずに表作成機能だけで表修飾をした例を
    CSSを使う前に、CSSを使わないで、表作成機能だけで表をデザインしてみる。
    まず、表作成ボックスで、Table タブを押して、Border=0px, Spaceng=1px, Padding=0px とし、Background Color を青色にして
    表を作成する。次にできた表の上の3つのセルをマウスで選んで色アイコンで背景色を薄緑に設定。次にその下の2つのセルも
    同様に選んで、背景色を薄緑に設定。次に残りの4つのセルをマウスで選んで色アイコンで背景色を白に設定する。
    (各セルの幅は通常、最大文字数に応じて自動的に決まるようになっている。)
ああ ああ
 
 (2) CSS を使って表を修飾した例
    今度は、上と同じような表デザインを、見出し部だけCSSで設定してみる。(CSSで設定すると全ての表を一斉にデザインできる)
    まず、表作成ボックスで、Tableタブを押して、Border=1px, Spaceng=0px, Padding=0px として表を作成する。
    次に上の3つのセルをマウスで選んで、表アイコンで、Cell Style を Header(見出し)に設定する。
    次に、左の縦の列の残り3つを選んで、同様に Header(見出し)に設定する。(すでに設定したものとダブらないようにする)
    それによって、選択した各セルに< th>タグが付くのでこれを CSSで利用する。
    CSS Editorを開いて、thを定義し、Background-Colorをピンクに、文字色を赤に設定してみた。
    枠線はBorder項目で、solid、1px  にし、枠線の色を紫色に設定した。
    見出しはデフォルトで太字になるが、太字をCSSで、Font Weight=Normal(ノーマル)に設定することもできる。
いい いい

    上の例だと、枠線が重なった所が太くなってしまう。そこで、「 collapse 」を使ってこれを細く修正する。 → 参照
    「 collapse 」の指定は、NvuのCSSエディターではできないので、ソース画面から記入する。
    ついでに、 HTMLの方での表設定をできるだけやめてCSSで設定する。
table { border: 1px solid #6633ff;
  border-collapse: collapse;      ←枠線の重なりを1本にする。
  width: 600px;
  margin-right: auto;         ←左右のautoが対になって表全体が中央寄せになる。
  margin-left: auto;
  text-align: left;          ←文字が左寄せになる。
  line-height: 100%;        ←行間隔を100%にしてHTMLのデフォルト表示と同じにしてみた。
}
th { border: 1px solid #6633ff;   ←見出しのthはデフォルトで太字になる。
  background-color: #ffeae9;
  color: #ff6666;
}
td {  border: 1px solid #6633ff;
}
    のように「 collapse 」を使って指定すれば下のように一本に重なって細くなる。「 collapse 」はIEとFirefoxで機能する。
     NvuはHTMLに左寄せの設定を入れているので、これを表のAdvanced 設定で削除して、CSSで左寄せに設定した。
いい いい
    HTMLは次のように修飾がなくてすっきりする。
<table>
  <tbody>
    <tr>
      <th>い</th>
      <th>いい</th>
      <th>いい</th>
    </tr>
    <tr>
      <th>う</th>
      <td>う</td>
  ・・・・・
◆ 表を使う上での注意点
1 文字の上下に余白を空けるにはline height で設定するか、<td><th>などに上下のPadding を設定する。
2 表の線幅は、<td><th>などに対して、Border で設定する。
3 線幅をBorder で設定した分だけ、縦位置がずれる。Margin を設定したのと同じようになる。
4 Nvuの画面では、表の線幅(Border)をCSS設定で4pxなどと指定しても、1px の幅で表示される。
  ただし、ブラウザで見れば Firefox、IEとも正常に表示される。
5 Firefoxでは、 collapseで枠線を1本化すると、表の上辺は、「重なった枠線分+枠線の約半分」上にずれる。
  表の下辺は上辺が上にシフトした分が上にシフトする。
6 IEでは、 collapseで枠線を1本化すると、枠線は表の上辺に張り付く。
  表の下辺は重なった枠線分と枠線が上にシフトした分が上にシフトする。(対策はなさそう)
7 collapseで枠線を1本化すると、上記5と6から、IEとFirefoxでは縦位置が異なる。
9 collapseで枠線を1本化する場合は、ブラウザ間の縦ずれは防げないので、
  枠線幅を0〜2pxと小さくして目立たないようにする。枠線幅=0は線幅非表示。
  このズレは、何十行になっても、累積することはないので、「表1 個当たり、2〜3pxのずれ」ということで妥協する。
10 上記で、全体の縦幅を正確に出したい時は、親ボックスで縦幅を決める方法もあるが、次の問題がある。
  文字の回り込みがあると、IEの場合は、縦幅を超えた分下辺を下にシフトするが、
  Firefoxの場合は、下辺の位置は変えずに、テーブルだけが下にシフトし、下のコンテンツとオーバーラップする。
  したがって、親ボックスで縦幅を決める場合は、テキストズームをしても、回りこまないようにしておく。
  例えば、縦幅はemで指定し、全体の横幅をem指定で下辺幅とし余裕を持たせる。又は画像にする。
11 表の行に何も入っていないと、IEではその行は表示されず、Firefoxでは、Padding分の幅だけの細い行が表示される。
  そのため、一行全てを空にしない。どこかのセルに最低スペース1個を入れておく。
12 表全体の横幅を%で指定すると、テキストズームで可変幅とした場合、ブラウザの画面幅まで広がった時点で
   そこを100%として押さえられる。乱れないようにするには、emで指定する。
13 line heigth は<table>よりも<td>が優先される。

10 その他の文字修飾・文書修飾                (参考: CSS Dencitie Web Site 作成支援 TAG index ACCESS R )
  (1) リンク文字の色やアンダーラインの有無を設定するには、 a  a:link  a:visited   a:hover  a:active (並び順が重要
     (リンク全て、未訪問、訪問済み、触ったとき、押した時)などのタグ名に対してCSS定義で色やアンダーラインなどを設定する。
     未指定の場合のブラウザのデフォルト表示は下記のようになっている。
未訪問 訪問済み 触ったとき 押した時
Firfox 不変
IE6 不変 不変〜
     CSSエディターで、背景画像、枠線、Margin、 Padding  を設定することによって、表示方法をいろいろ設定することができる。
     (WidthやHeightの設定はNvu、Firefoxでは無効のようだが、MarginやPaddingを使えば枠の大きさを設定できる)
     (特定範囲内だけに限定するには[#tokuteihanni a:hover] などの定義名で定義) 
  (2) リスト形式の定義は、ul ol などのタグ名に対して CSS EditorのListsタブで設定。値としてlist -style-typeや、list-style-image 。
  (3) 上付き文字の位置に文字位置を上げるには、値として例えば、 . xxxx { vertical-align: super; } などと設定し、
     下付き文字の位置に文字位置を下げるには、値として例えば、 .xxxx { vertical-align: sub; } などと設定する。 (ソース画面で記入)
  (4) マウスポインターの形状をいろいろと変えたい場合には、値として cursor: help; などと設定する。(ソース画面で記入)
  (5) 文字間隔を指定するには、値としてletter -spacingで設定する。(ソース画面で記入) 例 p { letter-spacing: 1px; }
  (6) インデント(1 行目の字下げ幅)を指定するには、値としてtext-indentで設定する。(ソース画面で記入) 例 p { text-indent : 1em }
  (7) 印刷時に指定位置で改ページするには、
    例えば、指定位置の文字に対してh3タグを割り付けて、
     その文字の直後で改ページするには、CSSで、例えば、h3 { page-break-after: always; } などと定義する。(ソース画面で記入)
     その文字の直前で改ページするには、CSS で、例えば、h3 { page-break-before: always; } などと定義する。(ソース画面で記入)
     (<div>タグにclass定義で割り付けてもよい。例: .newpage { page-break-after: always; } )(文字はスペースでもよい)
     注意:その際、状況によっては新ページの上部が欠ける場合がある。(<div>タグなどがいろいろある場合など)
         その場合は、ブロック系の文字行を挟むとよい。(スペースだけだと欠ける場合があるので文字を書いたほうがよい。)
         非ブロック系の文字行(スペースのみでも可)を挟んでもよい。この場合はページの頭の隙間がIEとFirefoxで異なる。
         Firefoxでは、スペースのみの行は非表示になる。IEでは先頭が少し空く場合がある。これらは状況によってIEとFirefox で出方が異なる。
  (8) 修飾タグ(HTMLタグや自分で設定した名前の要素)に背景画像を付加するには
     CSSで、Backgroundに画像を設定し、BoxでWidth,Heightを設定する。これで、タグを使うと自動的に画像が出てくる。
  (9) テーブルのセルを立体化するには、CSSで td に対して、border の枠幅を2〜3pixにし、上と左を明るい色にし、右と下を暗い色にする。
     中は、backgroundで色付けするか、適当な画像を張る。
  (10) リンク文字にマウスを当てた時に、立体ボタンを浮き上げるには、a:hover に対して、上のような枠線を設定する。 
  (11) リンク文字をマウスを押し下げた時に、立体ボタンが沈みこませるには、a:active に対して、上のような枠線を設定し、
     上と左を暗い色にし、右と下を明るい色にする。
  (12) フォーム: form タグを使って、枠線を書くこともできる。 長方形の枠線は、<fieldset> タグを利用して描くこともできる。
     この枠線にかかってグループ名を入れるには    <legend> タグを使う方法もある。
  (13) 水平線:<hr>タグの注意点
     ● <hr>タグに対して、CSSで、横幅・高さ・背景色・背景画像を設定できるがIEとFirefoxでは高さが異なるので注意する。
     ● Nvuのツールバーや、メニューバーから、水平線を挿入すると、HTMLソースとして、
       <hr style="width: 100%; height: 2px;">が、自動的に挿入されてしまう。
       対策:  HTMLの設定が優先されるので、CSSで横幅・高さを設定する場合はソース画面で< hr>と書き換える。


● <hr>を使う場合、全般的に次の問題がある。
  1. <hr>では、line-height は機能しない。
  2. <hr>は、Firefoxでは、全体として、font-size の高さ分とる。
  3. <hr>は、Firefoxの場合、heightは 上下のborder 縦幅の合計より小さくはならないが、
    IEの場合は、border 縦幅を含めて、heightの縦幅内に収まる。 
  4. marginとpaddingは、IEとFirefoxでは表示が異なる。
● <hr>を使う場合に、IE6 では次の問題がある。
  1. CSS設定で、文字色を設定すると、背景色が文字色になってしまう。
  2. CSS設定で、背景色を設定しても、機能しない。
  3. DTDがStrictの場合左寄せになってしまう。(Text Alignment=Centerとすれば中央になる
  4. hr の Border 幅を設定すると、上下のボックスとの間の隙間が、EとFirefoxで表示が違う。
  5. IE では hr の Border 幅を 有る値に設定していてそれより小さく変えられない。
  6. IEでは、hr は全体として、1行分とる。
  7. IEでは、影付き(Shade)で表示されない。
● <hr>を使う場合の対策
  1. Nvuでタグを挿入した場合は、ソース画面で <hr>と書き換える。
  2. 1〜2の理由から、背景色と文字色を同じに設定する。
  3. Strict系のDTDは使わない。これは全般に言えることである。
  4. font-size に、一行分の値(1em)を与える。(便宜上、line-height は100%にする)
  5. hrの heightは、上下のborder 縦幅の合計以上にする。
  6. border 縦幅無しの場合、hrのheightは、最低1pxまで設定できる。 hrのheightが無指定だと縦幅は2pxとなる。
  7. 縦のマージンやパディングは設定しないようにする。hr は上下にそれぞれ1/2行分とるものとして使う。

  (14) CSSの機能の中には、ブラウザにより対応が異なり、表示できないものが多く、また使用状況によっても違うものも多い。
     参照: CSS リファレンス Access R CSS Reference  
     例1: 上の9の(2)の例で、CSSで表を修飾する場合に、 <table>タグに対してCSSで Paddingを(例えば 2pxくらいに)設定すると、
          Firefoxでは、表の最外枠の内側に余白が空くが、IEでは、余白は表示されない。
     例2: before after content quotes は IEでは不可など。
     
11 以上、IEとFirefoxの両方のブラウザで同じように表示されるCSSを例示してみたが、共通に表示されるCSS定義の種類は少ない。
   しかし基本的なCSS要素だけでも、画像などと組み合わせることによって、多様なデザインをすることができる。
   NvuのCSSエディターは、IE、 Firefoxの両方で共通に表示されるものだけになっているので、使いやすい。  
 


文字修飾の考え方

CSS 要素の階層と割り付け
 CSSの定義は、ID要素、HTML要素、CLASS 要素の、3階層に使い分けられる。
   (1) ID要素は、単独だけでの定義で、1ページに1回しか使えない。  例: #aaaa
   (2) HTML要素は単独としても定義できるし、ID要素に付属するHTML要素として定義することもできる。 例: #aaaa p
   (3) CLASS要素は単独としても定義できるし、ID要素に付属するCLASS要素として定義することもできる。 例: #aaaa .XXXX

   
HTML要素や CLASS要素は、ID要素に付属した場合は、まったく別の定義となる。

 ID 要素は、divタグ(ブロック又は行単位のタグ)だけに割り付けて使う。(但し1ページ1回しか使えない。)
     例:  <div id="yyyy"> </div>
 
 文字修飾定義は、 id 要素にも、HTML要素にも、定義することができる。

 フォーマット専用の CLASS要素は、divタグ(ブロック又は行単位のタグ),  HTMLタグ, spanタグ(文字単位のタグ)
  に割り付けて使える。
     例:  <div class="xxxx"> </div>   <h3 class="xxxx"> </div>   <span class="xxxx"> </div>


 上位ボックでの定義の方が下位ボックスの定義より優先される場合が多いので注意 
(重要)
    上位ボックスと下位ボックスで、HTML要素定義や修飾用クラス定義がかち合うと次の優先順位がはたらく。

    1 ID要素ボックスでの定義が、最優先される。
    2 広域でのHTML要素そのものの定義が、次に優先される。
      特にリセットCSSで最初にHTML要素をリセット定義する場合は注意が必要。
    3 同種要素のボックスの上下関係では、下位ボックスでの定義が優先される。



きれいなCSSの使い方。 
(メインテナンスや他のエディターとの連携やネット上の効率をよくするために必要。)

  −ブロック要素とインライン要素の使い分けをする

ソースコードを汚くしない

基本的には、できるだけインラインでの
文字修飾をしないことと、テーブル修飾は全てCSSで行うことである。
  
 インラインでの文字修飾とは、一行内での文字修飾である。
  メニューバーやツールバーから、「カラー、文字のサイズ、太さ、文字フォント」で修飾する方法と、CSSで定義したクラスで修飾する方法がある。
  メニューバーやツールバーから修飾する場合でも、「カラー、太文字、アンダーライン、イタリック、取り消し線(Strikethrough)<line- through>、
  文字フォント、」 で修飾する場合は、<span style ・・・>タグで修飾され、その他は、<big><small><em><strong><font size・・・>などの
  HTMLタグで修飾される。
  CSS で定義したクラスで修飾する場合は、<span class ・・・>タグで修飾される。
  また HTMLタグの修飾と<span style ・・・>タグの修飾が重なると、<big  style ・・・>や<big class ・・・>のタグとなる。
 特に、文字を <・・・  style ・・・><・・・ size・・・>タグで修飾することは、CSS定義で修飾方法を変更できないということから非常に望ましくない。
 <span class ・・・>や<big><small>強調文字<em><strong>、上付き文字・下付き文字<sup><sub>、による文字修飾は、
  CSS定義で修飾方法を変更できるが、文章中にあまり多くなるとソースコードが汚くなり、管理上修正に手間がかかる場合があるので、限定的に使う。
  このページ:は殆どが文字単位の修飾のため悪い見本である。(最初CSSを使わないで作り始めてしまい、いまさらの整形は大変なため。)
  なお、不要な <span>  タグを一括して削除するには、ステータスバーでボックスタグなどの広域タグを選択すると、
  ツールバーのクラス名ボックスにクラス名が表示される。このクラス要素名をクリックすれば、その要素が一斉に削除できる。
 Nvuの問題として、文字を移動したりコピー&ペーストするとその部分の文字修飾は新しくタグを切りなおしてしまう。
   同一タグだということは分かりそうなものだが、別のタグとして処理してしまうので、何回も修正すると、同じタグばかりどんどん増えていく。
   (これを避けるには、右クリック[Past without formatting]又は[Alt+E→O]で貼り付けるとよい。)
 インラインで文字修飾をして書いたファイルは、ソースコードが、空タグや、細切れタグばかりになって、汚くなり、
   後になってソースコードを修正する場合が出たときに、修正が非常にやりにくくなる。更にはネット上の効率も悪くなる。
   また、JavaScriptやCGI作成の段階になって、他のエディター(Aptanaなど)と連携する場合も扱いにくくなる。
 いったん作ってしまうと、自動整形が困難になる。正規表現置換で、少しは修正できるが、ほとんどは手作業となる。
   手で整形すると、間違いによるリスクが高くなる。
   Nvu上で、ひとつずつ選択して、[Past without formatting]でその上に貼り付けなおすと無駄なタグを除けるが、数が多いと大変になり、
   その後繰り返して編集していくと、また汚くなる。
 HTML でのTable 修飾は望ましくない。(CSS定義で修飾方法を変更できないため) → CSS だけで Table 修飾をする例
   Table の修飾(仕様設定)は、CSSで定義する。縦の列横の行など特別に修飾したい場合は<tr><td>に対してクラス要素を割り付ける。
 きれいなCSSの使い方をするためには次のような方法をとるとよい。
   (1) ID要素、HTML要素、に直接、文字修飾の定義を設定しておいて、
       「ブロック、行単位用」の div タグで範囲を設定し、そのdiv タグに対して、
       ID要素、HTML要素を割り付ける。
       例えば5つのボックスにそれぞれ文字修飾をする場合として、
       <div id="box1"> あ</div>い<div id="box2"><p>う</p></div>え<div id="box3">お</div>か<div id="box4">き</div>とすれば、
       文字修飾タグは一切出てこない。文字修飾はCSSファイルの、id 要素(#box1)や HTML要素で一括変更できる。
   (2) 「ブロック、行単位用」の div タグで範囲を設定し、そのdivタグに、修飾用の CLASS 要素を割り付ける。
       例 <div class="xxxx">あ</div>
   (3) <p> <h3> <ul>などの、行単位系のHTML要素タグに class 要素を割り付けて書く。  例 <p class="xxxx">  <h3 class="xxxx">  
9 Nvu で、 <div>、<p>、<h1>などのブロック系のタグに、 class 要素を割り付けるには、ステータスバーで割り付けるタグを選んでおいて、
   それに、 ツールバーでclass を割り付ければ簡単にできる。
10 ページのデザイン構成として決まっている画像にはIMG タグを使わない。
   方法としてはCSSファイルの定義で、id要素やHTML要素やclass要素に背景画像を設定する。
   CSS定義の場合、Tileの項目で don1t tile を選んで no-repeat に設定し、width と height を設定するとよい。
   HTMLファイルには、<div id="xxxx">や、<div class="xxxx">や、<li>や、<a xxx >などとして書くだけで画像が貼れる。
   (<span>タグはインライン修飾になるのであまり望ましくない) 
   注意: CSSから画像を貼る場合、<img>タグのaltに相当する代替文字(画像が出ない場合に表示される文字)は書けない。
   (ボックス内に文字を書いて、text-indent: -9999px;やdisplay: none;で見えなくする方法もあるが、見えない文字を書くのは、隠し文字として
   一般的に不正とみなされる。)ボックス内に何か文字がないと、不具合が起きる場合には全角スペースを入れる。
   参考: JPEGの画像は、画像の中の文字などシャープな輪郭がぼやけることがある。その場合は文字部はその部分だけ分割してgif 画像に
   するか、JPEGのサンプリング要素を 1X1 にした画像にする。画質100%のJPG画像は、ファイルサイズが、画質90〜95%時の2倍くらいに
   大きくなるだけでシャープにはならない。なお画像は、別のホルダーにしておく方がアクセス効率も整理上もよい。
   参考:CSSファイルで貼った画像に文字を回りこませる方法:
   入れ子のボックスにして外側のボックスにCSSで、(float: right; などと) float 設定すれば、文字の回りこみができる。
   その際に左右の隙間の設定も、外側のボックスでmarginの設定をすればできる。( float の後はclear both で閉じる)
   (IMGタグで貼った画像に文字を回りこませる場合に、ボックスで囲んでそのボックスをCSSでfloat: right;などと設定するのと同様。)
11 多数のアイコン画像は一枚の画像から切り取って(スライスして)使う方法もある。(CSS Sprite スプライト技法という)
   2008年に新しくなった米国・日本のYahoo!  のメインページでは、多数のアイコンをまとめて1枚の画像にして使っている。画像例
   参考 css sprite 使い方→ 「CSS Sprite」で画像の表示速度を高速化する [ホームページ作成] All About
   例えば、<a>タグにCSSで、縦横のサイズを設定するためにブロック化(ボックス化)して(→display: block;)
   アイコン集の画像を背景としてno-repeat で1つ設定しておき、そのタグを使う時に、
   style="background-position: 0pt -480px;"などとXY座標をそれぞれマイナス方向にシフトして必要なアイコンの絵の部分だけを表示させている。
   使うときにbackground-positionを設定したCSS要素を重ねて指定することもできる。
  例→<a href="r/c25" style="background-position: 0pt -533px;">テレビ</a> 又は <a href="r/c25" class="cbysC25">テレビ</a>
   同じようなアイコンが、多数ある場合には画像の管理が楽になる。
   ただし、決まった大きさのボックスを定義してそのボックスの背景として使う方法であって、imgタグのように画像を貼り付けるものではない。
   切り取る画像の範囲は貼り付けるボックスサイズで決まるので、範囲を合わせておく必要がある。
   リピートで利用するときは、横リピートなら縦並び、縦リピートなら横並びにしておけばよい。その場合ボックスの縦幅又は横幅を合わせておく。
   複数の画像を1枚にまとめてCSS化してくれるソフトもある。CSS を使って複数の画像を一つに「CSS Sprite Generator」
   ロールオーバーリンク6 〜CSSテクニック〜  Web 制作/CSS/TIPS/メニュー部分に画像を使う- zkdesign/Archives 
   CSS Spriteを活用しよう - DesignWalker  2007-12-02 - minorio のプログラミング・メモ        
12 枠組みにはテーブルは使わない。
   なお、ボックスのwidth、margin、padding,、borderの関係は、ブラウザと、DTDの設定と絡んで、表示が異なる。
   DTDをTransitionalのURL有りに固定すれば、IEでもFirefoxでも、デザインがしやすくなる。
   例:幅 参考:WEB 作成の豆知識 -CSSレイアウト 初級編 (3) 
   Yahoo JPYahoo US のページは以前はtableタグで細かく仕切られていたが、2008年にソースを見たら全て diiv タグで
   書かれていた。 
13 文章を書く場合は、タグ無し文字にしないで<p><h3><ul><li>< div>など行単位で折り返しできるタグを使う。
    その際は、折り返し記述にする。折り返し記述とは、文字が自動的に折り返す記述である。
    手で Enter キーを押して <br> コードを打ち込んで改行するのは望ましくない。
    折り返し方法の詳細については、→ 折り返し方法の種類 を参照。
14 以上により、HTMLソースは、div タグと最低限のHTMLタグと文字データと画像データとリンクデータだけになりすっきりする。
15 但し、見栄えやデザイン性のあるページを作るには、どうしても、インライン修飾が必要になる場合もあるので、
    理想論通りには行かない面もある。
16 注意:他のエディター(Aptanaなど)と連携する場合に、ソースコードを整形すると問題が多い。Nvuに戻って編集した場合や、
    各種ブラウザでの表示など十分な注意が必要。→整形処理方法

CSSファイルを汚くしない
きれいなCSSファイルにしないと後のメインテナンスが大変になる。
CSSファイルは他にメインテナンスが変わる場合もあるし、自分も、半年1年後になると、その時の細かいいきさつは忘れて、
他人と同じ状態になり、膨大なCSSファイルの解析は困難になる場合も予想される。自由度が高いだけにCSSファイルは汚くしない方がよい。

  名前の付け方: 一般に使われている名前で誰でもわかる用途を表す名前をつける。大文字と小文字は区別される。大文字・小文字に注意
 CSS に限っては、小文字の英語とハイフン - が無難。(アンダースコアー _ や大文字や数字も使えるがやや少数)
参考: ファイル名やプログラムでは一般にはつなぎ(接続)文字としてアンダースコア"_"が使われているが、初期のCSS2.0の仕様書ではなぜか、セレクタで使用できる文字は、英数字と"-"となっていた。CSSコマンドも - で書かれている。その後アンダースコアでもよいと改定された。CSSに限ってはハイフンを使っておいた方が無難。(CSS以外ではファイル名などアンダースコアを使っておいた方が無難。)
 → スタイルシートの基本  CSS2 (4.1.3 文字及びその大小)  変更点(CSS2.1 Appendix C 邦訳) 
注意: CSSの要素名を思いつきやでたらめに決めると、要素が増えていったときに、わからなくなったり、勘違いを起こしたりする。機能に似つかない名前をつけると、使用するたびに違和感を感じる場合もある。また、用途の分からない名前(aa01、aa02 など)は後になって分からなくなる。日本語名が混じってくるのは違和感がある。スペルミスも、後で見つけるときに具合が悪い。
インターネット辞書などでスペルチェックもしておいた方がよい。解説本、解説講座、テンプレート、実例などを参考にするとよい。

 CSS定義を行き当たりばったりで入り乱れて使うと、ID関係、定義の干渉、優先順位、などで問題が生ずる。計画的に定義した方がよい。

 一回しか使わず、固定した意味にするには、#で始まるID要素にし、汎用性のある要素には、 . で始まるクラス要素にする。
ID要素は1個しかないので、大きなファイルでもブロックの場所が特定できメインテナンスが楽になる。

 あちこちに分散して記述しないで、同じものはまとめて整理して書く。

  多数の要素の一部分だけを別途まとめて定義するのは、HTML要素のデフォルト仕様のリセットなどで使われる。ただし方々で定義すると分かりにくい面もあ るのでまとめて行う。(注:HTML要素はデフォルト状態ではブラウザによって違った仕様が割り当てられる。その為一旦全て共通仕様にリセットする方法も 行われている。ただし一律リセットには問題もある。)

 全体に機能する定義と、特定ブロックで機能する定義、を別ファイルに分けて、必要に応じて組み合わせて使うと整理が付いてメインテナンスも楽になる。
CSSファイル名の例: shell.css  global.css  forms.css  menus.css  template.css  ie6.css  ie7.css  

 できるだけ共通のファイルを使う。目的別にCSSファイルを分割しておき、使うときにそれらを引用して組み合わせて使うとよい。
HTMLの中で多数引用するには、<head></head>内に次の行を並列する。
<link rel="stylesheet" href="css/base.css" type="text/css"> 
CSSファイルの中で他のCSSファイルを引用するには、頭の部分で次のように列記する。
@import url(../css/global.css);  
@import url(../css/headers.css);   
@import url(../css/nav.css);  
@import url(../css/forms.css);

  目的別にCSS.ファイルを「フォルダ」の階層を分けて置く方法もある。サイトの内容が多くなると、1つのフォルダに沢山のファイルを置かないで、目的別 にフォルダを分けて階層化する例が多い。また共通に使う画像や、CSSファイルは、別のところにまとめる例も多い。何段も下の階層にあるHTMLファイル が、何段も上の階層に上がってから、更に別の階層に何段も降りて行った先のフォルダのCSSファイルや画像を参照している例もある。(階層構造的なサイト は、ブラウザで、「名前をつけて保存」で保存した場合に、CSSも画像も無い状態で表示される。)

 フォルダ構造、フォルダ名、CSSファイル名、要素名などは、一度決めてしまうと、後で修正するのは困難になるので、最初に全体の計画を立てて、どんな区分けをするのか、どんな名前にするか決めておくのがよい。

10 HTMLタグのデフォルト状態では、 IEの挙動は方々で変になると考えた方がよい。この問題を個々に対策すると、大変になるので、リセット用のCSS ファイルというものが公開されている。これを利用すると楽になる面もあるが問題もある。 → 最後の方の「CSSのいろいろ」参照 

    

文字修飾定義における注意事項 (まとめ)

● 「特定のボックス内だけの定義」をするには、p h1〜h6 td  th a ul ol li などのHTML要素に対して、id 要素や class 要素を組み合わせて定義する。
例: #footer p
クラス要素を使って、#footer .aaa などと組み合わせて定義することもできる。

●  文字修飾の割り付けをするには、
(1) p, h1, h2,・・に修飾定義がされている場合は、文字列にカーソルを置いて、ツールバーの左の選択ボックスから paragraph, header1,・・などを選んで割り付ける。
(2) クラス要素を割り付ける場合は、文字列を選択後、ツールバーの左の選択ボックスからクラス要素を選んで割り付ける。 

● 文字修飾の割り付けをリセットするには、ツールバーの選択ボックスでリセットする。
(1) p, h1, h2,・・の場合は、文字列にカーソルを置いて、「Body Text」を選択すれば元に戻る。
(2) クラス要素の場合は、文字列にカーソルを置いて、再度クラス名を選択すれば戻る。
(3) クラス要素の場合は、文字列を選択後、右クリックから、「Remove All Text Syles」を選んでもリセットできる。
(4) それでも、リセットできない場合は、ソース画面で修正する。

● 上位ボックでの定義の方が下位ボックスの定義より優先される場合が多いので注意。 (重要)
同じ要素の場合、上下のボックス階層で定義がかち合った場合の優先順位は、id要素ボックスでの定義、HTML要素そのものの定義、クラス要素ボックスでの定義の順に優先される。詳しくは、「CSS 要素の階層と割り付け」を参照。

● 異なる要素間でも「優先度」が生ずる。文字色、サイズなどの文字修飾の割り付けの優先度は、原則的には、外側の定義よりも、それより内側の、定義が優先されるはずであるが、定義する要素間の違いや、ボックス階層との組み合わせで必ずしもそうならず干渉して難解である。
異なる要素間の優先順位は難しいので、このページの最後に簡略的なものを示す。
Size定義などは、表の外の設定が、表の中に及ばないことが多い。 同レベルでは優先順位が干渉する場合が多い。
優先順位は簡単ではない。 凝りすぎると干渉して収拾がつかなくなる。
対策:ボックスの階層ごとの定義はシンプルにして、できるだけ干渉しないように設定し、必ずブラウザで確認する。

● 横幅を定義した要素には、Margin や Paddingや Border の定義はしない方がデザインがしやすくなる

● CSS の記述順が表示に影響する場合がある。要素や値によっても優先順位は異なり、ブラウザの種類によっても違う。

● <a> タグの記述順

   a a:link a:visited a:hover a:active 順で定義する。

● <div><p><a>などのHTMLタグ全体に、クラス要素を割付けてフォントサイズを変えることはできない

  その場合は、タグ内の一部の文字列に対して割り付ければよい。

● 全体に対してデフォルトの文字修飾定義をする場合は、<body>タグに対して文字修飾定義をする。その場合は、 Size など表の中には及ばないものもある。
ツールバーのFormat/[Page Colors ans Background]/ で[Use custom colors]を設定した場合は、bodyタグをHTMLで直接修飾するのでCSSによるbody 定義より優先される。

● 表の中に対してデフォルトの文字修飾定義を設定する場合は< table>タグや<td>タグに対して文字修飾定義をする。

● Nvu で対応しないタグを記入する場合や、Nvuで修正できない場合には、Nvuのソース画面や Insert HTML 画面で、記入・修正する。

------ブラウザによる表示の違い-- ----

● IEとFirefoxでは、デフォルトでの行間隔が異なる。IEの方が2〜3割広く空く。
行間隔は、Body Text の場合は、Line height に関係し、<p><h3><ul>など上下にスペースが空くタグの場合は、Line height と、Margin-top と Margin-bottom に関係する。デフォルトでは、Line height は約110〜120%(IEは小)に表示され、 <p><h3><ul>などのMargin-top と Margin-bottom は、タグによって異なりフォントサイズの約100〜120%に表示される。
両者のデフォルト表示の違いをなくするには、Line height と、Margin-top と Margin-bottom を設定する必要がある。 
また<h1>〜<h6>タグはIEではデフォルトで太く表示されるため、太さ: font weight を設定する必要がある。但しその時はfont size も設定しないと、太さの設定は機能しないのでそれも同時に設定する必要がある。
ブラウザによる表示の違いについては、最後の方の項目「CSSのいろいろ」を参照。

------その他------

●  p  h1 h2・・・などのHTML要素に、クラス要素を両方割り付けることもできる。
例えば<p>要素には何もCSS設定はしないで、<p>タグを使うときに、 <p class="xxxx">とクラス定義を、割り付ける。
ただし、p  h1 h2・・・などの要素を直接定義した場合とは表示が若干異なるので注意が必要。
Nvuの画面で割り付けるには、対象文字列にカーソルを置いて、ツールバーで、p やh2などを選んで、次にクラス名を選ぶ。
(割り付け順序は、HTML要素名、クラス名の順)
リセットは文字列にカーソルを置いた後、「Body Text」を選ぶか、「クラス名」を選んでリセットする。
全般に及ぶ全称セレクタ * は望ましくないとの傾向もある。全称セレクタを用いたスタイルの正規化 CSS techniques I use all the time 
全称セレクタを使ったスタイル初期化の問題点 全称セレクタでちょっと失敗 *{ margin : 0 }はもう古い!?                          

●  不要な <span class> タグを一括削除するには、

   削除したい範囲全体を選択反転させると、メニューバーのクラス名ボックスに、選択範囲に含まれているクラス名が表示される。

   この表示名をクリックすれば、選択範囲内のクラス要素が削除できる。

●  <span xxx>・・・</spn> タグを一括削除するには、テキストエディターで<span xxx>を一括削除し、

   Nvuで開き直して、一字書き換えて、保存しなおせば、対応する</spn> タグが全て消える。

------全体的な注意------

● 細切れに(文字単位で)修飾すると、ソースが修飾タグだらけになって見にくくなる。できるだけブロック単位、行単位として、CSS ファイルで修飾設定する。前記の「ソースコードを汚くしない」を参照。



   
TOP
Nvuの紹介
Nvu の使い方
一般的な使い方と注意
Nvu で始めるスタイルシート
概略編 段組(ボックス)編 修飾編
CSS
応用編
 
 
応用編 
 
 
■1 特定範囲内の修飾定義
 
1 ある範囲を定義しておいてその範囲だけに有効な修飾定義をすることができる。
  範囲は「ボックス」でも、「単なる範囲だけ」でもよい。
  但し、前述のように、上下のボックスの優先順位は上位ボックでの定義が優先される方が多いので注意。「CSS 要素の階層と割り付け
2 特定範囲内の定義をするには、まずCSSエディターで「ボックス名」又は「範囲名」を、#xxxxとid要素定義しておく。
3 次に、設定したい範囲< div id="xxxx">・・・</div>を設定する。 
    範囲を設定するには、以下の方法で設定する。
    (1)仮の文字列行を2行作り、その間に空の行を作って3行のセットを作る。
    (2)2行目の空の行にカーソルを置いて、画面上部のツールバーの左側の選択ボックスから、
       選択肢の [Generic container <div>] を選ぶと、カーソルのある行に、<div></div>タグが設定される。
    (3)上の方法で設定したdivタグに、idや classを割り付けるには2行目の空の行にカーソルを置いてから、
       ステータスバーに表示されている <div>を右クリックしてIDを割り付ける。
       (中央寄せするときは、ここで、2行目をツールバーから中央寄せにする。=中央寄せタグもdivタグのため)
    (4)2行目にカーソルを置いて、文章を書くか、ほかの所から文章をコピーしてきて張り付ける。
       すでにある表をコピーしてきて貼り付ける場合は、表全体をコピーしてきて、カーソルの位置にCtrl+Vで貼り付ける。
       表のコピー方法は、ステータスバーの< table>タグを左クリックしてCtrl +C。
    (5)1行目と3行目は必要に応じて削除する。
    (6)div の及んでいる範囲を反転表示させるには、ステータスバーンの該当する<div>タグを左クリックする。
4 次に、CSSで、「 #xxxx p 」などの名前で文字修飾定義をする。
  p  h1 h2・・・td th a ul ol などのHTML要素に対して、[#footer p]などの定義名で定義してもよいし、
  HTML要素を使わず、#footer .moji など、ユーザー定義とすることもできる。その場合別の範囲の .moji とは異なる。
5 これによって、設定した範囲内だけに有効な定義ができる。
6 表をdivタグで挟む場合に問題が起きる場合がある。     (Nvu の問題)(CSSで修飾する場合は関係ない)
   < table>< /table>タグを上下とも直接隣接して<div> </div>タグで挟むと問題が起きる場合がある。
   表全体をステータスバーで選択して、ツールバーから表全体に対して文字色や背景色やクラスの設定をする場合、
   その設定は、 <div>タグに対して設定されてしまい、表の全体設定がリセットされてしまう場合がある。
   表の外の設定(<div>タグの設定)は、表の中には及ばないので、結果的に設定ができなくなる。 
   (表全体の選択方法は、ステータスバーの<table>タグを左クリック。) 
  対策: その場合は、上の3の方法で挟んだ後、ソース画面で、divタグとtableタグの間(上か下)に何か(空のspanタグか前後の文章)を挟む。
         例  <div - - ><span></span><table - - > - - - </table></div>
  (A)divタグで囲まれた表をコピー・移動するには、  < div - -  > - - - </div>のセットでコピー・移動する必要がある。
     表の上と下を1行空けて、そこに仮に文字を書いておいて、その上下の文字を含めてマウスで選択してCtrl+C。
  (B)ツールバーから表全体に対する設定をしない場合はこれらの対策は不要だが忘れると問題になる。
  (C)別の方法として、表の中にカーソルを置いて、ツールバーから、「表設定画面」を開き、
    Tableタブを押して、Advanced Editで記入してもよい。
7 特定範囲内の修飾定義の例を示す。 
 例1: 範囲を指定するために、#example の名前を定義しておいて、 <div id=example> </div> タグで特定の範囲を囲んで、
     この範囲内だけの定義 "#example table" "#example th" "#example td"  をしてみた。 (表デザインの例)
いい いい
 例2: 上と同様に<div id=example2> </div>範囲内に、表を作り、CSSエディターで文字色と背景色と行間隔と文頭の隙間を設定した例。 
      CSSの設定を変えるだけで、各セルの設定をしなくてすむ。
Abc Abc
Abc
Def
Def
Def
 

  
■2 ステータスバーの操作方法
 Nvuの画面の下部のステータスバーから、タグの選択やタグの編集ができて非常に便利である。
   (1) Nvu の画面の文字列などに、マウスのカーソルを置いて、ステータスバーを見ると、
     その部分に適用されているタグの種類が表示される。
   (2) 上の状態でステータスバーに表示されているタグを右クリックして、 Advanced Properties を押すと、タグの詳細がわかる。
     そこで、タグの詳細を変えたり付け加えたりすることもできる。(ID を押すと、ID名を表示・選択できる)
   (3) ステータスバーに表示されているタグを左クリックすると、そのタグの効力が及んでいる範囲が反転表示される。
     この状態で、ソース画面に切り替えると、該当するタグの詳細と影響範囲がわかって便利。
   (4) div タグを挿入して要素を割り付ける方法
     div枠を作りたいところにマウスのカーソルを置いてから、画面上部のツールバーの左側の選択ボックスを開いて、
     [Generic container <div>] を選ぶと、カーソルのある行に、 <div></div>タグが挿入される。Nvuでは見えないので、
     「HTML Tags」 画面に切り替えて、DIVタグを選ぶ。KompoZer では、<div>タグの範囲が赤点線で示されるのでそこを押す。
     このdivタグに、 ID や Class を割り付けるには、ステータスバーに表示されている <div>を右クリックして割り付けることができる。
     (複数行を選択して、[Generic container <div>] を設定すると、全ての行に<div> </div>タグが入ってしまう。)
     (表を含めて設定すると、表の中の各セルに <div></div>タグが入ってしまう。)
   (5) Advanced Propertiesを押して、タグの詳細設定を見たり編集することもできる。 
   (6) タグをリセットするには、リセットしたい場所にカーソルを置き、ステータスバー上のタグを右クリックして、
     Remove tagを押す。ただしタグは複合化している事があるので、その場合は中のタグまで消えてしまう。
     上の(3) の方法で確認してからの方がよい。
     注意:間違って <body>タグを消すとNvuがクラッシュする。

 
■3 Nvu の表作成機能を使っても同じような段組デザインはできるが・・・(但し表を段組に使うのは望ましくない。)
  --- 表を段組に使うのは望ましくないが比較のために記載した。 ---
  1 表の各セルの中に背景画像を張ったり、表を作ったり、CSSで文字修飾したり、同じようにできる。
  2 表で段組をしても、CSS によるボックス作成の時と同様に、最外枠の上下左右に白い余白が空いてしまう。
    例題では、同じ対策として、CSS Editorを使って、bodyタグに対してBox定義をしてMargin をゼロに設定した。
    bodyタグは全体の一番外側にあるので、CSS定義をするだけで、一番外側にMargin=ゼロのボックスが配置される。
  3 表のメリット : 
     (1) CSS より簡単に手軽に作れる。
     (2) ブラウザ側の見方によって崩れにくく安定している。 (CSSの場合は、込み入ったことをやると崩れる場合がある。)
        (出来合いのテンプレートには、表機能で作られたテンプレートも多い。)
  4 CSSのメリット: 
     (1) HTMLコードがすっきりしてきれいになり、JavaScriptなどの後工程でソースコードを編集しやすくなる。
     (2) 同じデザインの多数のページを、共通して修正・変更ができて作業が速い。
     (3) テンプレートとして、再利用ができる。

 表機能による段組デザイン作成の概略順序
   1 一番外側に1行1列の表を作り、文字がセンターになる設定をする。
   2 その中に、右クリックで、表をインサートし、表の設定は3行3列とする。
   3 一番上の列の3つのセルを連続して選択して右クリックで結合する。(タイトル用のセル)
   4 一番下の列の3つのセルを連続して選択して右クリックで結合する。(フッター用のセル)
   5 表の各セルの背景色と、背景画像と、サイズを設定する。

 表機能によるデザイン例
 「表作成機能を使った段組」
   文字修飾をしない段階

 「表作成機能を使った段組」
   文字修飾を割付た結果  実際の例はここをクリック 


 表作成の応用
  親Tableの中に複数の子Tableや画像、子Table の中に複数の孫テーブルや画像を入れ子にして多重に配置することによって
  細かいデザインができる。
  表の中に表を入れ子にするには、目的のセルにカーソルを置いて、右クリック/Table Insert/Tableで挿入するか、
  又は、コピーした表を貼り付ける。ひな形ページに原型の表をいくつか作っておいてそれをコピーして張り付けると速い。


■4 折り返し方法の種類
 
  ブラウザで拡大縮小しても、崩れずにきれいに折り返しができるような記述が望ましい。
  (テキストズームやフォントサイズについては、CSS のいろいろ/文字のフォントサイズを参照)
 
  文字サイズの単位によってはブラウザ側で拡大縮小できる場合とできない場合がある。
  em や%の指定では、Firefox IE とも拡大縮小可能であるが、px や pt の指定では、IE6では拡大縮小できない。
  (ptは画面のドットピッチを変えた場合に大きさが変わる。)
  
  例1 id 要素や、 Class 要素で文頭の位置を指定する
    CSS定義で padding の設定をする。
    メイン画面で、ツールバーから、Generic Container (div) を選んで、タスクバーから、ID または Class を選ぶ。
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ

この例では、クラス要素のボックス<div class="shift">を左から30pxずらせて、ボックス内は左に16pxのパディングを設けた。
 
  例2 <p> タグを使って段落で行間を空ける
    <p> タグ付きにした文章の上下に1行空く。
    Enterキーで改行すると、段落が新しくなり行間が空く。
    Shift+Enterキーで改行すると、行間が空かずに改行だけする。

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。

かきくけこさしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。
 
  注意IEの場合、ボックス内で< p>タグなど行間の空くタグが、ボックスの上下に隣接していると、その間が空かずに行間が詰まってしまう。
      (行間の空かないタグや文字を介している場合はこのようなことはないが、直接隣接した場合に問題が起きる。)
      その対策として、内側に幅指定の無いボックスを入れてそのボックスの上下のMargin を1mと設定してその中に文章を書く。
      上だけに隣接している場合は、上のMarginだけを1mと設定する。
      (外ボックスでMargin = 1mを設定してもダメである。)
      別法としてボックスの上下に幅指定の無い空ボックスを入れてその上下のPaddingを1mと設定してもよい。
       
  例3 <p> タグなどに text-indentを指定して1 行目を左右にシフトする。
    CSSエディターには選択項目がないが、
ソース画面から、設定すれば、1行目を左右にシフトすることができる。
    (KompoZerではCSSエディターのGeneralタブから書き込むことができる。)
    1行目を右にシフトするにはプラスの値に設定する。 例: p { text-indent: 1em;} 
    
1行目を左にシフトするにはマイナスの値に設定する。 例: p { text-indent: -1em;} 
    全体をシフトするには、
Margin を設定する。(Paddingでも可)

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。

かきくけこさしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。 

 
  例4 「疑似要素」の「:first-letter」 を使って文頭の1文字目を修飾する。
    最初に、CSSエディターで、<p>タグや<h1〜3>タグなどに、:first-letter を付加した要素を作る。
    例 p:first-letter {  }
    次に、その要素に、フォントサイズや、太さや、カラーを定義する。
    (KompoZerの画面では、状況によっては修飾表示されない場合がある。)
    次の例は
<p>タグの文頭の1文字目を修飾した例

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。

かきくけこさしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。

■さしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。

    注意 p h3 などに適用できるが、ol などには適用できない。付加できるタグは限られている。例えばリストタグに付加しても機能しない。
        その場合は、例えば、ol ul などのリストタグの1行目を修飾したい場合は、ol p {  }  又は ul h3 {  }  などで定義して、
        1行目に p タグや h3 タグなどを付加すればよい。
        その際 margin-top   margin-bottom  font-weight などを設定しておくとよい。

    次の例では、例3と例4を組み合わせて、<h2>タグを全体的に右にMargin (Paddingでも可)でシフトして、更に、1行目を左にシフトして、
      次に1文字目の色を橙にした。
      CSS  h2 {text-indent: -1em;margin-left: 3em;font-size: 20px;font-weight: bold;}
           h2:first-letter {font-weight: inherit;color: #cc6600;}

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ

●さしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。

      上の2番目の例では、<ul><li>のリストのような感じになる。マークを書く手間はかかるがタグを外したときでも文頭がわかる。
 
  参考 「疑似要素」の「:first-line」 を使って1 行目を修飾する。
    例 p:first-line {  }   
    注意 p h3 などに適用できるが、ol などには適用できない。付加できるタグは限られている。例えばリストタグに付加しても機能しない。
        その場合は、例えば、ol ul などのリストタグの1行目を修飾したい場合は、ol p {  }  又は ul h3 {  }  などで
定義して、
        1行目に p タグや h3 タグなどを付加すればよい。

        その際 margin-top   margin-bottom  font-weight などを設定しておくとよい。

 
  例5 「 リスト要素 」を使ってリスト文を右にシフトする。
    リストには、並列列挙リスト<ul>、順序付きリスト<ol>、定義リス<dl>  の3種類がある。
    ツールバーのアイコンからリストの設定・解除ができる。
    注意 自動的にシフトする仕様になっているので、別途CSSでシフト量を設定すると、IEとFirefoxでは、表示が異なることがある。
        特に、ou ul dl に Margin-left で設定する場合に異なる事がある。その場合は、ou li  ul li  の組み合わせで li の方で設定する。
        Padding-left でうまく行く場合もある。 ただし Padding-left に -1em などのマイナスの値は不可。エラーを起こす。
        状況により異なるので、IEとFirefoxで確認しながら行うことが大切である。  
 
    (1) 並列列挙リスト<ul> <li>の例
    Shift+Enterキーで改行すると、行間が空かずに改行される。
  • あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。
  • かきくけこさしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。
頭の記号は、デフォルトでは◆だが、CSSエディターのListタブの画面で●や○や■などに設定できる。
この例では、List Style Tipe = Square に設定した。
リスト全体の上と下に1行開くが、<ul>にMarginを設定すれば変えられる。
 
リストの左右の位置を変えるには、
  ul {  list-style-image: url(xxx.gif);  margin-left: 1.6em;}
のように<ul>に左のMarginを設定すればよい。
 
  • あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。
  • かきくけこ
頭の記号は、CSSエディターで ul に対して Listタブの画面で好きな画像に設定できる。この例では、透過GIFの画像を指定した。
リスト全体の上と下に1行空くが、 ul に上下のMarginを設定すれば変えられる。(0emにすると行間が空かなくなる。)
各リスト(マークの付く行)の行間はデフォルトでは空かないが、 li に上下のMarginを設定すれば空けられる。(例では上下に0.5emを設定)
リスト全体を右にシフトするには、 ul に左のMarginを設定すればよい。
マークに対して文章を右にシフトするには、li に左のpaddingを設定すればよい。
     これと同じことが、<p>タグを使ってもできるがメリットはない。
     その方法は、p に対してPaddingで全体を右にシフトしておいて、次に、マークの画像を背景として左上に貼り付ければよい。
     マークも含めた全体のシフトはMargin で設定する。画像は左に2px上に3px余白(薄い青の部分)をつけている。

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほあいうえおかきくけこさしすせそ。

ああああ

 
    (2) 順序付きリスト<ol> <li>の例
    Shift+Enterキーで改行すると、行間が空かずに改行だけする。
  1. あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ。
  2. かきくけこさしすせそ
  3. たちつてと
  4. なにぬねの
  5. はひふへほ
    頭の数字は、CSSエディターのListタブの画面で設定できる。デフォルトでは、数字であるが、abcdにするには Lower-Alpha を選ぶ。
    リスト全体の上と下に空白行が1行開くが、<ol>に上下のMarginを設定すれば変えられる。
    リスト全体の位置を右にずらすには、ol の Margin 、IE対策としてol のPadding で数字と文字の境目をずらす。
    文をずらすには、li のPadding-left を設定。この場合 Margin-left設定するのは Firefox と IE で表示が異なるので不可。
      例5のリスト要素の注意を参照の事。
    全体の背景とボーダーラインは、ol で設定、文字部の背景とボーダーラインは li で設定。
    数字色と文字色は、ol でも li でも設定可。数字色=文字色にしかならない。
    1行おきに文字部の背景を変えるには、その行の <li> タグにクラス要素(又はp やh4 など)を割り付けてその要素の背景色を設定する。
    ul の li なのか、ol の li なのか分からないので、要素名をつけるときは、xxx ol il とする。
    リストの番号を途中から変えるには、HTMLの記述を <li value="104"> などとする。上の例の記述を次に示す。
   
---HTML---
<ol>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ。</li>
<li class="line" value="104">かきくけこさしすせそ</li>
<li>たちつてと</li>
<li class="line">なにぬねの</li>
<li>はひふへほ</li>
</ol>
---CSS---
#orikaesi .list1 ol {border-style: solid;border-color: #3333ff;
border-width: 2px 13px;background-color: #cccccc;
margin-left: 20px;padding-left: 60px;}
#orikaesi .list1 ol li {border-left: 7px solid #009900;
border-right: 7px solid #009900;background-color: #ccffff;
padding-left: 20px;color: #3333ff;font-size: 14px;}
#orikaesi .list1 ol li.line {background-color: #999900;
margin-top: 0px;margin-bottom: 0px;}
 
 
    (3) 定義リスト<dl> <dt><dd>の例
    1行目の意味を2行目で定義するするリスト形式。

    Nvuでの使い方が分かりにくいが、以下の事を覚えておけばリスト構造を崩さずに使える。
  • リスト群全体の上下に1行空く。(CSSで定義すれば変えられる。)
  • Nvuでは、ツールバーの「Definition term」のアイコンを押してONにすると最初の行が<dl><dt>と設定される。
  • 最初の行を書いた後で行末で改行すると、< dl><dd>となって頭が右にシフトする。
  • シフトした行末で改行すると<dl> <dt>となって先頭に戻る。
  • 文の途中で改行すると、並列して続く。
  • やり直すには、複数行選択してからツールバーの「Definition term」のアイコンを押すと、選択した複数の行が、<dl><dd>となる。
    次に、その中のシフトしたい行だけを選択して「Definition description」のアイコンを押す。
  • 全て解除するには、全ての行を選択して、「Definition term」のアイコンを1回押すと<dl><dt>になり、更にもう一度押すと解除される。    (「Definition description」のアイコンで解除すると分かれてしまうので注意。)
  • 1行空いて2つの群に分かれたリストを1つに群にまとめるには、後の群を選択してからマウスで前の群の末尾に移動する。
    
あいうえおの続き
かきくけこさしすせそたちつてとなにぬねのはひふへほ
かきくけこの続き
さしすせそたちつてとなにぬねのはひふへほ
CSSエディターで、<dl>のMargin を設定すれば、全体の位置を設定でき、<dd>のMargin を設定すれば、シフトする量を設定できる。
 
 

 
■5 多層重ね/絶対値配置 (Layer / Position) 

Position= relative/absolute を使って、ボックス、文字、図などの対象物を、XY座標指定で多層化して、絶対値配置することができる。この機能をレイヤー機能という。特に Layer  というコマンドがあるわけではない。 Position=absolute とすれば、自動的に多層化になり原点からの位置で決まるという意味である。
Position= relative とすれば、新しい原点がそのボックス(要素)の左上の角に設定される。

◆位置を決める場合は、文字や空白行との位置関係が、見る側の状況(DPIやテキストズームなど)でずれる場合があるので要注意。

◆ブラウザによって、margin ,padding,,border などの表示がちがうので、これを別の方法で吸収しておかないとズレる。
例えば、ボックスを4重構造にする方法もある。外側のボックスは幅を決めるボックス、その内側のボックスは幅指定無しのボーダーラインや背景を設定する ボックス、その内側に、相対原点を設定するボックス、最後に文章など対象物を入れるabsoluteのレイヤーボックスを並列して入れて置くなど。

◆レイヤー機能は、プルダウンメニューなど、多層化している各ボックスを表示させたり隠したりして切り替える時にも使われる。
CSSの :hover を使ったり、JavaScriptで、onmouseover などのイベントハンドラーを使って、各層を切り替える。

◆ CSSエディターを使って多層重ね・絶対値配置をする方法。

  1. 外側ボックスの左上を仮の原点=「相対原点」に設定する。(これに対してウィンドウの左上を絶対原点という。)
    → 外側ボックスの定義で、Position= relative と設定する。(外側ボックスは必ずしも必要ではない。)
  2. 外側ボックスの中に子ボックスを作り、この子ボックスの左上を相対原点からシフトする量を定義する。
    → 子ボックスの定義で、Position= absolute と設定することで多層化(レイヤー化)になる。
  3. 重なる位置は、IE、とFirefoxで違う場合がある。
  4. オフセット(Ooffsets)で相対原点からのシフトする量を指定する。
    オフセット(Ooffsets)のCSS記述は、 top: 30px; left: -1px; となる。値を設定しなければ、次の行の始めに移動する。
    Position= absolute にしなければ、単に位置が決まるだけで、下の層と多層化(レイヤー化)にはならない。
  5. 外側ボックスの定義で、Position= relative の定義をしないで、子ボックスをPosition= absolute とすると、全体の画面と重なる。
  6. フロート配置ではないので、親ボックス、子ボックスとも、Float= Unspecifiedと設定しておく。
  7. 親子関係で多層化した場合は親が上になる。
  8. 並列している子どうしで多層化した場合、重なっている上下の順番を変えることができる。CSSエディタでは、Z-indexの値を指定して決める。
  9. Z-indexの値は0以上の任意の整数で、数値の大きい方が上(手前)になる。
  10. 多層化した上のボックスの背景は基本的には透明であるが、背景を貼ると不透明になる。透過GIFの背景は透過部が透明になる。
  11. Firefox では、BackgorundのOpacity(透明度)を1以下の値に設定すると透けて見えるが、IEでは透明にはならないので使えない。(オパシティは1が不透明で0に近づくと透明になり0で全透明になる。)
  12. 対象物を隠すこともできる。隠すには、ボックス項目で Visibility = Hidden と設定する。
  13. 親ボックスと中の対象物のフォントサイズやラインハイトをデフォルトではなくて明示して合わせておかないとIE6の場合におかしな表示になるので注意。

◆ マウスで、レイヤー化(多層化)して移動する方法。(この方法はインラインスタイルシート設定となり望ましくない。)

  1. Position = absolute指定をした(絶対値移動)子のボックスはNvuの画面ではレイヤー状態になっていて、マウスで移動できる。
  2. 移動方法は、タスクバーで該当する<div>タグを押して選択状態にすると+印が出るのでそれをつかんで動かせば、相対原点を基準として、絶対値移動ができる。
  3. マウスで移動した場合は、HTMLで、style="left: 253px; top: 107px; position: absolute;とインラインスタイルで記述されて、CSSファイルによる記述ではないのでソースコードは汚くなり、CSSファイルでの設定とは優先順位が異なり混乱する。インラインで設定するとCSSファイルで変更できないという問題もある。
  4. Position= relativeを指定した(相対原点指定した)外側ボックス内の、ボックス、文字、図などの対象物を、タスクバーの該当するタグを押して選択してから、 Nvuの画面で、押しピンを押すことによって、多層化(レイヤー化)になる。
  5. Nvuの画面で上下の順番を変える場合は Bring to Front  Send to Back のボタンで順番を変えられる。但しCSSの設定が優先される。
  6. レイヤー化を取り消すには、タスクバーで該当する<div>タグを押して選択状態にしてから、押しピンを戻すと、<div>タグと共に取り消される。

KompoZer では、ツールバーの押しピンをデフォルトでは表示しないようになっているが、絶対値移動を、マウスや画面でHTML設定(インラインスタイル設定)として行うのは望ましくないのでその方がいいかもしれない。

◆ 実例 としてNvuで下図のようなことを試してみた。

  • 灰色の親ボックスをrelativeにして、その中のタイトル、メニュー、文章、脚注、の4つの子ボックスを多層配置した。
  • 子ボックスは4つとも、幅と高さが固定長で、位置が違うので、重なる部分はないが、形式上は多層化になっている。
  • タイトル、メニュー、脚注、の3つのボックスは背景色有り(不透明)にして、文章のボックスは背景色無し(透明)にした。
  • 例えばタイトルボックスに文章を書いていってボックスからはみ出すと、下のくと脚注のボックスに重なってくる。
  • はみ出して下に重なった場合は他の子ボックスの背景の後に隠れてしまう。
    この例の場合は、メニューボックスを一番上にしているので隠れることになるが、メニューボックスのBackgorundのOpacity(透明度)を設定しているので透けて見えている。オパシティは1が不透明で0で全透明になる。ただしIEでは半透明にならない。
  • レイヤーは見る側の状況で異なる場合があり、注意して使うのがよい。

 下図は Nvu で表示した画像である。→表示結果( IE ではこのようにはならないので使い方に注意が必要。)


  


■6 CSSメニューの作り方

マウスオーバーになったときに色が変わるメニューの作り方を示す。(このメニューをロールオーバーメニューともいう)

やり方は、a タグをdisplay: blockでボックス化し、これを float にして背景色又は背景画像を張る。
次に a タグの hover に背景色又は背景画像を張ればできる。 

CSSエディターによる設定の要点

  1. 全体を囲む親ボックスには幅指定をする。←IE での行間ズレを防ぐ目的。
  2. a タグの display を block  にする。← a タグはインライン要素なのでブロック化(ボックス化)するという意味。
  3. a タグを、float: leftにする。
  4. a タグに背景色又は背景画像を張る。
  5. a タグのwidthを設定する。
  6. a タグの下線を消す。text-decoration = non
  7. a タグに文字色を設定する。
  8. a タグの hover に背景色又は背景画像を張る。activ はIEでは作動しない場合もあるが設定するぶんにはかまわない。 
  9. float の後はclear = both のボックスで閉じる。←行間ズレを防ぐため。但し閉じるボックスは幅指定をしない。
  10. a  タグの前後や間にスベース用のボックスを設けることができる。
  11. スベース用のボックスに何も書かないと、Firefosでは縦幅が細くなるので、最低でもスペースを記入しておく。
  12. スベース用のボックスのフォントサイズ、ラインハイト、パディングの設定は、a タグの設定ととあわせる。
    上位の設定が効いている場合はそれと合わせる。
  13. 各メニューの間に仕切り線を入れる場合は、a タグのBorderの右端に solid ラインを設定する。
  14. 縦に並べる場合は、Float の指定は不要。したがって閉じるボックスも不要。
  15. 背景に画像を貼る場合は、見る側で拡大してもずれないように縦横の幅をpxで指定する。
   
---HTML---
<div class="space-l">メニュー →</div>
<a href="#aaa">テスト1</a>
<a href="#aaa">テスト2</a>
<div class="space-r"> </div>
<div class="close"></div>


---CSS---
各要素の前に、親ボックスの名前をつけて使う。(例:.menubox a )
a {float: left;display: block;width: 120px;
padding-top: 5px;padding-bottom: 5px;
border-right: 1px solid white;
background-color: #999900;
text-align: center;font-weight: bold;text-decoration: none;
color: #3333ff;}
a:hover {background-color: #ff6600;color: white;}
.space-l {float: left;width: 150px;
padding-top: 5px;padding-bottom: 5px;
border-right: 1px solid white;background-color: #ffcc99;
text-align: center;}
.space-r {float: left;width: 50px;
padding-top: 5px;padding-bottom: 5px;
background-color: #993300;
text-align: center;}
.close {clear: both;}

 次の例は、リストタグと組み合わせた例であるが、結果は同じことである。HTML記述が行単位になって見やすい面がある。
  注意: ul をlist-style-type: noneとしないと、Firefoxでリストマークが出てしまう。
      li をfloat: leftとしないと、IEで行ズレが起きてしまう。
      a の設定の内、display: block以外は<li>タグで設定してもよい。 
      各リスト間にスペース用のボックスを設けるのはIEで崩れるので不可。
  参考:リンク無しで<li>だけにhover指定をした場合、Firefoxでは変化するが、IEでは変化しないのでリンク無しは不可。
    
 
---HTML---
<div class="space-l">メニュー →</div>
<ul>
<li><a href="#bbb">テスト1</a></li>
<li><a href="#bbb">テスト2</a></li>
</ul>
<div class="space-r"> </div>
<div class="close"></div>
---CSS---
各要素の前に、親ボックスの名前をつけて使う。(例:.menubox ul )
ul { list-style-type: none;}
.menutest li {  float: left;}
a {float: left;display: block;width: 120px;
  padding-top: 5px;padding-bottom: 5px;
  border-right: 1px solid white;
  background-color: #999900;
  text-align: center;font-weight: bold;text-decoration: none;
  color: #3333ff;}
a:hover {background-color: #ff6600;color: white;}
.space-l {float: left;width: 150px;
  padding-top: 5px;padding-bottom: 5px;
  border-right: 1px solid white;background-color: #ffcc99;
  text-align: center;}
.space-r {float: left;width: 50px;
  padding-top: 5px;padding-bottom: 5px;
  background-color: #993300;
  text-align: center;}
.close {clear: both;}
 
  参考:背景に画像を使った例

参考
Web 制作/CSS/TIPS/メニュー部分に画像を使う- zkdesign/Archives
  



■7 プルダウンメニュー(ドロップダウンメニュー)の作り方

マウスを当てるとメニューのリストや案内ボックスなどを表示させる方法がある。
ただし、複雑なテクニックを使うので、あまり一般的ではないかもしれない。

限られた時間の中で多数のページを見る場合も多く、プルダウンであることに気が付かない去っていく人がいるかもしれない。あまり凝ると、埋もれてしまう可能性もある。プルダウンを使うか一見して全体がわかるようにするか見る側の状況に合わせて考えるのがいい。

プルダウンメニューをCSSファイルだけで作るには、複雑になる面があり、JavaScriptを併用して実現している場合も多い。
(参考 Yahoo!  Adobe Google Picasa ウェブ アルバム )
JavaScriptをOFFにしている人も数%はいるようである。
JavaScriptをOFFにしている人は、見るサイトによって切り替えているのかもしれない。例えばYoutube Yahoo! などではJavaScriptが必要と分かっているから(又は機能しないから)意識的にONにし、一般のサイトではOFFにしたまま見るということも考えられる。
■ IE6でJavaScriptをOFFにする方法: ツール/インターネットオプション/セキュリティーで、セキュリティーレベルを高にして「適用」ボタンを押せばOFFになる。 (カスタマイズ/スクリプト/アクティブスクリプト で確認ができる。)

● CSSだけで作る例 (IE6でJavaScriptをOFFにしても機能するもの。) (IE6の場合には別処理をして実現する。) → サンプル例

考え方:リンクタグ<a>の hoverはマウスが乗ったときに働くが、リストタグ<li>に対しても機能することを利用する。<li>にマウスが乗った時に新たにリストタグ< ul>を開かせてその時に隠れていたレイヤーを表示させればよい。但し、IE6は機能しないので、<a>の hoverが働く時に、レイヤーで隠れていた<ul>タグを表示させる。その際隠れている<ul>タグは< table>タグの中にまとめて入れておく。
IE6を別に処理する手法は、コンディショナルコメント(条件付コメント) コンディショナルコメントを利用する。下図左欄の青赤の文字部。
背景に画像を貼ることもできる。半透明の画像(アルファチャンネル付PNG)を貼ることもできるがIE6では不透明になり不可。ただし JavaScriptを使えばできるようだ。

サンプル例では、emサイズを使い IE6でも、テキストズームが利くようにした。テキストズームについては、後述の「13 CSS のいろいろ」を参照。

 
---- HTML ----
<div class="pulldown_menu">
AAAAAAA
<ul>
 <li><a href="#pulldown_menu_anchor">テスト1</a></li>
 <li><a href="#pulldown_menu_anchor">テスト2
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
  <li><a href="#pulldown_menu_anchor">サブテスト1</a>
  </li>
  <li><a href="#pulldown_menu_anchor">サブテスト2</a>
  </li>
  </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  <li><a href="#pulldown_menu_anchor">テスト3</a></li>
</ul>
<br>
<div class="pulldown_menu_clear"></div>
AAAAAAA
</div>

青はIE7と一般のブラウザの時
赤は IE6の時
----  CSS ----
.pulldown_menu {  width: 600px;
  margin-left: 20px;  margin-right: 20px;  padding-left: 10px;
  background-color: #99ffff;}
.pulldown_menu ul {  list-style-type: none;
  list-style-image: none;  list-style-position: outside;
  margin: 0;  padding: 0;}
.pulldown_menu ul li {  position: relative;  float: left;
  width: 120px;  height: 2em;  margin-right: 1px;}
.pulldown_menu ul li ul {  position: absolute;
  visibility: hidden;  overflow: hidden;
  top: 2em;  left: 0px;}
.pulldown_menu ul li ul li {  width: 118px;  height: 3em;
  border: 1px solid silver;}
.pulldown_menu ul li:hover ul {  visibility: visible;}
.pulldown_menu ul li a {  display: block;
  height: 2em;
  background-color: #996633;
  text-decoration: none;  font-weight: bold;
  text-align: center;  color: #3333ff;
  font-size: 1em;  line-height: 2em;}
.pulldown_menu ul li a:hover {  position: relative;
  background-color: #ff6666;}
.pulldown_menu ul li table {  position: absolute;
  top: 0;  left: 0;}
.pulldown_menu ul li a:hover ul {  visibility: visible;}
.pulldown_menu ul li ul li a {  background-color: #ffcc00;
  height: 3em;  line-height: 3em;}
.pulldown_menu ul li ul li a:hover {  background-color: #009900;}
.pulldown_menu_clear {  clear: both;}
サブメニューのサイズや背景をを指定しなければ親要素の仕様を引き継ぐ。

  参考
   CSS のみでプルダウンメニューを作る | CSS-EBLOG  CSS のみでプルダウンメニューを作るサンプル(縦) 
   CSS だけでプルダウンメニュー  Yahoo.com のようなマウスオーバでタブを切り替えるインターフェースをCSSで作成
   プルダウンメニューのCSS生成してくれる「Menu Builder beta v1.3」-Dig*Dag
   このサイトで紹介しているページ →  Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style  
   その中の主なプルダウンメニューの例
   Stu Nicholls dot com | various - show me some more (グラデーション背景) 
   Stu Nicholls | CSSplay | A Professional drop-down menu #11 - 3D series png transparency (半透明背景/IEのJS=Offで透明)
   Stu Nicholls | CSSplay | Return of the image maps (ポップアップ)  
   Stu Nicholls | CSSplay | A not so simple photograph gallery (サムネイル連動) 

 ● JavaScriptを利用する例 (IE6でJavaScriptをOFFにすると機能しないもの。)

onmouseover などのイベントハンドラーはJavaScriptをOFFにすると機能しないことに注意。

CSS プルダウンメニュー  [CSS] ドロップダウンメニュー - CSS - Snipplr 表示結果→  Horizontal Drop Down Menus
〜CSS テクニック〜(onmouseoverでJavaScript) カスタマイズ 〜CSSテクニック〜(JavaScript) onmouseover/JavaScript リファレンス 
第3 回 簡単なドロップダウンメニューを作る - All About 極短JavaScriptでプルダウンメニューを作る - All About

JavaScript + Ajax 実践サンプル集 - ドロップダウンメニュー 
ドロップダウンメニューの設置 ( ブログ別!作成・カスタマイズ講座 ) ドロップダウンメニュー
onmouseout 属性 onmouseover属性 HTML辞典 Rank Up Homepage[WEBデザインテクニック・メモ]

その他のメニュー例
Web デザイン フィード詳細 - Website Performance | CSS Sprite Generator CSSや JavaScriptを使った    

   Flash によるメニューの例
   Free flash templates, Free website templates at - www.flashtemplatestore.com  Free Flash Files at Flasheezy! Free Flash Templates  
   Flash Templates – Full Flash Templates - Flash Intro – Templates Box FlashVillage.com - FREE Flash Templates 
   Flash Templates – Full Flash Templates - Flash Intro – Templates Box 
   無料で Flashファイルがダウンロードできるサイトいろいろ DesignWalker  
    


 
■8 JavaScript によるその他のメニュー

プルダウンメニューや YoutubeFlickr などのスライドメニューや、サムネイルリストのスクロール、ポップアップメニューのなどの例がある。
しかしあまり一般的ではないかもしれない。複雑に凝るほど閲覧者にはわかりにくくなって、直ぐに立ち去る人もでてくるかもしれない。

参考リンク
JavaScript + Ajax 実践サンプル集 - FXスライドインメニュー  JavaScript + Ajax 実践サンプル集 - スクロール型メニュー    
JavaScript + Ajax 実践サンプル集 - ポップアップ型メニュー        
JavaScriptエフェクトで画像スライド式メニューを実装 (ImageMenu) - youmos → mootools - home  phatfusion : image menu
スライドメニュー  フローティングメニュー  メニューを固定                                      
クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」:phpspot開発日誌  →  phatfusion : image menu                Good Sleep: JavaScriptでアコーディオンメニュー  JavaScript でホームページ作成 - 5・6年生にもわかるやさしいJavaScript    
JavaScript + Ajax 実践サンプル集 - Omniスライドメニュー   JavaScript + Ajax 実践サンプル集 - Omniスライドメニュー   
イベントハンドラ  イベントハンドラ一覧  イベントハンドラをHTMLから分離する 基本サンプル - [JavaScript]All About               


■9 スタイルシート (CSS) の解説サイト
   インターネット上の解説も参考になる。
  いろいろなページを見ると具体的な参考になる。参考にしたいページを見るには、Nvuで開いて、ソース画面や、CSS Editorでみる。
  模倣は著作権上よくないが、一般的技術の参考になる。
  参考 : 学習辞典 きくちゃん Webページ作りのお勉強 TAGindex First Step eWeb CSSリファレンス CSS とはなんだろうか 
        The Web KANZAKI HTML クイックリファレンス CSS Dencitie (ステップアップ/レファレンス基礎/コラムテクニック )  
  参考 : URL入力だけで簡単にスタイルシートを表示してくれるサイト:「オンラインCSSエディタたぬきのしっぽ
        Web デザインとグラフィックの総合情報サイト - MdN Interactive 
  CSSは、あまり複雑なことをやると、ブラウザによっては、表示が見にくくなったり、場合によっては、
  本文が全く見えなくなったりするので、注意する必要がある。

  Nvuで使ってないCSSも多数あるので、ブラウザ汎用性を見ながら スタイルシートリファレンス(目的別) などを参照するとよい。

  その他 HTML 参考ページホームページ作成リファレンス HTML, XHTML, CSS, JavaScript, .htaccess の解説
  HTML/CSS チュートリアル  Web Site 作成支援  ごく簡単な HTMLの説明  HTML学習辞典  ホームページ作成ステーション
  ホームページ作成に役立つリンク集  Webページ作りのお勉強    とほほのWWW入門  HTML クイックリファレンス
  eWeb - ホームページ作成支援,Web Design ホームページ作成リファレンス/HTML, CSS, JavaScript 
  初心者のためのホームページ作り/Web for beginner ホームページ作成支援 ホームページ作成初級講座  
 

  
■10.1  デザインのいいページ作り

デザインのいいページを作るには、まず、紙の印刷物として作成して、それを元に、HTMLに落とし込むときれいで速くできるようだ。
いきなりHTMLからでは、きれいなページは作りにくい。まず画用紙に構想図を描き、印刷物にするといい。見る側に立って分りやすい構成、シンプルな構成を考える。
フォント作成、ロゴ作成、イラスト作成、写真の縮小切り取り、などが自由にできるソフトがあると便利である。
有料なら、Adobeの、 CSInDesignIllustratorPhotoshopファイヤーワークス)がある。 
フリーなら、ScribusGIMPFreeTypeXnViewなどを合わせて使う方法もある。


 
■10.2  画像が動くページ作り(Flash)

Flash を使って、トップページなどの画像を動かしたり、広告を動かしたり、アニメーションに演出を加えたり、動画配信をすることが普及して来た。

Youtube を見るために、PCに Flash Player のソフトをブラウザのプラグインとして、ダウンロードしてインストールする必要が出てきて、PCユーザー
がPCに Flash Player をクリックして組み込むようになってきた。(このプログラムはブラウザに最初から組み込まれているものではないので、自分でクリックしてダウンロード・インストールをしない限り機能しない。)
Flash を使った画像は、ネットにつながっていないと動かない部分もある。

見る側のPCに Flash Player がインストールされている前提で、これを利用して、SWF (small Web format) ファイル(拡張子.swf)を使って、画像が動くページが作れる。そのためには、Adobe Creative Suite 5 などを買って使いこなす必要がある。(単に動画をリンクするためだけならYoutubeの動画をリンクすればよいが、ページの画像を動かすとなるとそれなりの技術が必要。)

昔 JavaScript を興味本位に使って動くページや音の出るページを作ってユーザーにうるさがられたことを考えると、動くページがユーザー のためになるかどうか検討してみるのもよい。動かして全部見てもらわないうちに、ユーザーが他にいってしまう可能性もあるし、動画でも前置きが長いと他に 行ってしまうということもある。google日本版が一時、デコレーションや前面背景画像を出してきてた例もある。

広告枠で目に止めてもらいたいとか、トップページに変化を持たせて飽きさせないなどのために、Flash の効果が上がる場合もある。



■10.3  ホームページサービス選び

直接関係は関係ないが、サービス会社選びも重要である。 運営の継続性の検討も重要である。特に無料のホームページサービスの場合は、移 転したり終了した例も多い、大きいところでは、米国のyahooのgeocities、日本の楽天の infoseek(isweb ライト旧toripod)(約200万人)などの例がある。終了するときは、短期間に終了する場合もあるので、常時メインテナンスをしていないと、気がつ かづに消えてしまうこともある。移管できてもURLが変わってアクセスが少なくなることも考えられる。 米Yahoo! GeoCitiesが終了 - ITmedia News  isweb ライト、サービス終了 - スラッシュドット・ジャパン  

ホームページサービスに限らず古くなるとゴミが増えて効率が悪くなるという面もある。古いホームページサービスが消えて、また新しいホームページサービスが出てくるということもある。

【ホームページサービスの利用者数の調べかた】

例えば、google検索で、の site:geocities.jp と検索すれば、"の"という語のあるサイトが全て出てくる。
ただし、複数(数十〜数百個)のドメインを用意しておいて好きなドメインを選べるサービスもあるので、その場合は合計する必要がある。

検索例 (2010年)--(2012年)
の site:geocities.jp 750万件--830万件 (Yahooの現在の登録ドメイン)
の site:geocities.co.jp 93万件--420万件 (Yahooの以前の登録ドメイン)
の site:xrea.com 220万件--560万件
の site:web.fc2.com 130万件--970万件 
の site:sites.google.com 8万件--53万件 (ブログのようなデザインのページが多い。) 
の site:appspot.com →100万件--210万件 (googleのサービス。中の各サイトは「This Google App Engine application is temporarily over its serving quota. Please try again later.」と表示され閲覧できなかった。 ネットで調べると過負荷の障害が以前から多いらしい。)


   
■11 デザイン・テンプレート(ひな形)の利用
   レンタル素材でHPのテンプレートを借りる方法もある。 デザインの幅が広がる。
   但しデザインに凝ればこるほど、一般受けはしなくなる場合もある。大手のサイトはすっきりしたデザインも多い。
   レンタル素材:  テンプレートの素材屋 WEBデザインテンプレート集 sozai.wdcro 小技集
   レンタル素材検索サイト: 素材 NAVI 素材の森 
   死ぬまでに見ておくべきCSSデザインサイト集
   各素材ページに入る場合、利用規約の文をよく読む。 (規約文中にある「ここ」という文字をクリックして入る例もある。)



■12 ソーのス編集: 便利なエディター 
   Nvu で作った HTML、CSS
の編集、 JavaScript, PHP, Ruby などの作成には、テキストエディターや、HTMLエディターが便利である。
   エディターの開き方 : Send To フォルダーにエディターのショートカットを入れておくと開きやすい。
   エディターを使う場合は、まず、Nvuを保存して閉じてから、
エディターを立ち上げる。
 EmEditor
   (テキストエディター) 操作性がよく、色分け表示され、正規表現の検索・置換が出来るソフトが望ましい。
 参考(その他)
  (参考1:HeTeMuLu Creator タグはツールバーのアイコンをクリックして挿入するタイプ。 
   Nvuなど他で作ったファイルをHeTeMuLu Creator で開くと、各行に改行コードが追加され、約倍の行数になる。
   使用例:濃い灰色のツールバーで例えばスタイルを押す→すぐ上のブロック要素アイコン→共通属性で項目にチェック→枠から選びOK。
   使用上の注意 : 起動時に毎回Officeインストーラが起動して CD-ROMを要求される場合がある。
        対策 コントロールパネル/プログラム (アプリケーション) の追加と削除/ Microsoft Office/変更/
         /Officeのメンテナンスモード画面/「機能の追加/削除」/「Officeツール」の「HTML ソース編集」をクリック/
         /「インストールしない」に変更。
  (参考2:Homepage Managerで開く場合は、インデントが入り、画面に入るように1行のタグ内でどんどん分断改行していく、
   
分断部を修正しても、再度分断する。ブラウザ表示上は問題ないが、タグ内で改行するのは他のエディターから見ると違和感がある。
   その一方<br>の後の
行を結合して1行が非常に長くなる。これだけを使って慣れれば問題はない。 Nvuと連携すると崩れる問題もある。)
  (
参考3:Aptanaで開く場合は、データをいじることはなくそのまま表示されるので抵抗感はない。Nvuと連携しても問題がない。)
  (参考4:alphaEDIT で開く場合は、ツール/オプションで整形を無効にして、かつWYSIWYGで一度も開かない場合に限って整形は行わない。
   この場合、オプション/HTMLソースで要素名、属性名のそれぞれについて、大文字化小文字化の設定をしておくと変更ができて便利である。
   但し、保存時に改行コードは、LFとなるので、ファイル/保存時改行コード/CRLFとしてから保存する。)
  (参考5:HTML Project2 や、 ez-HTMLで開く場合は、データをいじることはなくそのまま表示される。
   なお、HTML Project2では下画面にタグ構造とタグエラーチェックが表示される。)


 Aptana 
   高度のWEBシステムを速く構築できる高機能エディターである。HTML, CSSJavaScript,Ruby,Ajaxなどの作成・編集が効率的にできる。
   日本語もOK.。
正式版「Aptana Studio」が 2007年10月29日にリリースされた。
   WYSIWYGのエディターではないが、WYSIWYGのNvu と連携することもできる。

   詳細はこちらに移動→
 ■ Aptana の使い方 設定方法
 

  
■13 CSS 設定のいろいろ
 

● <ul> <ol> のリストを左右にシフトするには、CSSのBox設定でPaddingの値を設定する。

● <p><h2><ul><ol>などの上下の隙間を設定するには、 CSSのBox設定で Margin の値を設定する。TXTのLine Heightも関係する。

● テーブルをボックスとして使うと表示が遅くなる。DIVタグのボックスでも大きなサイズになると遅くなる。いくつかのボックスに分けるといい。

● <img> タグは画像サイズの指定をした方いい。

● <div>ボックスの float の場合、それ以後の<div>ボックスや文字が全て回りこむ。これをある所でストップさせるには、<div>ボックスで、Clear both を指定する。ストップのためだけのボックスなので、幅指定無しの空ボックスにすれば見えなくなる。

● <img>タグで回り込み指定をした場合も、それ以後の<div>ボックスや文字が全て回りこむ。これをある所でストップさせるには、 ffloatの場合と同様に<div>ボックスを設けて、Clear both を指定する。<br clear="all">でもよい。

● CSS エディターで複数の外部CSSファイにリンクするには、Internal Style Sheet で新しく追加してから、Exportのボタンを押す。

● CSS ファイル内で他の外部 CSS ファイルを引用するには、@import url(xxxx.css); @import url(yyyy.css);  とする。

● フォントファミリーは、font-family: "Times New Roman",Times,serif; とすれば漢字が明朝体になるが、IE6では機能せずMS Pゴシックになる。

● CSSファイルの中に日本語のコメントを書く場合、その日本語のエンコード種類を指定するために、頭に「@charset "UTF-8";」、「@charset "Shift_JIS";」などの行を入れておけばいいが、NvuはCSSファイルの中のコメントを削除してしまうので意味がない。(指定しても、CSSファイルの中にはコメント以外に日本語が入る事はないので指定する意味が無い。)



 
■14 CSS ブラウザによる文字サイズの違い(重要)
 
━━ 問題点 ━━

  

● DPI値の問題
  • pt (ポイント)で設定された文字は、Windows画面の設定で、DPI 値を変更すると、モニターに表示されるサイズが変わる。Windoows など一般のOSの場合のデフォルトの DPI 値は 96 である。
    (但し1ドット単位でしか拡大縮小できないので、13ドット相当のptの大きさは、8%アップのDPI値=103にセットされると14ドット相当に拡大される。)
  • DPI とは、OSなどのソフト上の値で、1pt を (DPI 値割る72) ドットで表示すという意味であり、1pt = (DPI 値/72) ドット である。
  • px (ピクセル)で設定された文字は、DPIとは関係なく、1pxは液晶モニターの1ドットに対応しているのでDPI値を変えても文字のサイズは
    変わらない。DPI 値が96の場合は、1pt = (96/72)px = 1.33px となる。
  • ドット はモニターの物理的な最小単位の点で、表示サイズの基準となる。点の間隔をドットピッチという。
  • 液晶モニタの解像度は、1インチあたりのドット数である dpiで表される。(dot per inchi の略) 
    一般的な液晶モニターの解像度: dpi は、 dpi = 85〜100(dot/inch)のものが多い。
    1インチに dpi ドットあるということなので、言い換えれば、1ドットは (1/dpi) インチということになり 1dot = (1/dpi) インチ となる。
    したがって一般的な液晶モニターの1ドットは、(1/85)〜(1/100) インチということになる。(mmで表すと  0.254〜0.299mmになる。)
    ( 19インチモニターの解像度= 0.294mm   24インチモニターの解像度= 0.270 mm )
  • 以上のことからモニター上のサイズは次のようになる。
    1px =(1/dpi) インチ 
    1pt =(DPI値/72)*(1/dpi) インチ
  • ここで72という数字はどこから来たものかというと、印刷業界では、1ポイントを約(1/72)インチとして文字のサイズを決めていることによる。
  • 上の式は、1pt =(1/72)*(DPI 値/dpi) インチ と書き換えることができる。
    この式から、OS の DPI 値 を、モニターの解像度 dpi の値に合わせれば、モニター上の大きさは、理屈上は印刷業界で使う1ポイントに近い大きさになることになる。
    (ただし、文字サイズは1ドット単位でしかサイズアップできないので、13ドット相当のptは14ドット相当に拡大されるまでは拡大表示されない。)
  • 印刷業界で使うポイントは実際の長さの単位である。18世紀にフランスのフルニエがシセロの12 分の1を1ポイント(1point≒0.37597mm)とし、その後フランスのディドーが、当時のフランスの1インチを時計の目盛りのように12分割し てさらにそれを6分割したもの(つまり合計で72分割したもの)を1ポイント(1point≒0.37597mm)とし、その後アメリカで両者の中間の 1point≒0.3514mmをアメリカン・ポイントと決めてそれが普及した。現在の1インチの72分の1は、0.35278mmであるから、アメリカ ン・ポイントの1ポイントは1インチの72分の1ではないが(1/72)インチにかなり近い値である。
    ポイント - Wikipedia 文字サイズの単位
  • デフォルト状態の % や em は、ブラウザの仕様によって扱われ方が異なる。例えばIE6ではptに近い扱い方をされ、Firefoxではpxに近い扱い方をされる。また、IE6で は、デフォルト状態の % や em に限ってテキストズームされるが、Firefoxではいずれの場合もテキストズームできる。
  • pt で定義した文字は、OS側でDPI値を大きくすれば実際の文字サイズを大きくすることができるが、px で定義した文字は、OS側でDPI値を大きくしても実際の文字サイズはかわらない。高解像度のモニターで閲覧する人は、DPI値を変えて閲覧している可能 性があるので、文字のサイズをpxでデザインするか、pt でデザインするかは考える必要がある。前述のようにデフォルト状態の % や em はブラウザによって扱いが異なるということも考慮する必要がある。

● 画像のサイズ

  • 画像はpx単位で規定されるので、「1px=1ドット」単位として表示される。(1ドットはモニターの1つの点に対応する。)
  • Firefox3の問題: Firefox2からFirefox3になってテキストズームで画像も拡大表示されるようになった。画像は拡大するとぼやける。ボーダーラインの幅も同様である。デザインする側はブラウザやバージョンの違いに合わせる必要がある。

● 文字のフォントサイズは複雑である。(どの方法で指定しても最終的にはドット単位に変換して表示される。)

  • px で文字を定義した場合は、「1px =1ドット」ではあるが、文字の高さと横幅を何pxで表すかは文字のサイズと文字の種類によって異なる。
    例えば漢字の15pxと14pxは、横幅は同サイズだが文字間隔が2pxと1pxとの違いがある。
    文字が小さくなると、フォントの形が変わってくる。例えばMS Pゴシックの形状は13〜9px(10〜8pt)の小さいサイズになると別のフォントのようになる。ブログで多く表示されている文字の形のフォントをいくら調べても出てこないのは 13pxが単に画数を間引いて表示されているだけのことである。8px以下になるとつぶれてしまう。
    デフォルトの文字フォントの場合の文字の高さについて調べたら次のようになっていた。アルファベットの M と y の字を比較参考として述べる。
    16pxの場合、半角英文字のMの高さが12pxで、文字 y では下に3px伸び合計で15pxになる。
        漢字ではMの上に2px伸び下に1px伸びて合計で 15pxとなる。
        (漢字の最大縦横は15X15で漢字の間の隙間は1px)
        line-height =100%の場合は、行シフト(Mの下のラインから次行のMの下のラインまで)は、16pxとなる。
    15pxの場合、半角英文字のMの高さが11pxでyでは下に3px伸び合計で14pxになる。漢字ではMの上に1px下に1px伸び合計 13px。
        (漢字の最大縦横は13X13で漢字の間の隙間は2px)
        line-height =100%の場合は、行シフトは、15pxとなる。
    14pxの場合、半角英文字のMの高さが10pxでyでは下に3px伸び合計で13pxになる。漢字ではMの上に2px下に1px伸び合計 13px。
        (漢字の最大縦横は13X13で漢字の間の隙間は1px) 
        line-height =100%の場合は、行シフトは、IEの場合は15px、Firefoxの場合は14pxとなる。
    13pxの場合、半角英文字のMの高さが10pxでyでは下に3px伸び合計で13pxになる。漢字ではMの上に0px下に1px伸び合計 11px。
        (漢字の最大縦横は11X11で漢字の間の隙間は2px)  
        line-height =100%の場合は、行シフトは13pxとなる。
    漢字の最大サイズは12pxから2px増えるたびに縦横サイズが 11X11 13X13 15X15 17X17 と大きくなり、隙間は、偶数pxの時1px、奇数pxの時2pxになる。ひらがな、カタカナ、英字、数字は文字によって横幅や横間隔が異なる。
    例 12px 機能MMyy 13px 機能MMyy 14px 機能MMyy 15px 機能MMyy 16px 機能MMyy 17px 機能MMyy 18px 機能MMyy 
  • pt 指定は OSの DPI  (参考) の設定によって変わる。 「1pt=DPI値/72 ドット」である。
    Windoows など多くのOSの場合のデフォルトの DPI は96であるから、 1pt と指定した場合には、デフォルトのDPI =96の場合は、1pt =96/72ドットとなる。
    実際の表示はドット単位で表示するので、ptの値を変えても必ずしもそのまま文字が拡大縮小されるわけではない。ドットに変換して、小数点以下を一定の処理をして近い数値のドット数で表示する。
    デフォルトのDPI値=96の場合のptとpxの関係は次の通りである。
    12pt=16px  
    11.25pt=15px  
    10.5pt
    =14px  
    9.75pt=13px
  • em は、上位で決められたサイズの何倍になるかを決める相対的な単位で、自らはサイズを決めることができない。
    但し行シフトは、親で line-height を設定しているとそれと同じになるので注意。
    親子で0.8emを指定すると、子は親より更に小さくなる。 16px、line-height =100%の親に対して、
    0.95em (0.94)を指定すると、文字は15pxを指定した時と同じになり、行シフトは16pxになる。
    0.9em (0.88)を指定すると、文字は14pxを指定した時と同じになり、行シフトは16pxになる。
    0.8em (0.81)を指定すると、文字は13pxを指定した時と同じになり、行シフトは16pxになる。
    細かく計算すると、0.94 0.88 0.81 くらいになるが、近い値をとってくるようだ。  
  •  は、emの値を%で表しただけである。emと同様に上位で決められたサイズの何倍になるかを決める相対的な単位で、自らはサイズを決めることができない。 95%  90% 80% は、それぞれ 0.95em  0.9em 0.8em に相当する。

● テキストズームの問題
IE6
 の場合は、フォントサイズを、pxやptやそれらから派生したemや%で指定していると、ブラウザのテキストズームで文字のサイズを変えることができなくなる。画面の構造を崩したくないということで、pxやptを使う例もあるが、IE7、Firefox、Opera、 Safari、では、どの指定をしても関係なく拡大できるので、崩れないようにという意図は意味がない。まだIE6を使っている人も多く、IE6で文字を大きくして見ている人も多いようなので、pxや ptを使わないで無指定で(生の)%やemで指定する例も多い。
Yahoo!MSNGoogle、など大手のサイトはこの例である。参考:ブラウザのシェアMarket share
いずれの場合でも拡大されるという前提で前述の「折り返し方法の種類」を十分考慮した方がよい。
但しその場合(生の%やemで指定した場合)、すべていいというわけではなく次のような事が起きる。
また別のことになるが、Nvuの設定のところで述べたように、UT-8にした場合は、英数字の表示で太くなるという問題もある。
Firefox3 の問題:3になってからズームの拡大/縮小で、画像や線の幅も拡大するようになったので注意を要する。テキストズームという表現は適当ではない。ただし表示/ズーム/「文字サイズだけ変更」を ON にすればテキストズームになるが、普通の利用者はなかなか気がつかない。

● フォントを指定しない場合の問題
複雑である。IEの場合は 12pt 相当を当てはめて表示するが、Firefoxでは16px相当の大きさを割り当てるという問題がある。
IE6ではフォントを指定すると拡大できないという問題もある。
デフォルトの%やem
で指定した場合も、元のフォントサイズの指定が無いということになり同じ問題がおきる。
DPI が96の場合は問題ないが、OSの DPIを 120とかに大きくした場合にはIE6では表示が20pxと大きくなるが、Firefoxでは16pxのままで全く大きくならないという問題がある。
Yahoo!MSNGoogleはデフォルトの%やemで指定した例である。
Firefoxで見る時はブラウザの拡大機能で拡大すればよいのだが、同じタブ内ならいいが、タブが違うとその都度拡大率を設定してやる必要がある。いちいち拡大するというのも大変かもしれない。
 

━━ 対策案 ━━

 

● 無難な方法としては、無指定で%やemで指定する例が多い。
Yahoo!MSNGoogle、など大手のサイトはこの例である。ただし上述のように、FirefoxではDPIを変えてもサイズが大きくならない。FirefoxでDPIを変えるのはまれなケースと考えて必要に応じてテキストズームをしてもらうとするという方法がある。

● ptポイント)指定にすれば IEとFirefoxの違いがなくていいかというと、前述のようにIE6では拡大不能になる。そこで、基本はpt(ポイント)指定にして、IEの時だけ、生の%やem 指定にするという方法がある。
■ブラウザの不備を利用して選択させる方法である。 CSS ハック一覧 CSS ハックの利用 CSS ハック一覧 CSS ハック CSS ハック 
具体的には、CSS定義で最初に 全部が読める(要素定義の前に何も書かない)行を書き、次に、IE6以下 だけが読める行(要素定義の前に * html を付加)を書き、次に、IE7以下 だけが読める行(要素定義の前に *:first-child+html を付加)を書けばよい。(なぜか書く順番に関係ない場合もある。その場合は IE がこのバグの優先順位を上げているのかもしれない。ブラウザなどによるのかもしれないが普通は同格の場合、だいたい後が優先される。)
body { font-size:12pt;}          ←  bodyでなくて#containerなどのボックスでもよい。
* html body { font-size:100%;}      ←  *とhtmlの間にスペースを入れる例が多い。
*:first-child+html body { font-size:100%;}
新しいIEが出てきてこのバグを読んでも読まなくてもその頃は文字の拡大はできるはずだから問題ない。
コンディショナルコメントでIEの時にCSSを切り替える方法というものもある。但しMac版のIEでは不可。
■Macの場合は、Mac専用のブラウザなどに任せるという考え方もできる。
そのほかにも、次のようなハックがある。
Mac版 IE5.x だけに適用するハック
/* \*/ 〜 /**/
safariのみに適用するハック
html:\66irst-child #hack { color:#ff0000; }

● DPI の設定にも注意しておく必要がある。実際には、 DPI を大きいサイズにするといっても、段階的にしか大きくできず、一般的には、125%になる。これは13pxが16pxになるのと同じ拡大率であり、かなり 大きくなる。これと同じことはブラウザについてもいえる。ブラウザのテキストズームでは段階的にかなり大幅にしか大きくならない。
この対策としては、いちいち拡大してもらわなくてもいいように、最初からある程度大きい文字で書いておくという方法がある。
その場合はpx で指定しておいても問題は少ないかもしれない。
例えば新聞社の新聞記事asahi.com はIE6でも拡大できるが最初からかなり大きい文字サイズにしている。
しかしYahoo!MSNlivedoorなどのポータルサイトのトップページでは1ページに多数詰め込むため、13px相当の小さいフォントを使い、拡大可能にしているとの考え方もできる。個人のブログなどは、こじんまりと書きたいためか広告などを大量に詰め込むためか13pxが多い。
対策の一案としては、トップページにたくさん詰め込む場合は、13px相当の小さいサイズにして必要に応じて拡大してもらい、
リンクしていった先では、ある程度大きいサイズにしておくという方法も考えられる。

 

━━ リセット CSS/CSSフレームワーク ━━

 

● リセットCSS: ブラウザ間のデフォルト仕様をリセットするための「リセットCSS」がいろいろ公開されている。
Yahoo! UI Library: Reset CSS や blueprintcss - Google Code などが有名である。使う場合、何処をどうリセットしたしたのか分からないと反って混乱しかねない。ブラウザの違いにより必ずしもリセットはできないので使う場合はそれなりの知識が必要である。
リセットしたものは基本的に何も無い状態になっているので、改行時の行間や、文字の太さ、サイズ、リストのマーク、数字など、全てゼロから自分で設定する ものだと考えておけばよい。元をいじらないで、それを親として、その下に自分用の共通CSSを置いて上書き定義してもよい。元をそのまま使う場合は、 Nvu が書き換えないように、読み取り専用にしておくとよい。但し入っている以外のものでも互換化した方がいいものもあるし使用目的や環境によって違ってくるの で必ずしも自分の目的に合うわけではない。それらを参考にして自分用のものを作る方がいいかもしれない。
例えば、Nvu の場合、横のマージンやパディングをゼロにリセットされると、編集で横移動しなくなる場合があるので、その場合は問題のあるものを外すなどするとよい。

● CSSフレームワーク(雛形): 
同様の考え方で、共通に使えるCSSフレームワーク(雛形CSS)、CSSライブラリ、CSSテンプレート、なども、いろいろ公開されている。
Yahoo! UI Library: Reset CSS や blueprintcss - Google Code などが有名である。ただしこの種の雛形の場合、多数の要素が設定されているのでそれなりの知識がないと後で収集がつかなくなる可能性がある。問題点もあるようなので、注意しながら利用してみるのもいいかもしれない。
なぜCSSフレームワークを利用しないのか BluePrint: 噂のCSSフレームワークを使ってみた
ついに登場! CSSフレームワーク「Blueprint」 12 のCSSのフレームワーク  Yahoo! UI Library: Grids CSS 
よく使うスタイルをユーティリティ化「logicss」 よく使うスタイルをユーティリティ化「logicss」 

 

 

━━ 印刷文字サイズ ━━

 

● 印刷サイズの問題:文字サイズを生の%や em や pt で指定した場合、印刷すると文字サイズが20%とか大きく違うことがある。必ずというわけではなく何かの状況で起きることがある。 IE 、 Firefox 、ファイルの書き方、相対値で定義した横幅、 CSSハック、サイズの単位 プリンターなどによるのかもしれないので確認した方がいい。

● 印刷サイズのズレの防止方法:上記の問題の対策としては印刷時に図などで使う px で指定するといい場合がある。具体的には、CSS記述の対象となる定義行より後の行に、例えば次のように、サイズを決める定義を入れておけばプリンターの場合は次にそれを読んで上書きしてくれる。
但し同格以下の要素で IE 用CSSハックを使っている場合は、CSSハックが優先されるようなので、CSSハックより下位の要素で定義した方がよい。
例: @media print {  #aaaa { font-size: 15px;  line-height: 1.5em; }
@media printは、プリンターしか読めないので、プリンターがこれを読んだ時点で、それ以前の定義を上書きする。
なお、外部CSSファイルを一般用と印刷用別に分ける方法もある。その場合は、一般用のCSSファイルを読んだ後に、印刷用のCSSファイルとして、 media="print"と定義したファイルを読ませてそこで定義した部分だけ上書きすればよい。
例 <link rel="stylesheet" href="xxxx.css" type="text/css"> ← 一般用CSSファイルで、media="all"としてもよい。プリンターはここも読む。
   <link rel="stylesheet" href="yyyy.css" type="text/css" media="print"> ← 印刷用 CSSファイルで、プリンターしか読めない。
   プリンタは上のファイを読んでから下のファイルを読むために再定義した要素を上書きする。
   更に上のファイルにある要素を、 display:none;としてしまえば、広告用ボックスなど要素全体を無しにできる。
   プリンタ用を全く別に分けることもできる。その場合は、モニター用は、media="all"としないで、media="screen" とすればよい。

   ただし、画面で見たものとあまり違うものが印刷されると不安になる可能性もある。
print.css 印刷用CSSの作成方法  印刷時専用のスタイルシートを作る 印刷用CSSをまとめてみた 印刷用のスタイルシート設置  

  

 

━━ まとめた文字サイズの対策例 ━━

 

● 文字サイズ、テキストズーム、DPI、可変横幅、印刷ずれなどの対策をしたCSS定義を、一例として示す。

body { font-size: 12pt; }    1行目:一般のブラウザ用        注:font-size: 100%とする考え方もある。
* html body { font-size: 100%; }    2行目:IE6のブラウザ用
*:first-child + html body { font-size: 100%; }   3行目:IE7のブラウザ用
body { margin: 0px; font-family: Arial,Helvetica,sans-serif; }   4行目:この行からが一般的なCSS定義になる。
       注: font-family: Arial,Helvetica,sans-serif; はUTF-8の場合の対策であり、Shift_JIS の場合は無しにする。
#wrap { font-size: 94%; line-height: 1.5em; }      5行目:上位ボックス例えば#wrapでデフォルトのサイズを設定する。94%は、15px相当である。
@media print { #wrap { font-size: 15px; line-height: 1.5em; } }    6行目:上の94%に対応させて印刷用のサイズを15xpに設定した。
  このCSS定義で作ったページの例→ 「Aptana の使い方」


 
■15 テキストズーム時の横幅の自動調節
 

● ボックスの横幅( width )を、em で指定した場合は、テキストズームで文字を拡大された場合に画面幅は、Firefoxの場合ほぼ比例して広がる。IEの場合でもある程度比例して広がる。Yahoo!MSN、などはこの例である。 但し同じ要素内で文字サイズを 指定していると、その文字サイズに対して何文字になるかという計算になる。例えば文字サイズが13pxでwidthが70em(70文字)とした場合など。

● ボックスの横幅( width )を、em で指定して、テキストズームで自動的に変わる場合に、max-widthを設定しておくと、それ以上は広くならない。また min-width を設定しておくとそれ以上は狭くならない。IE6では機能しないが、設定しておいても問題はない。MSNのページはIE6でも同じようになるが JavaScriptを使っているためであり、JavaScriptをOFFにすると機能しない。
(上位ボックスでいろいろ指定していると広がり具合が異なる事があるかもしれない。)



 
■16  1行の文字数/行間隔/文字間隔度 はどのくらいが読みやすいか
    

【1行の文字数/行間隔】

  1. 1行の文字数が多すぎると読みにくくなる。文の構成にもよるが、改行無しで何行も連続打ちにした場合、50〜60字を超えたあたりから読みにくくなるかもしれない。
  2. そのような場合に行間隔を例えば170〜200%くらいに広くすれば読みやすくなるかもしれないのでいろいろ調節して決めるとよい。
  3. 2〜3行単位で短い行や段落区切りが入っている場合は、70〜80字くらいになってもそれほど読みにくくはならないかもしれない。
  4. 行間隔は、一般的には130〜170%くらいが多いようだ。あまり大きく空け過ぎても読みにくい場合もある。
  5. 1行の文字数が20〜15字よりも少なくなると読みにくい場合もある。
  6. テキストズームしても1行の文字数が変わらないようにするには、Widthをemで設定するとよい。
 
【文字間隔設定】
  1. 文字間隔設定で1pxなどとすると、文字のサイズや文の構成にもよるが、読みやすくなる場合もあるし読みにくくなる場合もある。いろいろ試してみて決めるとよい。一般的には文字間隔設定はしない方が多いようだ。
  2. 文字間隔設定をしない場合、文字のサイズによって、表示文字間隔が異なる。漢字の15pxと 14pxはサイズは同じだが表示文字間隔が2pxと1pxと違う。 13pxはサイズが小さくなるが漢字の表示文字間隔が2px、16pxはサイズが大きいのに漢字の表示文字間隔が1pxと小さくなるので文字間隔が詰まった感じがする。
    このため、16pxは文字間隔が詰まった感じがし、13xは文字が小さくても文字間隔が少しあいて読みやすくなるようだ。
    ひらがななどの場合は、MSPゴシックの場合、漢字で2pxの表示文字間隔が1pxになることがある。
  3. 表示文字間隔は、テキストズームによっても変わってくる。テキストズームで文字サイズを大きくすると、一般的には表示文字間隔は 2px、3pxと大きくなっていく。ただし、元のサイズによっては、テキストズームで文字サイズが16pxくらいになることがありその場合は、表示文字間隔が1pxと小さくなるようだ。
  4. 漢字だけの文では、文字間隔設定を1pxなどとすると文字間隔設定をしない場合の文字間隔に加えてさらに1px間隔が広がるので読みやすくなるかもしれない。
  5. NvuのCSSエディターでは文字間隔設定項目はないので、Source画面から「letter-spacing: 1px;」などと書き込む。KzのCSSエディターではGeneralの画面から書き込むことができる。 
  6. 「letter-spacing: 0.5px;」だと「1文字毎に」1px、2pxなどと表示文字間隔が変わる。割り切れないので2文字分いったところで帳尻を合わせている。整数に設定すべきである。
 
【段落間隔】
  1. <p>タグの段落区切りでの上下の間隔は、上下のMarginの大きい方で決まるが、上下のMarginがそれぞれ、0.4〜1.5em くらいがよくみかける。
 
【注意点】

● 改行タグ<br>だけの空白行も、文字があるとして行間隔が同じ比率で広がることに注意。間隔を固定pxで固定するには、縦幅の決 まっている空の<div>タグをはさめばよい。昔Dreamweaverがよくやっていたようにスペーサー用画像を置いてもいいが、CSSの 時代に HTML 内にそのページ特有の情報以外の画像を置くのは望ましくない。(<div>タグならHTMLをいじらなくてCSSを変えるだけでデザインを変 えられるという意味である。)

● 既に述べたが、<h1>〜<h6><p><ul>などに限らず、HTMLタグをデフォルトで使うと、お任 せとなり、ブラウザが勝手に値を決めるので、ブラウザによって、文字の大きさ・文字の太さ・文字間隔・その他いろいろの面で違いが出てくる。特に、IEは 方々で挙動が異なる。
例えば、フォントファミリーが違うと、デフォルトのline-heightがIEで違うなど、思いもよらないことが起きる。ほとんどのタグについてグロー バルCSSファイルで規定したつもりでも、新しい事象や組み合わせで何が起きるか分からない。<p>タグのline-heightの違いもそ の例である。必ず各種ブラウザでのチェックをする方がよい。
日ごろから表示を合わせる心がけをしていないと、崩れた時の解決に時間がかかる。無闇にいろいろなタグやフォントやCSSコマンドを使わず素性の分かったものだけ使うというのも手である。

● フォントサイズ/ラインハイトの設定例

   例えば 日本語の場合は  13〜16px / 150%、 英文の場合は  Arial 13px / 120% としている例をよく見かける。

 
【事例】
  1. Wikipedia(WYSIWYG - Wikipedia)は、文字サイズ=15px、Lineheight=150% くらいになっていて、1行の文字数は伸ばせば 70字くらいまで伸びる。
    <p>タグの段落区切りでの上下の間隔は、上下のMarginがそれぞれ、0.4emくらいで、行の間に0.4emくらいの間隔が空いている。
  2. asahi.com は、 文字サイズ=16px、Lineheight=150% くらいになっていて、1行の文字数は伸ばせば60字近くまで伸びる。
    <p>タグの段落区切りでの上下の間隔は、上下のMarginがそれぞれ、1emくらいで、行の間に1emくらいの間隔が空いている。
  3. Blog で小さい文字の例としては、文字サイズ=13px、Lineheight=140〜150% くらいで、1行の文字数は40字前後で、
    <p>タグの段落区切りでの上下の間隔は、上下のMarginがそれぞれ、1〜1.2emくらいの例がある。
 

 
■17  HTML/CSS の優先度
    
     CSSを使っていると、HTMLの設定と時々干渉してわけが分からなくなるので、その時はソースコードを見て優先順位をチェックする。
     (CSSをむやみに多重に複雑にすると、干渉したときに収集がつかなくなる可能性があるのでできるだけシンプルにした方がよい。)
 
優先度上の方が優先度が上位
  表の外での設定 表への影響 表の中での設定
フォントサイズ、色系
 font-size:
 color:
特殊定義: p#midashi, a#xxxx,  dl#midashi dd
 HTML タグを直接を直接設定
   <a div id="xxxx">など。
 設定タグの外側の設定より優先される。
 Nvuでは外側内側の区別操作が難しい。
 設定した場所が分散してわかりにくい。
 
  HTML で、 table td  th を直接設定
   <span class="xxxx">
ただし外側で設定したのと同じtable系のタグの設定は無効。
CSS で div範囲のTableタグのsize を設定
 定義例: #AAA table { font-size: xxxx }
(有) 表の外で設定したと同じtable 系のタグの設定は無効
その内側のタグの設定は有効。例えば<tr> <td>で設定。
Nvuでは時々干渉する場合があるのでその時は、
ソースコードの<table xxx>などをチェックする。
CSS で Table タグの sizeを設定 表の外で設定したと同じ table系のタグの設定は有効
CSS で Table タグの colorを設定 表の外で設定したと同じ table系のタグの設定は有効
  <span  class="xxxx">で color を設定  
  CSSで div範囲のcolorを設定  
LINK 仕様系<a> CSSで div範囲のLink仕様を設定  
  CSSで bodyのLink仕様を設定  
  CSSで Link仕様を設定(HTML設定より上位)  
HTML でLink仕様を設定
Background Color 系  HTML でbodyのcolor background-color
を設定(CSS設定より上位)
 
  CSSで bodyのcolor background-color
を設定
 
その他     CSS で、dt の Size Color を定義
      CSS で、table の Size Color を定義
フォントサイズ系 CSS で、div範囲のsizeを定義  
  CSS で、body範囲のsizeを定義
 



TOP
Nvuの紹介
Nvu の使い方
一般的な使い方と注意
Nvu で始めるスタイルシート
概略編 段組(ボックス)編 修飾編
CSS
応用編

 Nvu歴史 2003年9月 Daniel Glazman が、孤児になったMozilla  Composer の開発を継続したいと発表。Daniel は、2000年 11月から 2003年 7月の間 Netscape で開発を担当していた。
2003年10月29日 Lindows(後のLinspire)のMichael Robertson (MP3.com の創設者)は、Nvu の開発で  Daniel Glazman と契約したと発表
2004年12月2日 Nvu1.0βがリリースされた
2005年6月30日 最終バージョンの Nvu 1.0 がリリースされた。 えむもじら
2006年9月15日 Daniel Glazman がNvuの開発を終了宣言した。
2006年07月.23日 使い勝手をよくしたKompoZerが出た。
2007年08月30日 KompoZer Ver0.7.10が出て、かなりの変更が行われた。
2009年02月13日 KompoZer 0.8a1 が出た。
2009年04月06日 KompoZer 0.8a2 がでた。



2010.xx.xx=54341
From 2005.03.07 
2006.04.06=5850
2007.11.22=21624