てるてる坊主: 7月 2011

2011年7月29日金曜日

CSS3でメニューを作ってみました

CSS3でいろんなメニューのサンプルがありますが私も3つ程、作ってみました。
一応CSSだけで動いてます。
（勉強しながらつくったんでできはイマイチかも）

CSS3でメニュー - jsdo.it - share JavaScript, HTML5 and CSS

2011年7月28日木曜日

通常Internet Explorerは、1台のパソコンにひとつのバージョンしかインストールすることができません。
しかし、WEBサイトを構築する場合は複数のブラウザに対応させることが求められるため、それぞれできちんと表示・動作・調整する必要があります。

そんななかで便利ツールをいくつか紹介します。

IETester
ひとつの画面上で動作し、タブで複数バージョンのIEを起動することができるアプリケーションです。
バージョンはIE5.5からIE9まで（ローカルのブラウザのバージョンにより異なるみたいです）サポートで、日本語対応しているので非常に使いやすいアプリケーションです。

Multiple_IE
スタンドアローン版のIEが収録されたアプリケーションです。
インストール時にバージョンをIE3からIE6まで選択することができます。

Expression Web SuperPreview
Microsoft製のアプリケーションです。
複数バージョンのIEをプレビュー・比較することができます。
試用版として60日間無料ですべての機能を使うことができますがIE以外にもリモートブラウザ機能を使うことでサードパーティ製ブラウザ（Firefoxなど）での比較も行うことができます。
試用期間終了後でもローカルブラウザ（IE6～IE9）機能は使うことができます。
また、動作には.NET Framework4とSilverlight v4.0が必要になります。

2011年7月27日水曜日

CSS3で吹き出し風のリンクボタン

いろいろ実装方法はありますがせっかくなんでCSS3の回転（rotate）を使って吹き出し風のリンクを作ってみました。
吹き出し風のリンクを作る場合は回転より:beforeや:afterの擬似要素の方が重要になると思います。
（回転をしなくても吹き出し風のリンクをつくることもできます）

サンプルは２種類つくっています。
上段は回転(IEでは見れません)、下段は線（IEでも見れます）で装飾しています。

CSS3で吹出し風のリンク - jsdo.it - share JavaScript, HTML5 and CSS

【擬似要素・擬似クラス】

:link

未訪問のリンク先へのアンカー

:visited

訪問済のリンク先へのアンカー

:hover

該当の要素にカーソルがある状態

:active

該当の要素を指定した状態

:focus

該当の要素にフォーカスがある状態

:before

該当の要素の直前を対象とする要素

:after

該当の要素の直後を対象とする要素

2011年7月26日火曜日

metaタグのviewportでスマホ向けサイトのサイズを制御する

viewportというのは仮想的なウインドウサイズで、iPhoneではデフォルト980pxになります。
（iPhoneの実際の画面サイズは320px×480px）
Media Queriesでデバイスに合わせてスタイルを振り分けるようにしてもviewportの980pxというサイズが邪魔してうまく振り分けてくれません。
そこで自分のサイトにあったサイズをviewportで指定していきます。

viewportの各プロパティ

width

デバイスの横幅。デフォルトは980px。200pxから10000pxまで指定可能。
デバイスの横幅に合わせる場合はdevice-widthを指定。

height

デバイスの縦幅。233pxから10000pxまで指定可能。
デバイスの縦幅に合わせる場合はdevice-heightを指定。

initial-scale

最初にページが読み込まれた際の拡大率。デフォルトは1。0から10まで指定可能。
（ただしminimum-scaleとmaximum-scaleの範囲に準ずる）

minimum-scale

最小の拡大率。デフォルトは0.25。0～10まで指定可能。

maximum-scale

最大の拡大率。デフォルトは1.6。0～10まで指定可能。

user-scalable

拡大・縮小の許可。デフォルトはyes。yes/noで指定。

各プロパティはカンマ（,）で区切ります。

【例】横幅はデバイスの横幅、拡大縮小は拒否の場合

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />

縦向きから横向きに変えたときに100%で指定している要素とかが横にのびる（横スクロールがでる）場合があります。これはmaximum-scaleのデフォルト値が1.6になっているからっぽい？？
横向きに変えたときでも画面にフィットさせたい場合は、maximum-scale=1を指定することでフィットしますが、拡大できなくなってしまうので注意が必要です。

Media Queriesを使ってWEBサイトをiPhoneに対応させる

CSS3のMedia Queriesを使ってiPhoneや他のスマホなどいろいろなデバイスに対応させることができます。
Media QueriesはMedia Typeの拡張で、以前から下記のような記述があります。

<link href="screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

これを各デバイスのサイズに合わせて下記のように記述することができます。

<link rel="stylesheet" type="text/css" href="smartphone.css" media="screen and (max-width:320px)" />

また、CSSファイル上で記述する場合は

@media screen and (max-width: 320px) {
    body {
        background-color: #f0f0f0;
    }
}

このMedia Queriesを使用する際に注意したいのは、@mediaもほかの要素と同様に上から順番に適用されていきます。
ですので下記のように記述した場合、iPhoneとかで見るとすべてのスタイルが適用されることになります。

@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 320px) {
}

これを防ぎたい場合はデバイスのサイズを範囲で指定することで回避することができます。

@media screen and (min-width: 768px) and (max-width: 1024px) {
}
@media screen and (min-width: 320px) and (max-width: 480px) {
}

デバイスのサイズごとにMedia Queriesを記述する例
Hardboiled CSS3 Media Queries

またこれらはCSS3からの仕様なのでIE（8以下）では、使うことができません。
しかしGoogleコードで公開されているcss3-mediaqueries-jsを使うことでIEでもMedia Queriesが使えるようになります。
（CSSファイル上での記述のみ適用されるみたいでlinkタグだけでは動作確認できませんでした）

<!--[if lt IE 9]>
<script type="text/javascript" src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

※2012.7.3
この記事を書いて１年近く経ちますがデバイスの横とかでも制御できるみたいですね。

@media screen and (orientation:landscape)

こうすることでデバイスが横向きの場合のCSSを記述することができます。
ただしPCの場合は注意が必要です。
そのまま書くとPCは横向きと判断します。
（縦横の比率で制御してるのかな。。。幅を変えると変化したりします）

2011年7月25日月曜日

Chromeで$(document).ready(fn)

ちょっと悩んでメモ程度に。。。
jQueryでページが読み込まれた時点で処理を行うという操作はよくあること思いますが$(document).ready(fn)で処理を行おうとすると画像が描画される前に処理が実行されました。
（多分Chromeのみ）
$("#img").get(0)とかすると正常にエレメント名も取得できますが、$("#img").width()とすると「0」になってしまいます。

すべてのページが読み込まれた時点で処理を行いたい場合は$(document).ready(fn)を使うより$(window).load(fn)を使用した方が良いようです。

ChromeやFireFoxでtextareaのtextareaリサイズの制御

Chrome／FireFox／Safariではテキストエリアのリサイズ機能が標準で備わっています。
入力エリアが狭いなと思うときは非常に便利ですが開発側から見るとレイアウトが崩れたりして嫌な場合もあります。
これは、CSSのresizeプロパティで制御することが可能です。

textarea {
    resize: none;
}

これだけでリサイズ機能を無効にすることができます。

他にも縦だけリサイズや横だけリサイズ、あとはリサイズの高さ・幅なんかも指定することができます。
【縦だけリサイズ】

【横だけリサイズ】

【高さ・幅指定】

2011年7月22日金曜日

WordpressでjQueryを使う

wp_head()でjQueryを読み込んでいる場合、他のjavascriptライブラリ（prototype.jsなど）と衝突を防ぐためjQuery.noConflict()が使われています。
ですのでjQueryオブジェクトの呼び出しの際には明確に"jQuery"と記述する必要があります。

$(document).ready(function() {
    alert("hoge");
});

↓↓↓

jQuery(document).ready(function() {
    alert("hoge");
});

wp_headから不要なコードを削除する

デフォルトのまま<?php wp_head(); ?>を記述するといろんなタグが自動的に出力されます。
サイトに寄って要否があると思いますが不要なものを削除したい場合は、削除してしまいましょう。

wp_headについて記述があるのはwp-includes\default-filters.phpです。
【wp_head()にいろいろ追加して部分の抜粋】

add_action( 'wp_head', 'wp_enqueue_scripts', 1 );
add_action( 'wp_head', 'feed_links', 2 );
add_action( 'wp_head', 'feed_links_extra', 3 );
add_action( 'wp_head', 'rsd_link' );
add_action( 'wp_head', 'wlwmanifest_link' );
add_action( 'wp_head', 'index_rel_link' );
add_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
add_action( 'wp_head', 'start_post_rel_link', 10, 0 );
add_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
add_action( 'wp_head', 'locale_stylesheet' );
add_action( 'publish_future_post', 'check_and_publish_future_post', 10, 1 );
add_action( 'wp_head', 'noindex', 1 );
add_action( 'wp_head', 'wp_print_styles', 8 );
add_action( 'wp_head', 'wp_print_head_scripts', 9 );
add_action( 'wp_head', 'wp_generator' );
add_action( 'wp_head', 'rel_canonical' );
add_action( 'wp_footer', 'wp_print_footer_scripts' );
add_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );
add_action( 'template_redirect', 'wp_shortlink_header', 11, 0 );

上記のファイルを書き換えても動作しますが、更新時など面倒なのでテーマディレクトリのfunctions.phpに記述します。

remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action( 'wp_head', 'wp_print_styles', 8 );
remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'rel_canonical' );

さらにWordPress3.1から？インラインスタイルも自動的に追加されます。
これはWordPressの管理画面から簡単にオンオフすることができます。
ユーザー >> あなたのプロフィールを開き下記画面の「管理バーの表示」の「サイトを表示する際」のチェックを外します。

これで不要なコードが削除されます。
前述しましたがサイトに寄って要否が変わってきますので不要な分だけ削除を行うようにしましょう。

2011年7月20日水曜日

テンプレートタグwp_title()で区切り文字を右に表示する

基本的なところですがちょっと悩んだんでメモ程度に。
デフォルトのまま、サイト名とページ名を表示する場合、

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

上の記述の場合、表示結果は「サイト名 >> ページ名」といった形になります。

これを「ページ名 >> サイト名」と表示したい場合

<title><wp_title('>>', true, 'right');> <?php bloginfo('name'); ?></title>

上のように記述します。

【wp_title】

sep

タイトルの前または後ろに表示するテキスト

echo

タイトルを表示（true）、非表示（false）

seplocation

区切り文字を左（''）、右（'right'）

2011年7月19日火曜日

CSSで縦書き

CSSで文字を縦書きにしたい場合は「writing-mode」を指定します。

【writing-mode】（IE）

tb-rl

縦書き（Top to Bottom - Right to Left）

lr-tb

横書き（Left to Right - Top to Bottom）

【-webkit-writing-mode】（webkit）

vertical-rl

縦書き

horizontal-tb

横書き

以下、サンプル（IE、webkitでみると縦書きになってるはず）

CSSで縦書き - jsdo.it - share JavaScript, HTML5 and CSS

Firefoxはtransformのrotateで回転はしてくれますが縦書き用のフォント（@）が正しく表示されないようです。

1カラムのCSSレイアウト

1カラムレイアウトというかヘッダー・メイン・フッターと段組みし、フッターをページ下部に表示したい場合があると思います。
メイン画面のページ量にもよりますが量が少ない場合、メイン部分とフッター部分がくっついてページの下のほうが空いてしまうことが多々あると思います。

フッターをページ下部に表示したい場合は「height:100%」のボックスを使って表示させることができます。

<style>
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
div#container {
    position: relative;
    margin: 0 auto;
    width: 800px;
    height: 100%;
    min-height: 100%;
    background: #cccccc;
}
body > div#container {
    height: auto;
}
div#header {
    height: 50px;
}
div#main {
    padding-bottom: 50px;
}
div#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}
</style>

<div id="container">
 <div id="header">ヘッダー</div>
 <div id="main">メイン</div>
 <div id="footer">フッター</div>
</div>

出力したイメージ↓（かなりアバウトですが...）

「height:100%」を使う際の注意点はhtmlとbodyにheight:100%を記述することくらいです。

min-heightやbody > #containerなどは各ブラウザへの配慮といったかんじですのでそういうものくらいでいいと思います。

2011年7月15日金曜日

CSS3のanimation

CSS3のanimationではtransitionと同じようにスタイルの切り替え時などにアニメーションを作成することができます。
transitionと違う点はキーフレームを使うことでより細かな設定ができる、ループ処理ができるなどがあります。

@keyframes 'ani1' {
    0% {
        background-color: #ff0000;
    }
    50% {
        background-color: #00ff00;
    }
    100% {
        background-color: #0000ff;
    }
}

上の'ani1'と記述している部分がアニメーション名になります。
キーフレームの各ポイントは0%～100%の間で設定を行います。

【animation-name】・・・キーフレームのアニメーション名

アニメーション名

変化させるアニメーション名を指定する
複数指定する場合はカンマ（,）区切りで指定する

【animation-duration】・・・アニメーションにかかる時間

時間

アニメーションにかかる時間を指定する

【animation-timing-function】・・・アニメーションの仕方（タイミング）

linear

一定の速度で変化

ease

開始と終了がなめらか

ease-in

ゆっくり始まる

ease-out

ゆっくり終わる

ease

ゆっくり始まり、ゆっくり終わる

【animation-delay】・・・アニメーションがはじまる時間

時間

アニメーションにはじまる時間を指定する

【animation-iteration-count】・・・アニメーションの繰り返し回数

回数

数値でアニメーションの回数を指定する

infinite

無限に再生する

【animation-direction】・・・アニメーションを交互に反転再生させる

normal

正転の再生を繰り返す

alternate

正転、反転の再生を繰り返す

それぞれの要素を個別に記述することもできますが1行で記述することも可能です。

animation: 'ani1' 3s linear 0 infinite alternate;

下記に簡単なサンプルのせてます。

CSS3のanimation - jsdo.it - share JavaScript, HTML5 and CSS

2011年7月14日木曜日

CSS3のtransition

CSS3を使うとJavascriptやhoverなどでスタイルを変更する場合、通常すぐにスタイルが切り替わりますが、transitionを使うことでスムーズにスタイルを変化させることができます。

【transition-property】・・・変化を適用するプロパティ名

プロパティ名

変化させるプロパティ名（background-colorやcolorなど）を指定する
複数指定する場合はカンマ（,）区切りで指定する

all

すべてのプロパティを変化させる

【transition-duration】・・・変化にかかる時間

時間

変化にかかる時間を指定する

【transition-timing-function】・・・変化の仕方（タイミング）

linear

一定の速度で変化

ease

開始と終了がなめらか

ease-in

ゆっくり始まる

ease-out

ゆっくり終わる

ease

ゆっくり始まり、ゆっくり終わる

【transition-delay】・・・変化がはじまる時間

時間

変化にはじまる時間を指定する

それぞれの要素を個別に記述することもできますが1行で記述することも可能です。

transition: all 1s ease 0;

下記にサンプルのせてます。

CSS3のtransition - jsdo.it - share JavaScript, HTML5 and CSS

2011年7月12日火曜日

VBでcontinue文

continue文とはDo、For、Whileループの中から、以降の処理をスキップしてループの終了句（Next、Loop）の直前まで処理を移すことができます。
ただし、continueステートメントはVB2005から追加されたみたいでVB6やVB.NETではcontinueを使用することができません。

VB6やVB.NETでcontinue文を使用したい場合は、Gotoを使うとcontinueと同等のことができると思います。

【VB6、VB.NET】

For i = 1 To 10
    If i = 5 Then
        Debug.Write("hoge")
        Goto continue
    End If

    Debug.Write(i)

continue:
Next

【VB2005】

For i = 1 To 10
    If i = 5 Then
        Debug.Write("hoge")
        continue For
    End If

    Debug.Write(i)
Next

どちらの結果も「1234hoge678910」となります。

VB.NETでExcelのセルに色をつける

VB.NETでExcelを操作していて指定のセルに背景色をつける場合は、RangeオブジェクトのInteriorプロパティを使用します。
Interiorはセルの背景色など色に関する情報を管理しています。

色の指定には「ColorIndex」と「Color」があります。

ColorIndexはあらかじめ割り当てられた番号で指定します。（全部で57種類：0～56で指定）

Dim xlRange = xlSheet.Range("A1")
Dim xlInterior = xlRange.Interior

xlInterior.ColorIndex = 6 '黄色

System.Runtime.InteropServices.Marshal.ReleaseComObject(xlInterior)
System.Runtime.InteropServices.Marshal.ReleaseComObject(xlRange)

Colorは16進数による色の値を指定します。

Dim xlRange = xlSheet.Range("A1")
Dim xlInterior = xlRange.Interior
Dim wRGB = System.Drawing.Color.FromArgb(0, 0, 255)

xlInterior.Color = System.Drawing.ColorTranslator.ToWin32(wRGB)

System.Runtime.InteropServices.Marshal.ReleaseComObject(xlInterior)
System.Runtime.InteropServices.Marshal.ReleaseComObject(xlRange)

2011年7月8日金曜日

jQueryを使ったスライドとHTML5でのスライド

最近はHTML5が流行ってますが簡単な画面なスライドをjQuery版とHTML5版を作ってみました。
（作ったと言っても大したこと作ってませんが）
jQueryとHTML5でそれほどソースを変えているわけではありませんが、HTML5（というよりCSS3）でエフェクトをかけるのは何かと便利です。

【jQueryでスライド】

jQueryでスライド - jsdo.it - share JavaScript, HTML5 and CSS

【HTML5でスライド】

HTML5でスライド - jsdo.it - share JavaScript, HTML5 and CSS

2011年7月7日木曜日

Flash Builder 4.5（体験版）を試す

先日アップデートされたFlash Builder（体験版）を試してみました。

ダウンロード～インストールまで時間がかかったけどインストール後は問題なく動作しました。
Windows環境でiPhoneアプリを作成できるのはものすごく嬉しいけど、実機でデバッグ・インストールするにはやはりiPhoneデベロッパーアカウントID（iOS Developer Program）を取得する必要があるようです。
（Developer Programには$99/yearが必要）

やはりいろいろと制限はあるみたいですがとりあえず試してみる価値はあると思います。

これからはスマートフォン開発もFlash Builder4.5で！～ Twitter API連動のiPhoneアプリを3分で構築～

2011年7月6日水曜日

IISをすばやく再起動する

WebサーバでIISを使用している場合、以下のコマンドですばやくIISサービスを再起動することができます。

【IIS6の場合】

c:\ > iisreset

【IIS7の場合】

c:\ > iisreset /restart

IIS6では「iisreset」だけで再起動されていたがIIS7になって「iisreset」ではならない？
コマンドが変わったのかと思いきや「iisreset /?」でオプションを見てみると、変わってるかんじはありません。

【IIS6の場合】

【IIS7の場合】

よくわかりませんが「iisreset /restart」とすることでどちらともサービスの再起動が可能です。
ちなみにiis7（というよりvista、7、2008 Server）とかでは場合によって「管理者として実行」が必要かもしれません。

2011年7月4日月曜日

ASPでjQueryを使う

ASPでjQueryを使用する際に面倒なのが文字コードの扱い方。

Metabase.xmlで文字コードをUTF-8に変えておけば特に問題なく使えるのだがそのままだとshift_jisになっている。
shift_jisの状態でjQueryの$.getなどのメソッドを使用すると文字化けしてしまいます。

その場合は正確に文字コードを指定することでASPでもjQueryでのデータのやり取りが可能になります。

指定方法はまずASPの先頭に以下を追記します。

<%@ CODEPAGE = 65001 %>

65001というのがUTF-8の指定になります。（通常は932：shift_jis）

そしてそのファイルをUTF-8形式で保存します。

最後にscriptタグのところにもUTF-8を宣言します。

<script type="text/javascript" src="jquery.js" charset="utf-8"></script>

これで$.getとかでも文字化けせずにデータのやり取りが可能です。

てるてる坊主

2011年7月29日金曜日

CSS3でメニューを作ってみました

2011年7月28日木曜日

複数バージョンのIEを動かす

2011年7月27日水曜日

CSS3で吹き出し風のリンクボタン

2011年7月26日火曜日

metaタグのviewportでスマホ向けサイトのサイズを制御する

Media Queriesを使ってWEBサイトをiPhoneに対応させる

2011年7月25日月曜日

Chromeで$(document).ready(fn)

ChromeやFireFoxでtextareaのtextareaリサイズの制御

2011年7月22日金曜日

WordpressでjQueryを使う

wp_headから不要なコードを削除する

2011年7月20日水曜日

テンプレートタグwp_title()で区切り文字を右に表示する

2011年7月19日火曜日

CSSで縦書き

1カラムのCSSレイアウト

2011年7月15日金曜日

CSS3のanimation

2011年7月14日木曜日

CSS3のtransition

2011年7月12日火曜日

VBでcontinue文

VB.NETでExcelのセルに色をつける

2011年7月8日金曜日

jQueryを使ったスライドとHTML5でのスライド

2011年7月7日木曜日

Flash Builder 4.5（体験版）を試す

2011年7月6日水曜日

IISをすばやく再起動する

2011年7月4日月曜日

ASPでjQueryを使う

ARCHIVES

Twitter