Blogブログ

ローカルマシン内のみで動作するドメインを割り当てる場合のログです。 (xampp利用の場合) ファイルを２つ割り当てて、サーバの再起動を行うという流れになります。 1.httpd-vhosts.conf ホストの設定を行います。 ローカルマシンなので、最低限の設定のみ行います。 ■path /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf ファイル内にコメントされた状態の以下の部分をコピーしコメントを外して、下に加えていきます。 ## ##ServerAdmin postmaster@dummy-host2.localhost ##DocumentRoot “C:/xampp/htdocs/dummy-host2.localhost” ##ServerName dummy-host2.localhost ##ServerAlias www.dummy-host2.localhost ##ErrorLog “logs/dummy-host2.localhost-error.log” ##CustomLog “logs/dummy-host2.localhost-access.log” combined ## このような感じです。 . . . DocumentRoot “D:/htdocs/site1” ServerName site1.localhost   ※tips: vimの複数行のコピー・ペースト 「V」 でvisual line mode. 「j」 を押してヤンク開始したい行を指定。「y」をおして、最後の行を指定。 「p」を押すと、カーソルの後ろにヤンクした行がペーストされます ２．hosts URLの名前解決を行います。 ■path /private/etc/hosts 127.0.0.1 localhost となっているところの次に以下の行を追加し、上書き保存します。 127.0.0.1 site1.localhost 後はapatchを再起動します。 XAMPPの場合はコンパネから行えますが、terminalからの方が速いですね。 sudo /Applications/XAMPP/xamppfiles/xampp […]

背景画像にLazyLoadをあてれるのかと思って試してみたところ、普通に出来るようでした。 例のpadding-topを使った高さをあわせる方法で、背景画像のサイズもウィンドウに応じて可変します。 スマホの縦に長いページなんかには、画像の読み込みを遅らせられるので有効かも。  

背景画像のサイズに応じて要素を可変させたい。 レスポンシブコーディングなどで背景に画像を当てるような場合、高さが可変にならずに困るんですが、その解決策を見つけました。 この場合padding-topが使えるみたいです。 下によると、 ‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’ Percentages: refer to width of containing block とあるので、％で指定すればpadding-topやpadding-bottomを指定しても親要素の幅に対する割合になるようです。 Chrome, safari, FF, IE9~で確認できました。 参考： https://t87r.wordpress.com/2013/07/07/%E3%82%B5%E3%82%A4%E3%82%BA%E5%8F%AF%E5%A4%89%E3%81%A7%E7%B8%A6%E6%A8%AA%E6%AF%94%E5%9B%BA%E5%AE%9A%E3%81%AE%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E8%A6%81%E7%B4%A0%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99/ http://www.w3.org/TR/CSS2/box.html#propdef-padding-top ありがとうございます！

apple風のハンバーガーアイコン製作メモ。 svgは使ってませんが、それっぽく実装するために。 アニメーションはCSS3で制御しています。 クラスに応じて角度を変えたりしているだけですね。 ハンバーガーアイコン以外にも、応用効きそうです。 参考：http://www.elijahmanor.com/css-animated-hamburger-icon/ Thanks!!

フォント指定する際に調べたことの備忘録。 CSSでフォント指定をする際に、.ttc拡張子のファイルを読み込ませたのですが、正しくフォントが表示されていませんでした。※win7 chrome 例:Doesn’t work @font-face { font-family: ‘Cochin’; src: url(‘./font/cochin.ttc’) format(“truetype”); } h1{ font-family : “Chochin”; } 理由を調べたところ、どうやらttcは複数フォントを固めたzipのようなもので、通常使うものとは違うと。 そこで下のサイトでttfに変換して、読み込ませたところ、正常に動作しました。 http://www.files-conversion.com/font-converter.php @font-face { font-family: ‘Cochin’; src: url(‘./font/cochin.ttc’) format(“truetype”); } h1{ font-family : “Chochin”; }   フォントの形式について 調べていると、様々なフォントの形式があるようです。 .ttf (trutype形式) winやmacで使う一般的な形式 .ttf, .otf (opentype形式) adobeとmicrosoftが共同開発したフォントの形式。OSや機種の違いを問わず表示される .woff (woff形式) web open font format という、その名の通りwebに特化した形式。 データが軽いらしい。 .svg (svg形式) svgを利用した形式 […]

メモ代わりに。 jsでfunction_existsのように関数が定義されているかチェックします。 Javascript if( typeof function_name == ‘function’ ){ … 同じ様に、jQueryのプラグインの場合。 jQueryプラグイン if( [‘plugin_name’] || $.fn[‘plugin_name’] ){ …