6-7-2-6. チョットしたノウハウ集

当ホームページを作るにあたって、Webを検索し、HTMLに関するノウハウを各種参考にしました。 その内容を以下に列挙しています。

1-1. 特殊文字と文字間の空白表示

¥　¥ 円記号

 　半角スペースよりも狭い(細い)空白。
 　通常の半角スペースと同じサイズの空白。
 　それより少し広めの空白。
 　さらに広めの空白。

1-2. 文字の行間

	<style type="text/css">
	<!--
	body
	span {line-height : 160% ; }
	-->
	</style>

cssで定義された行間が、spanでサンドされた部分に適用される。

	<span>
	<p>
	</p>
	</span>

直接記述する場合（文字を太字にする設定含む）

	<span style="line-height: 200%; font-weight: bold; ">～ </span>

1-3. 文字の色とサイズ

	<FONT color="カラー名かRGB値">～</FONT>
	
	<span style="color:magenta; font-size: 13px;">～ </span>
	
	<div style="font-size:10pt;">～</div>
	
	<div style="color:magenta;font-family:Arial, Helvetica, sans-serif;font-size: 13px;">

1-4. 文字や画像の位置

	<span style="float: right;">テキストの右寄せ</span>
	
	<div style="margin-left:15pt;">～</div>
	
	<div style="text-align:right;">～</div>
	
	<div style="position:relative; top:0px; left: 36px;">～</div>
	
	<div align="right">テキストの右寄せ</div>

1-5. divタグを使った時の改行を止めるには

	<div style="display:inline-block; _display:inline;">

1-6. 文字の取り消し線

	<span style="text-decoration:line-through;">取り消し線</span>

2-1. 画像に枠を付け、その右に文章を入れる：回り込み

border="1"　：　画像に枠を付ける 
	<p>
	<img src="xxx.jpg"  border="1" align="left" style="margin-right:10px" >
	
	文章を記述
	
	<BR clear="left"></p>
<img src="xxx.jpg" align="left">
この間に表示したい文字を入れる。
<BR clear="left">
　←　で回り込みをリセットする
style="margin-right:10px"
　←　画像の右側に 10pxの余白（マージン）を設ける

2-2. 画像の上に文章を入れる

	<div style="position: relative;">
		<img src="./img03/wheel/haikei_yellow2.jpg" width="530" height="147">
		<div style="position:absolute; top:18px; left:40px; width: 450px;">
		<font color="#000888">
		<font size="3">シーラント剤を事前に注入し、携帯ポンプを持って出かける。</font><br>
		<br>
		遠出をする場合、<br />
		　・交換用のチューブラーと<br />
		　・装着用のリムテープ（TTP）<br />
		も、携行する。
		</font>
		</div>
	</div>

2-3. 画像の作成・編集要領

① 画像の作成要領
Paint とか GIMP で作るより方法がない画像は仕方ないが、一般的な画像なら Power Point で作成し、 図として保存すればきれいな画像が、簡単に作れる。

② 画像の 4:3 比率での切抜き方法
JTrim というソフトを使用すると、簡単に 4:3 比率でトリミングが出来る。

2-4. 写真・画像の拡大表示 → Lightbox の利用

サムネイル画像をクリックして、拡大画像をそのページに、オーバーレイ表示する

	<!-- 写真・画像の拡大表示のための Lightbox の準備 -->
	<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="../js/lightbox.js"></script> 
	<link rel="stylesheet" href="../css/lightbox.css" type="text/css"
	 media="screen" />
	
	
	<a href="./img03/seatpost/cyrano2.jpg" rel="lightbox[group]"
	 title="Fizik Cyrano">
	<img src="./img03/seatpost/cyrano2.jpg" width="170" height="126"
	 border="1"></a>

2-5. PDFファイルの貼り付け方

	<iframe src="http://arakan60.mydns.jp/04kousaku/img4-68/bcw710j2_2.pdf#page=1&
	scrollbar=0&view=Fit&viewrect=0,0,570,0"
	width="600" height="332" scrolling="no" marginwidth="0"
	 marginheight="0" frameborder="0" style="border:none;"></iframe>

3. 1つ上のフォルダ内のファイルを指定

１つ上のフォルダ内のファイルを指定する場合は、上に上がることを示す「　../　」を記入する。
もし２つ上のフォルダ内のファイルを指定したい場合は、「　../../　」のように、../をさらに１つ付け加える。

4-1. 他のページへのリンクとリンクの下線を消す

<a href="URL" target="_blank">　～　</a>

「rel="noopener"」：「target="_blank"」のセキュリティ対策

	<a href= "リンク先URL" style="text-decoration: none" > リンク先タイトル </a>

4-2. 呼出（リンク）元の画面に戻るボタンの設置

①．呼び出されたページの、”表題の右端”にボタンを設置。

	<table width="100%">
		<td>
			<h3><a><img src="../images/raspberrylogo1.jpg" ></a>
			 6-7-10. チョットしたノウハウ集</h3>
		</td>
		<td>
			<p style="text-align:right;"><input type="button" value="
			戻る" onclick="history.back()"></p>
		</td>
	</table>

②．特定のページに戻るボタンを設置する場合。

	<p style="text-align:right;"><a href="50Index.html"><input type="button"
	 value="戻る"></a></p>

5. プログラムリストのような、テキストデータの表示要領

<pre>～</pre>の中に<code>～</code>を挟んで使用した場合には、
スペースや改行・空白をそのままプレビューしてくれる。
CSSやJavaなどのプログラムソースの表示には最適です。
ただ、HTMLのソースコードは実体参照変換する必要がある。
記述例：
<pre style="color:blue; font-family:Arial, Helvetica, sans-serif; font-size:13px;">

SyntaxHighlighter でのサンプルは、 こちらを参照
　→　 6-7-9. SyntaxHighlighter によるソースコードの表示


6. 『ページの先頭に戻る』の設置

<div id="header"></div>
	<!-- ページ（body）内容 -->
<p style="text-align:right;"><a href="#header">ページのトップへ</a></p>

jQuery でのサンプルは、 こちらを参照
　→　 6-7-8. ページのトップへ戻るボタンの設置　jQuery





PAGE TOP ▲


開発ノウハウ等