html & css 試行錯誤文字について

文字について

文字について：にゃんたろうは文字の表現について詳しくはありません（当然ですね！）が、大きさ、形、くらいは異なったものがあることは理解してます。もう、色をつける事もできます。後バリエーションは沢山あると思いますが、これもUAとの絡みがあるのであまり凝ってもしかたがないと思います。（諦めるのではない、試行錯誤する事は大切、最初からはあまり細かく取り扱ってもしかたがないということです。）

まず css ファイルを作成しましょう。文字に関することですので、その項目を書いて行きましょう、また ”body ”関連もシンプルにしてしまいましょう最小必要な項目のみ記入しましょう、構成は後で変更する事が可能です。本来は最終の構成が決められる筈ですが、それは最初は（にゃんたろうが試行錯誤する時は変化を与える項目が多過ぎると混乱したからです残念！）簡単な方がいいでせう。
いつものように前置きが長い、さっさとやらんかい！

ということで、唐突に css ファイルです拝！

body {   /*  body 部分の 設定 文字 と 背景                 */
        color: #000000;                 /* 文字色 黒       */
        background-color: #ffffff;      /* 背景色 白   */
/*    周りの設定 と line-height 重要                       */
        margin-top: 2%;
        margin-bottom: 1%;
        margin-left: 5%;
        margin-right: 5%;

        padding-top:10px;
        padding-right:5px;
        padding-left:5px;
        padding-bottom:10px;
        border-width: 3px 3px 3px 3px;
        border-color: #88fbcb;
        border-style: inset;
	font-size: 1.03em;
        line-height: 1.2em;
}
.font1{
font-family :italic; font-size: 2.03em;
}
.font2{
font-family :sans-serif; font-size: 2.03em;
}
.font3{
font-family :cursive; font-size: 2.03em;
}
.font4{
font-family :fantasy; font-size: 2.03em;
}
.font5{
font-family :monospace; font-size: 2.03em;
}
.font6{
font-family :fantasy; font-style : italic; font-size: 1.23em;
color :#ff0000;
}
.font7{
font-family :fantasy; font-style : italic; font-size: 1.53em;
color :#ff00ff; font-weight : 800;
}

大層な物になってしまって申しわけありませんね。続いて html ファイルの <body> と </body> の中身の部分は以下の様です。前回の物に追記しました。

<body>
私のなまえは <span class="font6">にゃんたろう </span>
と申します。父は阿波のにゃん三郎してかかさんの
名は<span class="font7">にゃん御寮人</span>
ともうしそうろう。ほんまかいな？嘘わかってまんがな。
<p class="font1">abcdef VWXYZ  2.03em :italic</p>
<p class="font2">abcdef VWXYZ  2.03em :sans-serif</p>
<p class="font3">abcdef VWXYZ  2.03em :cursive</p>
<p class="font4">abcdef VWXYZ  2.03em :fantasy</p>
<p class="font5">abcdef VWXYZ  2.03em :monospace</p>
</body>

後は上記の内容に加味して css を見る場所を変更して保存する

UAで見てみましょう。

サンプルはここいらにあります。お戻りは UA の戻るでお願いします

どうですか？文字の変化がわかりますか？内容は見ての通りです。ぶっちゃげた話、身も蓋もないことで、申し訳ないのですが、そういうことです。基本的に外部の初期条件を css ファイルの body の所で記述しそれに対して追加条件をピリオドから始まる一連の場所に追記しそれを html ファイルの中の印で区別してあるということです。現在まで <span> とか <p> とかの印を説明なしで使用していますが、あまり気にしないで印の一種と考えておいて下さい。文字の指定には沢山のオプションがあるようですし、全てのUAが指示の通り表示してくれないようです、従って何処まで考慮しておくかは一概にはいえないのですが、大きさ、色、くらいと後文字の調子？いいかたがおかしいですね、例えば斜体にすることや、文字の太さでなんらかの意味を持たせるような場合の選択項目として採用する、但し一つの文字の一連の並びでは種類の絞りこみを行っておくほうが良いと考えられます。今回参考用として色々 css で記述してますが、使用する時にかえって混乱する場合があると思います。あくまで参考という事で見ておいて下さい。

以上文字についてみてきましたが後はこれを当てはめてゆくだけです、下線を引いたり色を変えたり大きさを変えたり出来るはずです。当然説明無しで印を使っていますがこれらはネットワークの世界で検索すれば沢山ありますまた質も大変良い物が沢山沢山あります。にゃんたろうの考えでは基本が理解できたら後はその項目をネットワークで探して適応してみてなんぼの世界だと思ってます。ここでどのUAのどのバージョンにはどれが対応して、どれが対応していないの項目を記載するつもりも能力もありません。基本だけ抑えて作成していきたいと思います。少なくともここまで理解された方は今までの css と html を元に文字を並べて表示することが曲がりなりにもでけるようになっているはずです。

実際に異なる (UA)で見た例を提示しておきます、画像が重くてごめんなさい、まず和ジラでのもの mozilla-img
続いて藍鋳（他の UA）のもの xp-img
何で一方は日本語があるのに一方はないのというのは野暮です要するに繰り言です、何回もいいますが（UA）の相違で和ジラを日本語に適用すると文字の変化は英文の所は変化しません全て同じになりますしたがって実際の css は和ジラの場合は html ファイルを日本語対応でなく以下の部分
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
を en にして見た例です <html lang="ja"> を <html lang="en"> にわざわざ変更してみた例です、いやーーほんとに css て面白いですねという台詞いってみたいがそうは行きませんね。この場合は観畔蘇麸徒（ミクロソフト）の完勝ですねというかこちらに字母が無いだけかもわかりませんが？？なければみえないわさ！まあそういうことです

次は文字のまとまりと、まとまりの中の一部分を扱う事にします。プっチンプリンです（にゃんたろうは理解できないセリフです）。

戻る

文字 について

文字について