Webデザインの勉強を書き記したノートBOOK
【先生サイトへのリンク】
【自分の作ったサイトのリンク】
2012-03-28
終わりなき旅
止まってしまったらそこまで
走らなくてもいいから
いつまでも歩き続けよう
半年間の授業が終わった今、
なんだか自分も新たに気合いが入ります！
未熟な副講師で至らない点がものすごくあったと思います。
それでも皆さん、あたたかく接して頂いて、
だからこそなんとか最後まで続けることが出来たんだと思います。
さいごに、
半年間、本当にお世話になりました。
本当にありがとうございました！
2012-03-23
select optionに自動で都道府県を追加
<select name...> <option value="北海道">北海道</option> <option value="青森">青森</option> ： ： </select>
これを楽して作成＆HTMLソースをキレイに書きたい人向けに作りました。
html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/autoPrefecturesAdd.js"></script> ： ： </head> <body> ： ： <select name="prefectures" class="prefectures"></select>
jQueryと本題のjsを読み込み、selectタグにclass指定するだけ。
クラス名は「prefectures」。
javascript
/* * autoPrefecturesAdd() * http://d.hatena.ne.jp/bondx2/ * * @version * 1.0.0 (March 23 2012) * * @copyright * Copyright (C) 2012 http://d.hatena.ne.jp/bondx2/ */ $(function(){ var prefectures = new Array("北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"); for(var i=0; i < prefectures.length; i++){ $("select.prefectures").append('<option value="'+ prefectures[i] + '">' + prefectures[i] + '</option>'); } });
……半分あそびで(笑)
フォーム送信のsubmitボタンをimgタグに【めも】
2012-03-22
IEでもCSS3を効かせる
ただし以下の２つの指定に限ります。
- border-radius
- box-shadow
- (opacity)もできました。他にもあるかもしれません。
準備と使い方
1.必要なファイルのダウンロード
まず以下のサイトから「ie-css3.htc」なるものをダウンロードする。
※ダウンロードリンクは下記サイトの左上にあります。
CSS3 support for Internet Explorer 6, 7, and 8
2.CSSに一行追加する
次に、CSS3の指定があるセレクタに対して、「behavior: url(ie-css3.htc);」と追加する。
例)
.box { -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 10px 10px 20px #000; -webkit-box-shadow: 10px 10px 20px #000; box-shadow: 10px 10px 20px #000; behavior: url(ie-css3.htc); ￣￣￣￣￣￣￣￣￣￣￣￣￣￣ }
これでひとまず完了です。
簡単ですね。
ただし、様々な不具合を内包しているそうで...
次の項からその対策を少し紹介します。
不具合対策
1.サーバーが「.htc」ファイルを許可していない
サーバーが任意のファイル形式に対応していない場合もあります。
その場合、「.htaccess」に以下の行を追加すればOKです。
AddType text/x-component .htc
サイト内に「.htaccess」が無ければ新規作成します。
基本的なことですので、作成方法は他サイトを参照してください。
2.角丸ボックスを重ねることが出来ない
角丸ボックスの中に、更に角丸ボックスを入れる場合に上手くいかないことがあるようです。
対策として、外と中の両方のボックスに対するCSSに以下を追加すれば可能です。
※zoomプロパティがW3Cのチェックでひっかかります。
position:relative; zoom:1;
例）
.box { position:relative; ￣￣￣￣￣￣￣￣￣￣ zoom:1; ￣￣￣￣ -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 10px 10px 20px #000; -webkit-box-shadow: 10px 10px 20px #000; box-shadow: 10px 10px 20px #000; behavior: url(ie-css3.htc); }
3.内側の角丸ボックスが消えてしまう
厳密に言うと、"background"や"border-radius"、"box-shadow"が消えてしまいます。
自分が確かめた範囲だと、IE8の時だけ消えてしまいました。
対策としては、上の2.の項目で追加した所に「z-index」指定を追加すれば対応できました。
※もちろん外側ボックスよりも内側ボックスのz-index数値は上にしてあげて下さい。
その他
その他にもいろいろ不具合があるみたいですが...
とりあえず今の段階としてはCSS3で表現する以外に、画像・HTML・CSSの組み合わせで表現することも可能です。(もちろん可変ボックス)
使用するしないはサイトや制作者個人の意向に委ねます。
スマホ用画像サイズ自動変換スクリプト
実機テストをおこなって調整しました。
現在内容を更新してあります。
続｜スマホ用画像サイズ自動変換スクリプト
