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つ上のフォルダ内のファイルを指定

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

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

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

	<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




スポンサー リンク






開発ノウハウ等


スポンサー リンク


スポンサー リンク