グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

ボックス内の要素を縦中央に揃えたい、ということは良くあると思いますが、
CSSではなかなか実現しにくいことだったりします。
（できなくはないけれど条件が厳しいとか、好ましくないタグが必要だとか）

そんな縦揃えの方法の1つとして、こちらで公開されているJSがあります。

tableを使わずにvertical-align:middle;を再現。ボックス内の画像(img)中央配置をjQueryで頑張ってみた


こちらのJSですが、

・ボックスの width、height が決まっている
・中の要素が img もしくはブロック要素

という条件で要素を縦中央に揃えることができるようです。


使用方法も詳しく説明されています。

組み込む際は、＜head＞内に記述する下記JSを修正することも忘れずに。

--------------------------------------------------------------------------------------------

<script>
$(window).bind('load',function(){
$(".vBox img").vAlign(); // 垂直水平位置を揃えたい画像を指定
});
</script>

--------------------------------------------------------------------------------------------


3行目で中央揃えを適用させたい要素を指定します。
demoデータでは＜img＞タグにのみ適用していますが、
たとえば＜p＞タグにも適用する場合は

--------------------------------------------------------------------------------------------

$(".vBox img, .vBox p").vAlign(); // 垂直水平位置を揃えたい画像を指定

--------------------------------------------------------------------------------------------


という感じで追加すればOKです。


枠のサイズさえ決まっていれば使えるため、お世話になる場面は多そうです。

LightBox風に画像やswf、webページなどのコンテンツを表示できる
jQuery Pluginの1つとしてFancyboxがありますが、
オプションを日本語でまとめているサイトが見当たらなかったので
自分用に翻訳してみたものをメモしておこうと思います。

(2016.7.19) 訳せてないものは原文入れました。

以下、すべてではないですが（おまけに空白もあります）
このようなオプションがあります。

オプション	デフォルト値	説明
'padding'	10	枠の幅
'margin'	20	枠の外側の余白。 表示するコンテンツがウインドウより大きい場合、この幅を確保して縮小されます。
'opacity'	false	When true, transparency of content is changed for elastic transitions
'modal'	false	true にすると、'overlayShow'→ true、'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton'→ talse になります
'cyclic'	false	ギャラリーの一番端でNext/Backボタンを押した時にループするか
'scrolling'	'auto'	スクロールバーの有無（auto／yes／no）
'width'	560	コンテンツの幅（iframe、swf時）
'height'	340	コンテンツの高さ（iframe、swf時）
'autoScale'	true	ビューポートに収まるようにスケーリングするか。 'true'の場合、表示するコンテンツがウインドウより大きいと自動的に縮小します。（画像だと無効？）
'autoDimensions'	true	For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results
'centerOnScroll'	false	コンテンツを常に中央に表示するか
'ajax'	{ }	Ajaxオプション
'swf'	{wmode: 'transparent'}	SWFオブジェクトのparams設定
'hideOnOverlayClick'	true	オーバーレイ部分をクリックした時にfancyboxを閉じるか
'hideOnContentClick'	false	コンテンツをクリックした時にfancyboxを閉じるか
'overlayShow'	true	オーバーレイの有無
'overlayOpacity'	0.3	オーバーレイの不透明度
'overlayColor'	'#666'	オーバーレイの色
'titleShow'	true	タイトルの表示/非表示
'titleFormat'	null	Callback to customize title area. You can set any html - custom image counter or even custom navigation
'titlePosition'	'outside'	タイトルの位置（outside／inside／over）
'transitionIn' 'transitionOut'	'fade'	開閉時の動き（fade／elastic／none）
'speedIn' 'speedOut'	300	開閉時のスピード
'changeSpeed'	300	ギャラリーでコンテンツを切り替えた時のサイズ変更スピード
'changeFade'	'fast'	ギャラリーでコンテンツを切り替えた時のフェードスピード
'easingIn' 'easingOut'	'swing'	アニメーションに使用するイージング
'showCloseButton'	true	クローズボタンの有無
'showNavArrows'	true	ギャラリーでNext/Backボタンを表示するか
'enableEscapeButton'	true	Escボタンを押した時にfancyboxを閉じるか
'onStart'	null	Will be called right before attempting to load the content
'onCancel'	null	Will be called after loading is canceled
'onComplete'	null	Will be called once the content is displayed
'onCleanup'	null	Will be called just before closing
'onClosed'	null	Will be called once FancyBox is closed

Advancedオプション	説明
'type'	コンテンツタイプ。'image' 'ajax' 'iframe' 'swf' 'inline' が設定できます。
'href'	コンテンツのURL。HTMLのhref=""で設定したものよりも優先されます。
'title'	コンテンツのタイトル。HTMLのtitle=""で設定したものよりも優先されます。
'content'	コンテンツの内容。任意のHTMLデータを入れることができます。
'orig'	Sets object whos position and dimensions will be used by 'elastic' transition
'index'	Custom start index of manually created gallery (since 1.3.1)

もうそろそろIE6対策の記事を書くことが減ってほしいものですが、
やはりまだ対応しなければならないのが現状です。

IE6で透過PNGを使う際のJSですが、
今まで使っていたものが諸事情により使えなかったため
別のJSを探していたところ、
各種JSをとてもわかりやすくまとめてくださっているサイトがありました。

ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」

オススメされている DD_belatedPNG.js 以外にも、
各JSの特徴や注意点などがまとめられていて参考になります。

とりあえずメモでした。

ブラウザ毎のハックはCSSで簡単にできますが、
OSごとにスタイルを変えるのは、複数のCSSを用意して振り分けるしかないと
思っていました。

ですが今回はCSSの記述を増やしたくなく、
ダメもとで探してみたところ やたらと便利なJSが見つかりました。

CSS Browser Selector

CSSに簡単な記述を追加するだけで、
ブラウザ、OSを指定して適用させることができるJSです。

具体的には、

.win body {
　background:#000;
}

で Windowsのみに、

.mac.ie7 body {
　background:#000;
}

で MacのIE7のみにスタイルを適用できます。


ダウンロードはこちらのサイトから。
http://rafael.adm.br/css_browser_selector/


今回は試していませんが、
相当な数のOS、ブラウザに対応しているようです。

■OS
・win - Microsoft Windows (all versions)
・vista - Microsoft Windows Vista
・linux - Linux (x11 and linux)
・mac - Mac OS
・freebsd - FreeBSD
・ipod - iPod Touch
・iphone - iPhone
・ipad - iPad
・webtv - WebTV
・j2me - J2ME Devices (ex: Opera mini) ※changed from mobile to j2me
・blackberry - BlackBerry
・android - Google Android
・mobile - All mobile devices

■ブラウザ
・ie - Internet Explorer (All versions)
・ie8 - Internet Explorer 8.x
・ie7 - Internet Explorer 7.x
・ie6 - Internet Explorer 6.x
・ie5 - Internet Explorer 5.x
・gecko - Mozilla, Firefox (all versions), Camino
・ff2 - Firefox 2
・ff3 - Firefox 3
・ff3_5 - Firefox 3.5
・ff3_6 - Firefox 3.6
・opera - Opera (All versions)
・opera8 - Opera 8.x
・opera9 - Opera 9.x
・opera10 - Opera 10.x
・konqueror - Konqueror
・webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
・safari3 - Safari 3.x
・chrome - Google Chrome
・iron - SRWare Iron


iPadやスマートフォン系のOSにまで対応しているようで、
なんだかまた近いうちにお世話になりそうな・・

弊社ブログ『四ツ谷NOW』に
sixapart社のブログパーツ、『zenback』を導入しました。

ところが2点ほど不具合が発生。
最初はzenbackのバグ？かと思いましたが
ブログの初期設定のミスと
既に導入済みのJavascript＆コーディングとの相性問題。

忘れがちかと思ったのでメモしておきます。