smp links – サイジング関連

■スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定
http://www.u-ziq.com/blog/2011/08/devicepixelratio.html

■アンドロイド対応にzoomをつかう方法
http://case-mobile-design.com/iphone-andoird%E5%90%91%E3%81%91%E3%82%B5%E3%82%A4%E3%83%88%E5%88%B6%E4%BD%9C%E3%81%AEjquery%E5%B0%8F%E6%8A%80%E9%9B%86/

■スマートフォンサイトで画像サイズは320px?480px?640px?
http://symple.jp/128.html

[2013/10/04追記]
■html zoom関連
http://sakaki0214.com/2011/06/05223738.html

http://qiita.com/Evolutor_web/items/84d38e7bfe18837b2f6f

■iScrollとzoomの共存について

[/2013/10/04追記]

smp links – 動画関連

■スマホでの動画プレイヤー埋め込み
→youtubeでいんじゃね?
http://d.hatena.ne.jp/hokaccha/20111215/1323931222


■スマホのサイズにあわせてYouTube iframeの幅を変更する
YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法
http://html5-css3.jp/tips/youtube-html5video-window.html

参考サイト補足:
Youtube(iframe版)でで親DIVに指定しているpadding-bottom 56.25%の
意味がわからんと思って調べたら縦幅の指定に必要なんですね。
padding-bottomの%指定によって導き出される値はコンテンツの幅から算出される(!)そうで。

なので幅:高さ = 100%:56.25%
動画の16:9比率のためそれにあわせてbox幅を作っておくと。
あと、padding-topの30pxはyoutubeのシークバーの幅っぽいです。

元記事:
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
※下の方のforIEはOLDIE向けのもよう。

ん~なるほど。

Sass links – カスタマイズ

■SassとDreamweaverのコードヒントでCSSをさらに効率的に|linker journal|linker
http://linker.in/journal/2010/10/sassdreamweavercss.php

・Dreamweaverでも編集できるようにする
・watchをつかってコマンドラインを毎回叩かなくてもcssが吐き出されるようにする
方法が書かれてあります。感謝!

ちなみに文中
/Applications/Adobe Dreamweaver CS5/Configuration/DocumentTypes/MMDocumentTypes.xml
は、Win7なら↓
C:\Program Files\Adobe\Adobe Dreamweaver CS5\configuration\DocumentTypes

l
l
以下はSassを便利にしてくれるCompassについて。
l
l
■Compassを使ってSassのCSS出力を手軽にしよう|Blog|Skyward Design
http://www.skyward-design.net/blog/archives/000118.html

上のwatchに関する記述で喜んでたのですが、さらにこちらの記事参考に環境を整えると
なにこれコマンドライン叩くのが楽になって超便利。。
l
l
■CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 – howtohp
http://howtohp.com/css/compass.html

■コンパスは自動アップデートしてくれるようです。
なのでベンダープリフィックスなど不要なものは将来的に削除していってくれるはずです。
ありがたいですね。
Compass will keep itself updated

Sass vs. Less

[2013.01.23 add]

sassの記述をより効率的に

■sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する
http://css-eblog.com/sass/sass-loop.html

■Sassを覚えよう – CSS HappyLife
http://css-happylife.com/archives/sass/

メッチャ判りやすく解説してくれてる。。。
ふとっぱらやわ~!!
おっとこまえやわ~!!
[/2013.01.23 add]

Sass links - 導入

導入までに参考にしたサイト

■SASS vs. LESS | CSS-Tricks(英語)

Sass vs. Less

最近どっちがいいって話アツいよね~って話と筆者さんの思う答え(完結)

■SassやLESSを導入するメリット | Good thinking
http://blog.goodpatch.co/articles/sass-less/

敷居は高くないんだよ?とやさしいおにーさんが力説してくれる記事
黎明期に書かれたブログの導入方法と現在の違いなど

■hamashun.me : Windows PC に Ruby と Sass を導入する方法
http://www.hamashun.me/archives/1294573.html

仕事場のWindowsにはこちらを参考にして導入

docs

■TwitterBootstrap
http://twitter.github.com/bootstrap/
Lessをつかってトゥイッターがつくったフレームワーク

■compass
http://compass-style.org/
sassをより使いやすくしてくれるフレームワーク

■Sass のトップページを日本語でわかるようにしてみた – @sugamasao.blog
http://d.hatena.ne.jp/seiunsky/20090708/1247075132
こういうざっくりしたの解りやすくてすきです

■naverまとめ
http://matome.naver.jp/odai/2130723789246600601

■Performance Checker サイトの重さを測ってくれます アップロードした総重量を知りたい時や同様の他サイトと比較するときなどに便利 http zingro com ■supportdetails…

■Performance Checker
サイトの重さを測ってくれます
アップロードした総重量を知りたい時や同様の他サイトと比較するときなどに便利

http://zingro.com/

■supportdetails
サイトの閲覧環境をPDFにまとめて吐き出してくれます
客先のブラウズ環境を共有してもらう時に便利

http://supportdetails.com/

■punypng
pngを劣化が分からない程度にダウンサイジングしてくれます

http://punypng.com/

■console.logだけじゃない。デバッグに便利なfirebugのコンソール一覧
http://minipaca.net/blog/javascript/firebug-console-api/

■CMYK-RGB-Hex Color Data Converter
16進数のカラーをRGB値に直してくれます

http://lab.till-daylight.org/colors/

android links

■月別出荷台数ランキングなど
http://bcnranking.jp/news/class/index.html?cl=3

■スマートフォン比較表
http://www.smph.info/

カテゴリー
css

css3 links

■ブラウザ対応とベンダープリフィックス

■記述サンプルとブラウザ対応表
http://css3clickchart.com/

IEさん出遅れてます
■ブラウザ対応とベンダープリフィックスについて
http://blog.we-boxes.com/cording/need-for-css3-vendor-prefix/
■ブラウザ対応リスト(CSS3とHTML5)
http://www.findmebyip.com/litmus/
■css3をプリフィックス対応させてくれるサイト

リンクルスポットマスクのリアルな口コミと効果を知って欲しくならない人はいるの・・・?

■transition

■transitionで指定できる要素の一覧
http://all-web-blog.blogspot.com/2011/11/animatable.html

超絶便利!

■矩形

■phpspot CSS3でシンプルな図を描く際のチートシート
http://phpspot.org/blog/archives/2011/12/css3_38.html

■CSS3セレクタ

■WebPark 保存版!CSS3セレクタの説明書
http://weboook.blog22.fc2.com/blog-entry-287.html

http://weboook.blog22.fc2.com/blog-entry-268.html

ソーシャルボタンを変更するぜ ■ 2011.6.8 Facebook Twitter はてな mixiのソーシャルボタンをオリジナルにしたいのです |…

ソーシャルボタンを変更するぜ
■[2011.6.8]Facebook,Twitter,はてな,mixiのソーシャルボタンをオリジナルにしたいのです | それだよ。

Facebook,Twitter,はてな,mixiのソーシャルボタンをオリジナルにしたいのです

カテゴリー
js

前どっかで見たことがあるアレ三項演算子っていうのか。へ~ hoge = fuga = 0 ‘正’ ‘負’…

前どっかで見たことがあるアレ三項演算子っていうのか。へ~

hoge = fuga >= 0 ? ‘正’ : ‘負’;

http://kuppo.sakura.ne.jp/php/sankou_enzansi.php
http://www.ajaxtower.jp/js/ope/index14.html
http://ja.wikibooks.org/wiki/JavaScript_If%E6%96%87%E3%81%AE%E5%BE%A9%E7%BF%92%E3%81%A8%E3%80%81%E4%B8%89%E9%A0%85%E6%BC%94%E7%AE%97%E5%AD%90

なんじゃこりゃって思ってややこしく考えてたけど、
よーかんがえたらexcelのIF文と同じですね。
IF(”A1=B1″,”D1=A1″,”0″)
みたいな感じ(やっけ)か。
へ~へ~へ~

カテゴリー
私生活ログ

ゴーヤカーテン http nanapi jp 26371 しそ http nanapi…

ゴーヤカーテン
http://nanapi.jp/26371/

しそ
http://nanapi.jp/27186/

蚊連草
http://nanapi.jp/10973/