
Studio Yuksのサイト制作のお手伝いをさせていただきました

ブログずっと放置してましたが生きてます!
1年と数ヶ月の間に転職して違う業界に移りましたが、またぼちぼちとブログの方も更新していきたいなーと思ってます。
前置きはおいておいて、イラストレーターの関祐子さんのWebサイト「Studio Yuks」のサイト制作のお手伝いをさせていただきました!
続きを読む


CSS3で横並びのメニューを簡単に作る方法

HTML5とCSS3って、IEを考えるとまだまだ先かな・・・と思っていたのですが、スマートフォンの登場で事情が変わってきました。
スマートフォンサイトだとIEを気にしなくていいので、HTML5とCSS3を使えるっ。
というわけで、CSS3で横並びのメニューをさくっと作ります。
続きを読む


liタグで画像を用いたメニューを作った時、下に隙間が出来てしまったらやってみること
先日会話中に
「うにが『そんなこともあったような気がする』って言う時って、実はまったく覚えてないことが多いよね」
と言われました。
図星とまでは言いませんが、、、半分ぐらいあってます、きゃ。
IE、Firefox問わず(主にIE)、リストでメニューを作っている時、下に隙間ができることがよくあります。
3ピクセルか4ピクセルくらいの、謎の隙間です。
そんな経験ありませんか?
画像のheightが決まっているならば、
ul#menuList li { height: 50px; overflow: hidden; }とかでもいいかもしれませんが、メニュー画像のheightがバラバラの場合、なかなかそうはいかないです。
そんな時は、以下のように指定してみてください。
ul#menuList img { vertical-align: top; }これで直るかもしれません。
なぜ直るのかは、よく知りません(ゎ


リダイレクトあれこれ
昔はホームページを見ていると、よく
「このサイトは移転しました、10秒後に移動します。移動しない場合は・・・」
的なのを見かけたのですが、最近そういうのあまり見かけない気がします。
ウェブサイトの閲覧の仕方が変わったのかな?
見ているカテゴリが違うってのもあるかもしれないです。
↑のような感じの時に用いられるリダイレクト処理。
ちょっと仕事でリダイレクト処理を扱うことがあったので、少ないですが思いつく範囲で列挙します。
HTMLのMETAタグを用いる場合
<META HTTP-EQUIV="refresh" content="5;URL=http://www.hogehoge.jp/to/">
javascriptを用いる場合
location.href = 'http://www.hogehoge.jp/to.html'; /* ↓履歴を残さずにページを移動するメソッドだが、 * Firefoxだと普通に履歴が残っている為に戻ることが可能。 */ location.replace('http://www.hogehoge.jp/to.html'); // 5秒後に移動する場合 setTimeout("redirect()", 5000); function redirect() { location.href = '../to.html'; }
.htaccessを用いる場合
Redirect permanent /from/ http://www.hogehoge.jp/to/ # mod_rewrite <IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^index.html$ http://%{HTTP_HOST}/index.php [L,R] RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [L,R] </IfModule>※.htaccessを用いる時は記述を間違えるとサイト全部アクセス出来ないという状況になる可能性もあるので、扱いには注意。
思い浮かんだのはこれくらいですー。
他にも色々あると思いますが、必要なものをチョイスするのがベストです。


IE6で、直前にあるボックスのmarginを引き継いでしまうバグ
皆様元気にIE8対策してますか?
「まだIE8の浸透率低いだろうし、別にいいかも・・・」
とか思ってしまいます、私が。
でも、IE6に比べると全然いいんじゃないかなって気もします。
よく、リストなどをfloatさせて横並びにするCSSのテクニックがあります。
私もメニューだったり、更新履歴だったりのところで使ったりするものなのですが、このボックス要素をfloatさせるというところに予想外のバグが潜んでいたりします。
たとえば、こんな感じです。
html, body, h1, h2, h3, h4, h5, h6, a, p, addres, ul, ol, li, dl, dt, dd, table, caption, th, td, img, form, fieldset { margin: 0; padding: 0; border: none; font-style: normal; font-weight: normal; font-size: 100%; list-style-type: none; } #container { width: 700px; } h1{ width: 700px; height: 30px; margin-bottom: 20px; background-color: #900; color: #fff; } .date_list dt { float: left; width: 100px; height: 30px; margin: 0; background-color: #090; color: #fff; } .date_list dd { display: inline; float: left; width: 600px; height: 30px; margin: 0; background-color: #009; color: #fff; }
<div id="container"> <h1>これはタイトルです。</h1> <dl class="date_list"> <dt>○月×日</dt> <dd>これはダミーです。</dd> </dl> <dl class="date_list"> <dt>○月×日</dt> <dd>これはダミーです。</dd> </dl> <div class="text_area"> これはダミーです。<br /> これはダミーです。<br /> これはダミーです。 </div> これはダミーです。 </div>
これをFirefoxやIE7で見ると、意図したとおりになります。

ですが、IE6では意図していないところに隙間ができてしまいます。

どうも、直前にmarginを持ったボックスがあると、そのmarginを引き継ぐようです。
引き継ぐのは、margin-bottomの値のみ。
ちなみに、clearfixを使うと悪化します。
試してみたclearfixは、
clearfixでfloatを解除 – d-spica
↑のもので試してみました。
(IE6で時々、clearfixの高さが0にならないんですよね・・・その辺は未だなぞ)
なので、
「直前のmarginを引き継ぐのなら、marginが0の子を入れてあげればいいじゃない」
ってことで、h1タグの直後に
<div style="height: 0px; overflow: hidden;"></div>
を挿入。
すると、正しく表示されるようになりました。
もっとスマートな方法があればいいんですけどね。

- 脱出ゲームを作成しました
- Studio Yuksのサイト制作のお手伝いをさせていただきました
- よみがな.netを公開しました
- Slug or PostIDプラグインがバージョン1.0になりました。
- お問い合わせフォームへの連投を防ぐ方法+α
- phpMyAdminのsetup.phpに脆弱性があるみたいです
- 1つのデータベースに複数のWordPressをインストールする方法
- 仕事とプライベートで使っているマウスをご紹介
- WordPressでiFrameが消えないようにする記述が必要なくなったようです
- CSS3で横並びのメニューを簡単に作る方法
- HTML+CSS (8)
- JavaScript (12)
- PHP (21)
- PostgreSQL (4)
- WordPress (8)
- WordPressプラグイン (1)
- Movable Type (13)
- Photoshop (2)
- Illustrator (2)
- Firefox (5)
- ツール (2)
- 雑記 (23)
- 未分類 (3)
- Android (1)