WebデザインノートBOOK

Webクリエイターに関する勉強を書き記したブログになります。

おいしいステーキの焼き方・筋切り・食べ方|リニューアル!

おいしいステーキの焼き方・筋切り・食べ方のサイトをリニューアルしました!

自宅でかんたんに、
美味しくワンランク上のステーキを作れるよう、焼き方や筋切りなどのテクニックをより詳しく解説しています。

おいしいステーキの焼き方・筋切り・食べ方
おいしいステーキの焼き方・筋切り・食べ方

終わりなき旅

止まってしまったらそこまで
走らなくてもいいから
いつまでも歩き続けよう


半年間の授業が終わった今、
なんだか自分も新たに気合いが入ります!


未熟な副講師で至らない点がものすごくあったと思います。
それでも皆さん、あたたかく接して頂いて、
だからこそなんとか最後まで続けることが出来たんだと思います。



さいごに、
半年間、本当にお世話になりました。
本当にありがとうございました!

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タグに【めも】

http://q.hatena.ne.jp/1202536562

IEでもCSS3を効かせる

ただし以下の2つの指定に限ります。

    • (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の組み合わせで表現することも可能です。(もちろん可変ボックス)
使用するしないはサイトや制作者個人の意向に委ねます。



スマホ用画像サイズ自動変換スクリプト

実機テストをおこなって調整しました。
現在内容を更新してあります。

続|スマホ用画像サイズ自動変換スクリプト

続|スマホ用画像サイズ自動変換スクリプト

_____________________________
【3/22更新】
iOSAndroidともに実機テストをおこなって調整した結果、少し短くおさまりました。もちろんスマホの画面を縦横に回転しても対応できます。
※ついでにPCブラウザのウインドウサイズを変えた時にも対応してます(笑)
なお、下記ソースは新しい物に書き換えてあります。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄

とりあえずこれで落ち着いた。
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/imageResize.js"></script>
<script type="text/javascript">
    // カンプ作成時に想定していたサイトの全体幅を設定
    imageResize.config.iniSiteWidth = 480;
  
    // 画面の向きを変えた時の変換
    $(window).resize(function() {
        $('html').css('width', window.innerWidth);
        $('body').css('width', window.innerWidth);
        imageResize.setSize();
    });
  
    // 画像リサイズ
    imageResize.set(); 
</script>
imageResize.js
/*
 * imageResize.js
 * http://d.hatena.ne.jp/bondx2/
 *
 * @version
 * 1.0.0 (March 14 2012)
 * 1.2.0 (March 22 2012)
 *
 * @copyright
 * Copyright (C) 2012 http://d.hatena.ne.jp/bondx2/
 */

if ( ! window.imageResize ) var imageResize = function() {
    var isc = {
        // configuration
        config: {
            margin: 0
           ,iniSiteWidth : 0
        }
        ,items: null
        ,getItems: function(){
            if ( ! isc.items ) isc.items = function() {
                var m, i
                    ,images = document.getElementsByTagName("img")
                    ,items = new Array()
                ;
                for ( i = 0; i < images.length; i++ ) {
                    m = images[ i ];
                    items.push( {
                        originalWidth: m.width
                        ,originalHeight: m.height
                        ,img: m
                    });
                }
                return items;
            }();
            return isc.items;
        }
        ,setSize: function() {
            var w, h, m, i
                ,items = isc.getItems()
                ,config = isc.config
            ;
            for ( i = 0; i < items.length; i++ ) {
                m = items[ i ];
                w = m.originalWidth;
                h = m.originalHeight;
                m.img.width = (window.innerWidth * w) / config.iniSiteWidth;
                if((m.img.width % 2) == 1 ) {
                    m.img.width += 1;
                }
                m.img.height = h * (m.img.width / w);
                if((m.img.height % 2) == 1 ) {
                    m.img.height += 1;
                }
            }
        }
        ,set: function() {
            var f = isc.setSize;
            window.addEventListener( "load", f, false );
            window.addEventListener( "orientationchange", f, false );
        }
    };
    return isc;
}();

スマホ用画像サイズ自動変換スクリプト

スマホは縦表示と横表示がある為、カンプ作成時に画像解像度に注意しないと、横表示したときに画像がきれいに表示されなくなってしまう。


で、大きめに作った画像たちを、各スマホ画面にジャストフィットさせる為のスクリプトを作たった。
もちろん、画像ごとに比率で拡大縮小を行うので、レイアウトが崩れることはまずないと思う(cssでちゃんとレイアウトしているのが前提)。

ただし!cssに指定した画像には効きません。


まずhtmlにて呼び出し&初期値設定。

<script type="text/javascript" src="js/imageResize.js"></script>
<script type="text/javascript">
// カンプ作成時に想定していたサイトの全体幅を設定
imageResize.config.iniSiteWidth = 480;
// リサイズ開始
imageResize.set();
</script>


次にメインスクリプト

/*
 * imageResize.js
 * http://d.hatena.ne.jp/bondx2/
 *
 * @version
 * 1.0.0 (March 14 2012)
 *
 * @copyright
 * Copyright (C) 2012 http://d.hatena.ne.jp/bondx2/
 */
 

if ( ! window.imageResize ) var imageResize = function() {
var isc = {
    // configuration
    config: {
        margin: 0
        ,iniSiteWidth : 240
        ,portraitWidth :  window.innerWidth
        ,landscapeWidth :  window.innerheight
		
    }
    ,items: null
    ,getItems: function(){
        if ( ! isc.items ) isc.items = function() {
            var m, i
                ,images = document.getElementsByTagName( "img" )
                ,items = new Array()
            ;
            for ( i = 0; i < images.length; i++ ) {
                m = images[ i ];
                items.push( {
                    originalWidth: m.width
                    ,originalHeight: m.height
                    ,img: m
                } );
            }
            return items;
        }();
        return isc.items;
    }
    ,setSize: function() {
        var w, h, m, i
            ,items = isc.getItems()
            ,config = isc.config
            ,maxWidth = Math.abs( window.orientation ) === 90
                ? config.landscapeWidth - config.margin
                : config.portraitWidth - config.margin
        ;
        for ( i = 0; i < items.length; i++ ) {
            m = items[ i ];
            w = m.originalWidth;
            h = m.originalHeight;
            m.img.width = (window.innerWidth * w) / config.iniSiteWidth;
            m.img.height = h * (m.img.width / w);
        }
    }
    ,set: function() {
        var f = isc.setSize;
        window.addEventListener( "load", f, false );
        window.addEventListener( "orientationchange", f, false );
    }
	
};
return isc;
}();
このスクリプトのミソはここ
m.img.width = (window.innerWidth * w) / config.iniSiteWidth;
m.img.height = h * (m.img.width / w);

1行目は、
「初期サイト幅」:「デバイス画面幅」 = 「初期画像幅」:「修正後画像幅」
の計算をおこなっている。
求めるべき答は、修正後画像幅(m.img.width)。

2行目は、修正後画像高さの算出をおこなう。
「修正後画像幅 / 初期画像幅」で拡大縮小の比率が出るので、その比率で修正後の画像の高さを求める。




※ただし、
「window.orientation」が効かないスマホもあるらしいので、そうした場合もちろんこのスクリプトは効かない。
しかも、最初の画面幅で画像をリサイズしたままになるので、向きを変えた時に再度画像がリサイズされない。


向きを変えた時の画像リサイズは、先に読み込むソースを下記のように修正したらできました。

結局以下のようにしました。

<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/imageResize.js"></script>
<script type="text/javascript">
// カンプ作成時に想定していたサイトの全体幅を設定
imageResize.config.iniSiteWidth = 480;

var initDispWidth = 0;
if(window.innerWidth > window.innerHeight){
  initDispWidth = imageResize.config.landscapeWidth;
}else {
  initDispWidth = imageResize.config.portraitWidth;
}

// リサイズ開始
imageResize.set();
window.onorientationchange = function() {
  if(window.innerHeight > window.innerWidth){
      $('body').css('width', initDispWidth);
      imageResize.set();
    }else{
      $('body').css('width', initDispWidth);
      imageResize.set();
      
  }
}
</script>


う〜ん。
まだダメみたい。

スマホ判定入れて幅指定とかもっと詳細化しないとダメそう。


つづく

Webサイトをまるごと解析

サイト解析&ダウンロード&リンクチェックなどに使える。

サイトのファイル構成まで見れるので、ブラウザに付いている「Webページを保存」より高性能。Web サイトの研究など勉強の過程にいかがですか?w

Website Explorer(フリーソフト)