ホーム へ サンプルページ レイアウト枠 2 layout2.htm
DIVタグ内に入れたコンテンツ(HTML)を任意位置に配置。 画像に文字を重ねた(例) DIV、LAYER。 コンテンツ、配置などのカスタマイズはテキストエディターなどで可。 IE4.x〜、Netscape6.x〜 対応。 コピー、編集し、簡単にWebで応用できまっ。 デモ : 【Internet Explorer】-[表示]-[文字サイズ] : 大、小 などで 文字サイズが変わりません。
< ご使用方法 >
・ ローカル(=PC)への保存は、layout2.htm を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。
・ このDHTMLの実装方法は、layout2.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、<head> 〜 </head> の任意の行間に (*1) を、さらに<body> 〜 </body> の任意の行間に (*2) をペーストします。
・ 編集方法は、hogehoge.html を WordPad や SmipleText などのテキストエディター、あるいはホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。 下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。 アイコン画像などの変更は準備した画像ファイル名を hogehoge.html などの該当 部に記述。 ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。 ※: 太字、彩色自体は動作に無関係。
・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 4.x〜 などで開いて。 更新の確認は、ie、Netscapeやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押さえ最新データ読み込みで行います(≠再アクセス)。 Netscaperは、Ctrl+Rキーで。
・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像などを転送/配置し実施。 ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。 FTPなどで変わったファイル名は要修正。 スクリプト構文中への改行混入は非作動原因。
・ 関連情報 : 色記号6、2、スタイルシートリファレンス、ホームページ開設入門が便利!。 Web Development、Web開発、MSDN IE8 HTMLとCSS。
(*1) : layout2.htm (例) 挿入先の <head> 〜 </head> の、〜 部分にペーストします。
HTMLの編集方法 | (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
〔この列ペースト不要〕
シフトJIS使用(削除不可) ieなどに表示するアイコンファイル名(削除可) <style type 〜 </style>は(削除可) マウスオーバー時のテキスト 背景色 下線非表示
非マウスオーバー時の下線表示(逆も可)
フォント サイズ 行サイズ
リンクを新しいWinで開くを標準(削除可)
※:target= いろいろ お気に入り、タスクバーに表示するページ名(≠ファイル名) |
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <link REL="SHORTCUT ICON" href="favicon.ico"> <style type="text/css"><!-- A:hover { COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: none } A { TEXT-DECORATION: underline } font { font-family: "MSPゴシック", "MSゴシック"; font-size: 12px; line-height:13px; } body{ font-family: "MSPゴシック", "MSゴシック"; font-size: 12px; line-height:13px;} --> </style>
<base target="_blank"> <title>サンプルページ レイアウト枠 2</title>
|
(*2) : layout2.htm (例) 挿入先の <body> 〜 </body> の、〜 部分にペーストします。
HTMLの編集方法 | (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
〔この列ペースト不要〕
背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)
説明 右上からの横位置(右配置は、right) 〃縦位置 幅 高さ 背景色(ナシ) 連番 コンテンツのHTML
ジャンプ先 画像のURL 吹き出し、バル〜ン 画像に重ねた文字 ハイパーリンク 文字色 リンク文字 |
<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">
<p> </p> <!-- 説明: position=配置 left=左上からの横位置 top= 〃 の縦位置 width=幅 height=高さ background-color=背景色 z-index=連番 -->
<p><DIV id="Layer1" style="position:absolute; left:35px; top:20px; width:300px; height:200px; background-color:; z-index:1; visibility:visible;"> <a href="http://xml-xsl.sakura.ne.jp/ tr0015.htm" target="_blank"><IMG src="http://xml-xsl.sakura.ne.jp/Z17A1L1a.jpg" border="0" border="0" alt="こんにちわ 〜* クリック → 生い立ち画像へ " width="245" height="186"></a></DIV> <p><DIV id="Layer2" style="position:absolute; left:50px; top:1px; width:300px; height:200px; background-color:; z-index:2; visibility:visible;"><br><BR> <font size="2" color="#5C2793"> =(゜。 .゜)= C.C. ちゃん …*<br> <a href="http://xml-xsl.sakura.ne.jp/ tr0015.htm" target="_blank" title="詳細ページへ、=(・。.・)=、=(゜。.゜)="><font color="#5C2793">詳細ページへ、=(^。^)=</font></a></font> </DIV></p>
|
< 補足 > 適時参照あれ!。