Blogブログ

背景画像に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を利用した形式 […]

便利なBootstrapをsassでカスタマイズしたのでその記録。 githubで作ってくれている人がいる。流石！ https://github.com/alademann/sass-bootstrap まずはインストール。 $ bower install sass-bootstrap-compass   ダウンロードされたsass-bootstrap-compass/には、examples/が入っている。 このうち適当なものを複製して使っていく。 同じくsass-bootstrap-compass/に、sass-bootstrap-dist.zipがある。 js,imgを使うので解凍し、dist/へ突っ込む。   ※ここはcssのカスタマイズのログになります。 bootstrapのsassの構成 sass-bootstrap.scss が各モジュール専用のscssファイルをimportしているよう。 ここで必要・不要なものの調整が出来ますね。   // Compass utilities @import "compass"; // Core variables and mixins @import "variables"; @import "mixins"; // Reset @import "normalize"; @import "print"; // Core CSS @import "scaffolding"; @import "type"; @import "code"; … 色の変更 インクルードされているファイルの、_variables.scssで変更が出来そう。 例えば.navbar-inverseがデフォルトでは#222222なのでこれを変えたい場合、_variables.scssで"navbar-inverse"を探してやればOK。 ※変数がわからなければ_navbar.scssを探すなど

吹き出しデザインをCSSのみで実装。 吹き出しの出てる部分をbefore, after擬似要素で実装。 Chrome, FF, safari, IE8,9,10で確認。 こっちは吹き出しに影をつけたもの。 出てる部分はbefore, after擬似要素で実装しているが、影をつけるためroteteで2d transformしている。 Chrome, FF, IE9,10で確認。FFではあんまりキレイじゃない。

オーバーレイを出すときにオブジェクトを上から表示させて、消すときに下にやりたかったのでそのデモ。 オブジェクトを真ん中に持っていく時に、absoluteで指定したのがこれ。 調べていくうちにtransitというプラグインの事を知ったので、それを使ってみたのがこれ。 http://ricostacruz.com/jquery.transit/

個人でのサービスを始めるにあたって、オープンソースかつMetro UIベースのテンプレートを使おうと思ってリサーチしたところ思った以上に良さげなのをたくさん見つけたのでメモ。 １．Bootme TRO Windows8風のデザインで、素晴らしい完成度。アイコンの種類も豊富で、綺麗。 でもレスポンシブで縮めた時に少し違和感を感じた。 ２．BOOTSWATCH テーマが充実したフレームワーク。Twitter Bootstrapベースで、320pressがWordPress用のテーマも配布しているようだ。 ３．Metro-bootstrap こちらもTwitter Bootstrapベース。BOOTSWATCHよりもシンプルで、カスタムしやすそうだ。 ４．Metro UI CSS こちらはよりWindows8っぽいデザイン。使用する際にはMetro UI CSSサイトへのリンクを設置する必要があるようだ。 ５．METRO MANIA これもまた素晴らしいクオリティ。。 ただ使用にはコストが発生するようだが、一番安いものでたったの$4。クライアントへの納品には問題なさそう。 カスタマイズしての再配布や販売の場合は$300ドルらしい。 https://wrapbootstrap.com/theme/metro-mania-no.1-metro-bootstrap-theme-WB07F9G8L by http://responsivewebinc.com/ ６．SCAFFOLD コーポレートサイトなんかに良さそうな、テンプレート。 DLリンクとライセンスに関する情報はみつからなかったのだが、ソースを見る限りはやはりTwitter Bootstrapがベースにある。 by http://iweb-studio.com/ しかしクオリティの高い素材がたくさんあることに驚きました！ スキルの高い制作会社も。。 世界は広いっす。 Thanks for developers!!!