Web Designing satoimo18+

幅、高さが固定のblock要素を画面の中央に表示する方法のメモ。
下記の図のようにネガティブマージンで上下左右中央に配置できます。

• サンプル

ソースはこちら。

#wrap {
  position:absolute;
  left: 50%;
  top: 50%;
  width:400px;
  height:240px;
  margin-left: -200px;
  margin-top: -120px;
}

ちなみにサンプルでは背景画像も中央に配置していますが、
配置方法のソースは以下です。

body {
  background:url(bg.gif) no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

スマートフォンサイトを制作中に、通常のリンクタグとformのsubmitボタンのデザインを共通化したい、というシチュエーションがあったので、メモ代わりに。
下図のようなデザイン統一を目指します。



まずは、ボタンのデザインをCSS3で定義します。
ここではgradient等の説明は省略します。

.button {
  background: #8fd324;
  background: -moz-linear-gradient(top, #b1e362 0%, #a2d847 50%, #8acb1f 50%, #7dbf0d 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #b1e362), color-stop(0.5, #a2d847), color-stop(0.5, #8acb1f), color-stop(1, #7dbf0d));
  border: 1px solid #5b9400;
  border-bottom: 1px solid #568a03;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: inset 0 1px 0 0 #c8eb8f;
  -webkit-box-shadow: inset 0 1px 0 0 #c8eb8f;
  box-shadow: inset 0 1px 0 0 #c8eb8f;
  color: #fff;
  font:16px "ヒラギノ角ゴ Pro W3",tahoma,arial;
  padding: 7px 0 8px 0;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 -1px 1px #426b01;
  width: 200px;
}

.button:hover {
  background: #689b13;
  background: -moz-linear-gradient(top, #9ad055 0%, #8dc241 50%, #78b41b 50%, #6da70a 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9ad055), color-stop(0.5, #8dc241), color-stop(0.5, #78b41b), color-stop(1, #6da70a));
  cursor: pointer;
}

.button:active {
  -moz-box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  -webkit-box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  cursor: pointer;
}

submitボタン用のclass定義をします。
-webkit-appearanceはSafariのCSS3拡張プロパティで、Sarfari用のインターフェースを実現しているものなので、ここでは切っておきます。
input内ではfont指定が外れることがあるので、改めて定義しておきます。

.btn_submit {
  -webkit-appearance: none;
  font:16px "ヒラギノ角ゴ Pro W3",tahoma,arial;
}

続いてaリンク用のclass定義。
borderの解釈がinputとは違うので、左右borderの2pxを引いておきます。

.btn_alink {
  width: 198px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

• サンプル

厳密に言うと、ブラウザによっては縦幅に若干誤差が出ます。
完全に同じになるのは、Google Chromeのみなので、Androidでは問題ないかと思います。


参考サイト： 　スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ

AndroidやiPhone対応サイトを作る際、CSSで画像背景ボタンを作成したり、CSS3でリンクボタンを作成することがあると思いますが、
Androidのブラウザで文字サイズを変更した場合やiPhoneを横に傾けた場合、リンクボタンで指定したheightの範囲を大幅に超えて文字がはみでる等、レイアウトが崩れることがあります。

CSSで-webkit-text-size-adjustのプロパティをnoneにすることで、機種やブラウザの設定に左右されず、指定したfont-sizeに固定することができます。

html,body {
  -webkit-text-size-adjust: none;
}

-webkit-text-size-adjustは、SafariやChromeで採用されているWebkit特有のプロパティで、初期値はautoです。
これにより、例えばiPhoneを横にした場合、画面の幅に合わせて文字の大きさが自動的に変わる、といった動作がおこります。

文字のサイズが変更されても問題ないサイトを制作するのが理想的ですが、レイアウトやデザイン上必要な際はこういった小技を使うこともありだと思います。


参考サイト：CSS HappyLife ZERO

jqueryプラグインのjMP3を使用したMP3プレイヤーを設置する方法を解説します。

といっても、このjMP3というプラグインは実はMP3プレイヤーとしての機能はなく、
実際は、jMP3からsinglemp3playerというFLASH swfファイルのmp3プレイヤーを使用します。
singlemp3player.swfだけでも機能としては十分ですが、複数設置する場合便利になります。

singlemp3playerは、設定によって、mp3ファイルを左クリックでダウンロードさせることができます。
HTMLでmp3ファイルに直リンクした場合、左クリックすると設定してある音楽プレイヤーが起動してしまうため、
「右クリック」→「名前を付けてリンク先を保存」といったこと（あるいはその注意書き）が必要になります。
そこを解消してくれるので、「試聴→ダウンロード」をPCにあまり詳しくない方でも簡単にできる仕様になるかと思います。

singlemp3playerサンプルページ
※自動再生ONに設定しているものがあるので音が鳴ります


基本的には、ｊMP3本家サイトやJavaScript+Ajax実戦サンプル集に記述されている通りなのですが、 個人的にデザインが気に入らなかったり等あったので少しいじりました。
なので、以下に記述したダウンロード先は、オリジナルファイルではなく個人的に用意したものになります。

1.singlemp3playerの設置

1. singlemp3playerをダウンロードして、singlemp3player.swfファイルをサーバーにアップロードします。
   ※flaファイルも同梱しているので、デザインいじりたい方もこちらからダウンロードしてください。
   

   -singlemp3playerの初期設定値

   • 自動再生なし
   • リピート再生なし
   • ボタン色　#333333
   • ダウンロードボタン表示

   -従来の(?)singlemp3playerからの変更点

   • 全体的なデザイン
   • 背景色を指定しなかった場合、背景を透過
   • 枠線の色指定で枠を表示

2. jMP3の設定

1. jMP3をダウンロードします。
2. singlemp3player.swfを置いたフォルダへのパスを通します。(33行目)

   var playerpath = "/media/flash/";

3. 初期設定をします。(36行目～46行目)
   HTML側で設定しなかった場合、ここの設定が適用されます。基本的にはいじる必要はないと思います。
   

   var options = {
   	"filepath": "",			// mp3ファイルのフォルダへのパス
   	"backcolor": "",		// 背景色
   	"forecolor": "",		// ボタン部分の色
   	"linecolor": "",		// 枠の色
   	"width": "25",			// 幅
   	"repeat": "no",			// リピート設定
   	"volume": "50",			// 音量
   	"autoplay": "false",	// 読み込み時の自動再生
   	"showdownload": "true",	// ダウンロードボタンの表示
   	"showfilename": "true"	// ファイル名の表示
   };

4. jquery.jmp3.jsをサーバーにアップロードします。

3. HTMLの記述

1. jqueryのライブラリにパスを通します。(<head>タグ内)

2. jMP3のパスを通し、設定をします。(<head>タグ内)前述したjMP3の設定で記述した項目は全て設定できます。
   上記4行目の「$(“.mp3file”)」で、jMP3を適用させるタグを設定します。
   ここでは.mp3fileと設定しているので、class=”mp3file”としたところ全てに適用されます。
   
   
3. MP3プレイヤーを表示させたい箇所にタグを記述します。
   

   <span class="mp3file">sound.mp3</span>