SQLの窓

2011年08月19日


Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する

list-style-image を使用すると、LI 要素の前に付くマークに任意の画像を指定できますが、フォントのサイズが変わっても、画像はそのままですからバランスが悪い場合があります。

Picasa は、URL にサイズ指定できるので、以下のような運用が可能になります。

  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
こちらは、元の画像です



ここをクリックすると、以下のコードを編集しながらテストする事ができます
<style type="text/css">
.my_li li {
	font-size: 16px;
	list-style-image:url(http://lh4.googleusercontent.com/-K5VtJ3GdFXM/Tk2_0St9H3I/AAAAAAAADSI/Cbp0frLPgyU/s12/li_img.gif)
}
.my_li2 li {
	font-size: 26px;
	list-style-image:url(http://lh4.googleusercontent.com/-K5VtJ3GdFXM/Tk2_0St9H3I/AAAAAAAADSI/Cbp0frLPgyU/s18/li_img.gif)
}
</style>
<ul class="my_li">
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
</ul>
<ul class="my_li2">
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
</ul>



posted by lightbox at 2011-08-19 10:55 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2011年05月11日


WEB フォントの記述方法の考察

WOFF のほうがファイルサイズが小さく制限も無いようです( IE11 でも全ての ttf が表示される事は無い )

変換は、ttf to woff converter

IE9 より WEBフォントに WOFF と TrueType フォントがサポートされますが、IE8 以前でも、Embedded OpenType (EOT) でサポートされていた為、以下のような
記述が利用されているようです。
<style media="screen" type="text/css">
@font-face {
	font-family:"Maskenball04";
	src: url("Maskenball04.eot?") format("eot"),url("Maskenball04.ttf") format("truetype");
}
</style>

この、.eot の ? は、IEのバグのような仕様の為、) 以降の文字列が URL に追加されて呼び出される為、404のエラーになる為このような記述がされています。


※ ですから、実際は # にしたほうがスマートだとは思いますが。


また、format("eot") をつけている理由は、IE 以外で読み込む時に、format("eot") が無いと、使え無いフォーマットなのに読み込んでしまうからです。format("eot") を書く事によって、Firefox 等で、無視するようです。

しかし、IE9 になると、eot も、その他のフォーマットも対応する事になるので、最初に読み込めたファイルが有効になると思われるので、将来的にはあまり良く無い印象をうけます。そこで、どうせ IE だけの都合ですから、以下のように書くといいかもしれません。

2011/5/11 : IE9 で ttf が使えていません。[if lte IE 9] にする必要があります(埋め込み許可ビットというヘッダ情報が必要なようです)
<style media="screen" type="text/css">
@font-face {
	font-family:"Maskenball04";
	src: url("Maskenball04.ttf") format("truetype");
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
@font-face {
	font-family:"Maskenball04";
	src: url("Maskenball04.eot");
}
</style>
<![endif]-->

関連する記事

2014年7月7日現在。WEBフォントの実際

WEB フォントをクロスドメインで利用する




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

2011年03月11日


これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整

本当は他に方法あるのでしょうが、ブログのリンクでしか使わないので
一般的にも簡単なほうがいいと思ったので。

テストは、リアルタイムHTML で実行してみて下さい。
  • 1行目
  • 2行目
  • 3行目
  • 1行目
  • 2行目
  • 3行目
  • 1行目

  • 2行目

  • 3行目

  • 1行目

  • 2行目

  • 3行目

<ul>
<li>1行目</li>
<li>2行目</li>
<li>3行目</li>
</ul>

<ul>
<li>1行目<br /></li>
<li>2行目<br /></li>
<li>3行目<br /></li>
</ul>

<ul>
<li>1行目<br /><br /></li>
<li>2行目<br /><br /></li>
<li>3行目<br /><br /></li>
</ul>

<ul>
<li style='line-height:0px'>1行目<br /><br style='line-height:25px'/></li>
<li style='line-height:0px'>2行目<br /><br style='line-height:25px'/></li>
<li style='line-height:0px'>3行目<br /><br style='line-height:25px'/></li>
</ul>

ただ、ブラウザによって多少高さが違うようなんですが、まあもともと
かなり違うものですからデザイナでは無いのでよしとしてもいいと思い
ます。


※ Opera はこのページでうまくいかないですね。
( CSS の important がたぶん邪魔しています )


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

2011年01月09日


Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。

IE では昔から 0、1、yes、no で動作する仕様になっています。
frameBorder Property (FRAME, FRAMESET, IFRAME, ...)

Mozilla では、仕様には無いようですが、0、1、yes、no で動作します
iframe - MDC Doc Center

以下に frameborder="yes" のIFRAME があります
Google Chrome ではframeborder="1" で動作しますが、少し気持ち悪いです。
と言うのも、frameborder に文字列が指定されると、frameborder="0" 扱いになって
frameborder が数字で(例えば "9" とかで)仕様外だと、frameborder="1" 扱いになります。

Firefox では、仕様外は全て frameborder="1" 扱いです。

Opera では、frameborder を指定しない場合と、frameborder="1" でのみ動作します。
それ以外は常に境界線は引かれません。つまり、仕様外は全て frameborder="0" 扱いです。
<IFRAME
	src="http://winofsql.jp"
	frameborder="yes"
	scrolling="yes"
	width="600"
	height="100"
></IFRAME>

以下は frameborder="1"、scrolling="yes" です


タグ:トラブル
posted by lightbox at 2011-01-09 12:12 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2010年12月20日


CSS3 の角丸を IE8以前でも使うには( ブログで使うには )

▼ 以下は古い記事です


CSS3 support in Internet Explorer 6, 7, and 8 より ie-css3.htc
をダウンロードして、WEB 上のどこかに設置して、その同一ドメイン下で、HTML を作成してブログで IFRAME で読み込みます。

セキュリティの仕様の為、同一ドメインでしか動作しないので、ブログではファイルがアップロード可能な Seesaa、忍者ブログ、FC2、ココログを使っておれば、レンタルのWEB スペースは必要無いですが、変更が面倒なので FTPでアップロードできる WEB スペースは持っていたほうが便利です。

※ ココログはユーザースペースがサブドメインでは無く、ディレクトリなので、そのまま設置可能
他の CSS3 効果

DIV 角丸(画像の角を丸く)
テキストのドロップシャドウ
YouTube の埋め込みにドロップシャドウ


タグ:CSS3
posted by lightbox at 2010-12-20 13:34 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2009年05月30日


CSS : display / vertical-align


.area {
	display: none;
}

img {
	display: block;
}

form {
	display: inline;
}

※ .area : 完全に非表示にしたい場合( 場所も占有しない )場合に none
※ img : 改行を自動的に入れて独立させたい時に block
※ form : アプリケーションで送信エリアが複数必要で改行させたくない場合に inline

▼既存の CSS の影響が出ないように、IFRAME で埋め込んでいます




posted by lightbox at 2009-05-30 17:57 | 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 終わり