ここではFTTで使用しているタグやスタイルシート、ハム島でのいろいろな工夫を公開します
HP作りなどで参考にしてください
【基本】
<html>
<head>
<title>ページの名前をいれる</title>
</head>
<body bgcolor="背景の色" text="文字の色">
この間にいろいろ記事を書きます
改行は<br>です
</body>
</html>
【文字の大きさ】
大きさの指定は2種類あります
フォントサイズでの指定
<Font Size="ここに半角で数字を入れる">ここに記事を書く、この間がその文字の大きさの指定で表示されます</font>
例
フォントサイズ1
フォントサイズ2
フォントサイズ3
フォントサイズ4
フォントサイズ5
フォントサイズ6
フォントサイズ7
こんなふうにかえられます
題名や強調したいときに大きい文字にしてみてください
あんまり小さくても読みにくいので、3くらいがちょうどいいようです
7以上は同じ大きさになっちゃうようです
FTTのコンテンツページで使ってるのはピクセル指定です
フォントサイズの指定より微妙な大きさが指定できます
これはスタイルシートの指定です
<span style="font-size:ここに半角で数字を入れるpx">ここに記事を書く、この間がその文字の大きさの指定になります</span>
1ピクセル←1ピクセル
2ピクセル>←2ピクセル
3ピクセル>←3ピクセル
4ピクセル>←4ピクセル
5ピクセル←5ピクセル
6ピクセル>←6ピクセル
ここまではなんだかありさんの文字かと思っちゃうので小さすぎはよめません
7ピクセル>←7ピクセル
8ピクセル>←8ピクセル
9ピクセル←9ピクセル
10ピクセル←10ピクセル
11ピクセル←11ピクセル
12ピクセル←12ピクセル
13ピクセル←13ピクセル
14ピクセル←14ピクセル
15ピクセル←15ピクセル
16ピクセル←16ピクセル=ここでちょうど表示文字サイズ中のときのフォントサイズ3ですね
17ピクセル←17ピクセル
18ピクセル>←18ピクセル
19ピクセル>←19ピクセル
20ピクセル>←20ピクセル
このへんでちょっと数字飛ばします
25ピクセル←25ピクセル
30ピクセル>←30ピクセル
40ピクセル>←40ピクセル
50ピクセル>←50ピクセル
70ピクセル←70ピクセル
100ピクセル←100ピクセル
ピクセル指定だと無限に大きくできるっぽいです。これ書きながらこの先も作ったんですが一文字でスクロールするはめになったので
ここにはここまでということで
試したい人はご自分でやってみてください^^;
【行の間隔】
読みやすさに、行間隔があります
ここのコンテンツは文字の大きさと行間隔を指定しています
タグはスタイルシートでいれてあります
<p style="line-height:ここに半角数字で行間を指定するpx">
ここに記事を書く</p>
この文章は
行間をまったく
指定していません。
参考にしてね
この文章は
20ピクセルの
行間を取っています。
参考にしてね
この文章は
30ピクセルの
行間を取っています。
参考にしてね
この文章は
40ピクセルの
行間を取っています。
参考にしてね
この文章は
50ピクセルの
行間を取っています。
参考にしてね
どうですか?読みやすさとかで、いろんな行間を指定してみてください。
もちろん文字の大きさとかでも変えてみてくださいね。
【リンクタグ】
ほかのページに変わるのを「リンク」といいます
ここでは3種類のリンクの方法を紹介します
・普通(同窓)でリンクする=ページが増えないで新しいページに変わる
<A Href="ここに変わるページのURLを入れる">変わる先のページの名前</A>
・別窓でリンクする=今までのページが消えないで新しいページが追加で出る
<A Href="ここに変わるページのURLを入れる" Target="_blank"></a>変わる先のページの名前</A>
・同じページ内でほかのページを表示するリンクをインラインフレームといいます。
大きさやスクロール、境界線など指定ができます。
FTTのTOPや番外リンクなどにこれを使っています。
<iframe src="同じページ内に表示させたい別のページ" width="幅" height="高さ" Frameborder="no(これはフレーム境界線無しといういみ)" Scrolling="no(スクロールの有無、これはオートといういみ">ここにインライン未対応の場合の文字を入れることもできます</iframe>
《参考》
name="a" …インラインフレームの名称
frameborder="auto"… フレーム境界線の有無(yes,no,auto,1,0)
bordercolor="0000ff"… 境界線の色
scrolling="auto" …スクロールの有無(yes,no,auto)
marginwidth="50"… フレーム内の左右マージン(ピクセル数)
marginheight="50"… フレーム内の上下マージン(ピクセル数)
width="200" …インラインフレームの横幅を指定
height="100%"… インラインフレームの高さを指定
align="left"… フレームに回り込む要素(テキストや画像など)の位置(top,middle,bottom,left,right)
FTTで使ってませんが小技として
お客さんが前に見たページにリンクすることもできます
<a
href="javascript:history.back()">ここクリックで元のページに戻ります</a>
サンプルを試してみてください
ここクリックで元のページに戻ります
【文字の色】
文字の色はカラーコードか色の英語名で表示します
タグは<font color="ここに色名かカラーコードの数字を入れる">ここにその色で書きたい文字をいれる</font>
black=くろ
red=あか
green=みどり
yellow=きいろ
orange=オレンジ
white=白←白です、ドラッグしたら見えますよ^^
フリチャで使ってるのは下の色です。ほかにもいっぱいあるので好きな色を使ってみましょう
この色名とかカラーコードは背景にも同じように使えます
ここには両方書いておきましたが、どっちかで指定できます
#000000,black
#ff0000,red
#00ff00,green
#0000ff,blue
#ffff00,yellow
#ffa500,orange
#ff8c00,darkorange
#ff4500,orangered
#da0b00,darkbrown
#ff00ff,magenta
#ff69b4,hotpink
#ff1493,deeppink
#8686ea,cresblue←これは勝手に名前をつけたのでこの色名ではでません、コードで指定で使えます
#00bfff,deepskyblue
#ee82ee,violet
#ba55d3,mediumorchid
#00ced1,darkturquoise
#1e90ff,dodgerblue
#0000cd,mediumblue
#9400d3,darkviolet
#5f9ea0,cadetblue
#20b2aa,lightseagreen
#008b8b,darkcyan
#228b22,forestgreen
#adff2f,greenyellow
#708090,slategray
#262626,deepgray
もちょっとうすくとか細かく指定したいのでσ▼o・∀・o▼ピカは
カラーコード配色用を使っています。
これは背景、もじ色、テーブルの色などの配色が同時に見れる優れものです。
今回は長くなっちゃうのでここまでで^^;
もしここのタグやスタイルシートで公開してほしいのがあったら、FTT素材・HP作成支援掲示板にリクエストしてください
リクエストに応じて増やしていきたいと思います