SQLの窓

2014年09月25日


CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認

jQuery で、設定をを切り替えています。変更できる内容は以下のようにしています
1) block
2) inline-block
3) inline-table
4) list-item
5) inline
list-item を同時にテストする為、一番外側のブロックには ul を使用しています。

    テキスト
    テキスト(自動改行をさせる)テキスト(自動改行をさせる)

inline-table が扱いやすい

ブロック内のテキストが自動改行されて複数行になった場合に、一番上の行に合わせてレイアウトされます。さらに、ブロックの高さより、テキストが多くなっても自動的にブロックの高さが調整されます。これは、そもそも float を指定するかわりの代替として使われるべきものです。

inline-block では、ブロックが単純に行の上に乗る形で上へ伸びます。また、ブロックの高さは固定で、テキストが多い場合ははみ出るので、ブロックによる背景色等の効果を期待できません、つまり、ブロック内のテキストの改行数によって 全体の見え方がかなり変化する事になります。

list-item は、標準のマーカーを使う場合はいいですが、画像を list-style-image で変更すると、画像のサイズによって、意図しないレイアウトになるようなので使わないほうがいいと思います。

<script type="text/javascript">
if ( window['loadjQuery'] !== true ) {
	window['loadjQuery'] = true;
	document.write("<"+"script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></"+"script>");
}
</script>
<script type="text/javascript">
$(function(){
	$("#change_type").change(function(){
		$("#jquery_test div")
			.css({ "display": $(this).val() } );
	});
});
</script>
<style type="text/css">
#jquery_test {
	width: 550px;
	border: dotted 1px #c0c0c0;
}
#jquery_test div {
	display: block;

	width: 100px;
	height: 50px;
	border: solid 1px #000000;
	padding: 5px;
}
#jquery_test .next {
	margin-left: 20px;
}
</style>
<ul id="jquery_test">
	<select id="change_type">
		<option>block</option>
		<option>inline-block</option>
		<option>inline-table</option>
		<option>list-item</option>
		<option>inline</option>
	</select>
	<hr>
	テキスト 
	<div>
		テキスト(自動改行をさせる)テキスト(自動改行をさせる)
	</div>
	<div class="next">テキスト(自動改行をさせる) 
	</div>
	<div class="next">テキスト 
	</div>
</ul>


posted by lightbox at 2014-09-25 14:03 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年09月08日


ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ

Vertical align anything with just 3 lines of CSS
jQuery UI に resizable があります。これを使って、外側のサイズをリアルタイムに変更して中央のブロックレベル要素が中央に表示されるのを確認できます。

jQuery は、IE の古いバージョン用に 1.xx を使用していますが、結局 IE8(IE11 のエミュレータ) では正しく中央にはなりませんでした。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {
	$( "#base_box" ).resizable({});
});
</script>
<style>
#base_box {
	width:450px;
	height:200px;
	border: solid 3px #f00;
}
#inner_box {
	width: 100px;
	height: 50px;
	border: solid 1px #000;
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);

}
</style>
<div id="base_box">
<div id="inner_box"></div>
</div>


タグ:jquery
posted by lightbox at 2014-09-08 20:24 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年01月13日


IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol

IEは、やっと IE9 でまともに使えるようになったという事で、他のブラウザでは普通に使用できていました。
※ Google Chrome や Firefox では、アドレスバーに直接セットしても表示されます( IE は アドレスバーに長さ制限ある上、そもそも対応していない )



IE9 に関する公式の記述

以下の小さな画像は、その下のソースコードで表示されています。インターネット上の画像をこのような Base64 に変換するツールはこちらになります。
<img id="png_base64"> 
<script type="text/javascript"> 
document.getElementById("png_base64").src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAA3NCSVQICAjb4U/gAAAAYnpUWHRSYXcgcHJvZmlsZSB0eXBlIEFQUDEAAHicVcixDYAwDADB3lN4hHccHDIOQgFFQoCyf0EBDVee7O1so696j2vrRxNVVVXPkmuuaQFmXgZuGAkoXy38TEQNDyseBiAPSLYUyXpQ8HMAAAM2SURBVDiNfZRvTJtVFMZ/71vCJE1DIdQBrbhu3WbsnDEx7jVRMBgT/2OzzRgSjUswBovRRaMoGbgm6khcYMZCoIuaqAxMNqfgh7WdMfPDDHXBhLd2m7YrdVSUAW2poHbr8UNRQIjPx3Of55znnHvuVUSEdTH9KycHWFzg8aeptK7PkbU4E5B9D0g5sgO5FalEnrpPzgTWEpXlyr9NceIjvK/wFxjgHlfX1B/ZyxMHKoWfIyzCdfD8EXY/ibmsoPhHHLvIlu3cRsbAT9dMEw89N3XTznc6OxdzuVdffKH81Al7xL/diOUafA+pWUrLlm2nPC8fMlOxuiOHw+FwOFZGyuHQBmY/6CmoEBHJ/fkWAM1ut9/vn5ycXNteMpkMBoOFFG9XLZUsAhg5vncTr8c5FwpdPH++pqams7PT5/MNDQ2VlpYqiiIiJSUlqqoCn2yhUYXvznL7nSpA7wFHMWOfDoyOjs7NzQUCAbfb7XQ66+rqUqmUrusmk8nv91ssFkA7+D55+Pg9ALmgSzWyV0vMzACRSKS9vV3TtIKxtra2+vr6QCAAxONxIHFlRu7fKhYkk0IO7pdNSHDkx4kEEIvFWltba2trRaS5ubm4uBgwm83/ziwnIqc+l2pk4GgRhiKuQsVGRaQwfMBkMnV3d/f29mqaFo1GW1pacrmcoigul6sImJ5iA0xdVuRCmDonjzwa9fQ7qiqj0ajP5wuHw06nU9d1TdMGBwfHx8dX3eEuhQSE4irbbuYWO6e/YHxs5c4ajcZ0Om21WnVdX6U89y2/QN1d2G5UAZ71UAxez0qOwWDIZDINDQ1AR0fH8sGH3ajwzGuACvDwHrLIpbMAqprP5/P5fDKZtNlsZWVlfX19Ho+nqalpNp1mPs3xIUrg3gdXvCrP/j0Fw4u/Dw6PFGp4vd7C4WfDw4VI445tX1cj/YdXrKfIkZ4e4CsbshlpbwEwmhdyV5dSJ2ILL+17d+OS8TcPrxZn5rOXIj/I0S5xIJuZ3skV1y45/aV8E5Tdd8j1iB3ZinS9EQ6F5rPZVeJl5PNy8pjUW6UGsSNWpAJ54m7xD//vZ/Af6GMM9HODnccaqbKtS/kbZXYMZaJnrD4AAAAASUVORK5CYII%3D'; 
</script> 
data Protocol に関する Microsoft のドキュメント

▼ それによると、フォーマットは
data:[sMediaType;][sBase64Encoding;],sResourceData

▼ IE9 に関する抜粋
データ URI とは、Web ページのコンテキストにデータを直接埋め込む手段です。

最も一般的な例は、以下のような Web ページに埋め込まれた小さな画像です:

-------------------------------------------------
data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP
-------------------------------------------------

img 要素の src 属性に置くと、このテキストは、ページのマークアップに画像を効果的に埋め込みます。Internet Explorer には、Internet Explorer 8 においてデータ URI が導入されました。

Internet Explorer 9 では、開発者は script 要素の src 属性でデータ URI を使用できるようになりました。

さらに、データ URI のサイズの上限が、32 キロバイト (KB) から 4 ギガバイト (GB) (Internet Explorer 9) まで引き上げられました。
つまり、IE8 では画像のみに使用できて、かつ32K までの小さなファイルしか使え無かったという事です。他のブラウザは試しましたが、皆使えています。 この Base64 への変換ツールを二つ確認しています。一つはオンラインで実行可能です。 ★ Binary / Image File to Base64 Encoder / Translator もうひとつは、Firefox のアドオンです。 ★ Base64 Encoder また script 要素 でも利用できるので、alert("OK"); を実行する記述は以下のように書く事ができます Base64 => YWxlcnQoIk9LIik7 元の文字列 => alert("OK");
<script type="text/javascript" src="data:text/javascript;base64,YWxlcnQoIk9LIik7
"></script> 



タグ:IE9 IE
posted by lightbox at 2014-01-13 14:49 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2013年02月08日


CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い


pre {
	white-space: pre;
	white-space: pre-wrap;
/*	white-space: pre-line; */
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
}
PRE 要素内では、改行コードが改行として表現されます。しかし、white-space の pre-line を指定すると『連続する半角スペース・タブ・改行を、1つの半角スペースとして表示』するので、連続する二行の改行が存在する場合どうなるか・・・という事なんですが。

Google Chrome をメインに使っていたので

これで何が問題なのか気が付かなかったのですが、Google Chrome ですと、改行の数がそのままになって、Firefox だと、改行がなくなるようなのです。で、IE はと言うと、Google Chrome に近い結果なのですが、他のパターンだと Firefox と似ている・・・という良く解らない事実に遭遇してしまいました。

結果的に、それぞれレイアウトが違う

もともとは、pre 内の文字列を自動改行する為に使った CSS の一部だったのですが、全てのブラウザで確認しなかった為にかなり長い間放置していた事になります。

PRE で改行を含めて文字列を配置しておくと、自分にとってはいろいろいい事があるので、昔から使っていたのですが(自分で改行位置を決めていた)、スマホに対応するのに『自動改行』が必要になりました。で、インターネットで調べて Google Chrome でテストしてうまくいったのでそのまま・・・という事です。

※ DIV 内で改行を BR にまかせている場合は発生しないと思います。



posted by lightbox at 2013-02-08 23:27 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2011年12月04日


TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する



ヘッダー
ヘッダー
ヘッダー
左サイド
左サイド
左サイド
中央
中央
中央
中央
中央
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド

下部
下部
下部
ヘッダーと下部は通常の DIV です。その間に float:left でコンテンツエリアを作成しています。残りの右サイドには position:absolute で後から追加するといいと思います。

コンテンツエリア内に左サイド、中央、右サイドとして配置して、それぞれ float がleft、left、right と設定して横に並べています

※ 実際は、BODY に margin:0px を設定してキッチリとはめ込みます
<style>
.layout {
	border: solid 1px #404040;
}
.inner {
	margin: 6px;
}
</style>
<div
	class="layout"
	style='width:598px;height:100px;background-color:#e1e1e1;'>
	<div class="inner">
		ヘッダー<br>
		ヘッダー<br>
		ヘッダー<br>
	</div>
</div>

<div style='width:600px;background-color:#e2ffe2;float:left;'>

	<div class="layout" style='width:98px;background-color:#c8e8e8;float:left;'>
		<div class="inner">
			左サイド<br>
			左サイド<br>
			左サイド<br>
		</div>
	</div>

	<div class="layout" style='width:394px;background-color:#e0c0e0;float:left;'>
		<div class="inner">
			中央<br>
			中央<br>
			中央<br>
			中央<br>
			中央<br>
		</div>
	</div>

	<div class="layout" style='width:98px;background-color:#e0f0e0;float:right;'>
		<div class="inner">
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
		</div>
	</div>

</div>

<br style='clear:both'>

<div class="layout" style='width:598px;background-color:#e1e1e1;'>
	<div class="inner">
		下部<br>
		下部<br>
		下部<br>
	</div>
</div>


posted by lightbox at 2011-12-04 00:27 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2011年12月02日


HTML : 画像を使ったボタンのバリエーション

ボタンに画像を使うには、3通り方法があります


1) BUTTON 要素 を使う
2) INPUT 要素の type="button" を使う
3) INPUT 要素の type="image" を使う

ポイント1

1) と 3) は、FORM 要素内で記述するとサーバーに送るボタンとして使用できます
2) は、FORM 要素内で記述されてもサーバーへは送られません

ポイント2

1) と 2) は、画像の定義方法が同じで、どちらもボタンとしての効果があります
3) は画像が表示されるだけですが、その他の画像に対するスタイルを定義できます
( サーバーへ送る時にクリックした座標が送られます )
3) の場合は、カーソルはポインタカーソルになりますが、ボタンでは矢印です

ポイント3

ボタンにテキストを指定する場合は、INPUT要素より BUTTON 要素のほうが容易です




以下の二つのボタンは、BUTTON 要素と INPUT 要素です
( ボタン画像よりエリアとして縦横 5px 大きく設定しています )





ボタン画像は、輪郭が表現されている場合が多いので、5px 大きく設定しますが、
以下は、ブラウザが自動的に付加する輪郭を省く場合の記述方法で、開始位置
を -1px として、縦横を -2px します。元の画像から考えると +3px です
( これは、IE8 でしかうまくいかないので使わないほうがいいです )



さらに、ボタン画像に含まれる輪郭を消去して使うには、開始位置をさらに
マイナスにして、サイズを調整します。この場合は、開始位置が -2px で、
画像の元のサイズからすると +1px です
( これがたぶん全てのブラウザでうまくいきそうです )





上はボタン画像では無く一般の画像です。これをボタンとするには、テキストの
色もさらに設定する必要があります

以下の3つは開始位置とサイズを変化させたバリエーションですが、通常画像の為、
大きな違いはありません。逆に画像にタイル画像を使うと繰り返して表示されるの
で小さな画像で背景パターンを使う事もできます

※ 少なくとも IE8 と その他のブラウザと仕様が違います。普通の画像の場合は、
幅を +5px ではなく、+4px が正解のようです







以下は、INPUT 要素の type="image" を使用しています。この場合はボタンと言うより、
「画像を使って(クリックした位置も)サーバーにデータを送信する」為に使います。
ですから、自動的にボタンとしての効果も無いので、クリックできる事を明示する為に
カーソルがポインタカーソルに変化するようになっています




<pre>
<img src="http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png" onclick='alert("通常のボタン用画像です")' />

<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png);width:185px;height:35px;' onclick='alert("button要素 : ボタンサイズより縦横共に5px大きい設定で、画像全体とボタン効果を表現できます")' >実行</button>

<input type="button" style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png);width:185px;height:35px;' onclick='alert("input要素 : ボタンサイズより縦横共に5px大きい設定で、画像全体とボタン効果を表現できます")' value="実行" />

<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png) -1px -1px;width:183px;height:33px; ' onclick='alert("ボタンサイズより縦横共に3px大きい設定で、画像全体と一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-1px)をスタイルで設定する必要があります")'>実行</button>

<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png) -2px -2px;width:181px;height:31px;' onclick='alert("ボタンサイズより縦横共に1px大きい設定で、画像の輪郭を1pxづつ省いて全一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-2px)をスタイルで設定する必要があります")'>実行</button>

<img src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" onclick='alert("一般画像をボタン用として利用します")' />

<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png);width:210px;height:59px;color:#ffffff' onclick='alert("ボタンサイズより縦横共に3px大きい設定で、画像全体と一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-1px)をスタイルで設定する必要があります")'>実行</button>

<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png) -1px -1px;width:209px;height:57px;color:#ffffff'>実行</button>

<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png) -2px -2px;width:207px;height:55px;color:#ffffff' onclick='alert("ボタンサイズより縦横共に1px大きい設定で、画像の輪郭を1pxづつ省いて全一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-2px)をスタイルで設定する必要があります")'>実行</button>

<input type="image" src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" onclick='alert("input 要素で画像をボタンとして利用します\nこの方法では、テキストを利用できませんが、クリックした位置をサーバーに送る事ができます\nまた、ボタンが押された時の効果は利用できません")' />

<input type="image" src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" style='border:solid 2px #c0c0c0' onclick='alert("input 要素で画像をボタンとして利用します\n普通の画像と同じようにスタイルで見え方を変更できます\nここでは、輪郭に実線を使って太さと色指定をしています")' />
</pre>
BUTTON 要素の中に IMG 要素とテキストを記述すると以下のようにもできます

背景用のタイル画像でボタンを表現します

▼ 元画像





posted by lightbox at 2011-12-02 14:06 | HTML / CSS | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり