androidでviewportが効かない
2015.06.17
正しくは「androidでviewportのcontent="width=固定幅"を指定しても効かない機種がある」ということのようです。
普段は「device-width」を指定することが多いので問題にならないのですが、たまに使うたびに「あれ?」となるのでメモしておきます。

使わせて頂いているのはこちらのソース。

続:Androidブラウザでviewportのwidth指定 - to-R

いいねボタンとの絡みなど気を付けることもありますが、
viewport問題はバッチリ解決できます!
| コメント(0)
IE8で nth-child を使う
2013.09.11
first-childは、IE8でもきくのですが、
nth-child(n)はきかないのですよねー。
これが使えたらすごく便利なのに。

ということで調べてみました。
いろいろ適応させる方法はあるようなのですが、使いたい部分がサイトの共通部分で
その案件が、大きめの案件で既に納品しているページもあったので
ヘッターの記述に新たに何か追加したくなかったことと、
はずかしながら、自分はjsの理解度が低いので、CSS内で解決という条件で探しました。
下記ページのハックが簡単でわかりやすかったです。

CSS: Internet Explorer 7-8 nth-child hack

これを
------------
.test ul li:nth-child(3){
background: yellow;
}
------------

こう書く
------------
.test ul > *:first-child + * + * {
background: yellow;
}
------------

「+ *」の数を増やして調節する。
IE8でもききました。
| コメント(0)
Scout
2012.12.12
Sassを勉強し始めました。
自分はmacユーザーなのですが、ターミナルを使うより簡単そうなので
Scoutをインストールしてみました。
下記からインストールできます。
※もちろんwinユーザーさんもつかえます!

Scout - Compass and Sass without all the hassle

ume_121212.jpg

左下の「+」ボタンから作成します。
ここではとりあえず「test」と設定。
右にある「Configure」から細かく設定していきます。

【Stylesheet Directories】
■Input Folder
元の「.scss」のファイルを入れるフォルダを選択

■Onput Folder
書き出す「.css」のファイルを入れるフォルダを選択

【Other Directories】
ここは、まだよくわかりません。
Compassで使うみたいです。

【Output Modes】
■Environment
Scoutが勝手に吐き出すコメントの有無の設定です。
「Deveropment」だとどのscssファイルの何行目だよみたいな
下記のようなコメントが出てきます。
/* line 13, sass/style.scss */
「Production」にすればコメントは吐き出されません。

■Putput Style
書き出されるCSSのフォーマットを指定することができます。
「Expanded」CSSと同じように
「Compact」シングルライン
「Compressed」圧縮されるので容量は軽いですが解読難しい感じに。
「Nested」ネストされます

【Manage Project】
■Remove Project
「Remove」というボタンのみです。
これを押すと何の確認もなく消えます。ご注意を!

| コメント(0)
マウスオーバーや画像表示の工夫
2012.08.29
コーディングをする際にできるちょっとした工夫をメモ。

■マウスオーバー
画像をふわっとオーバーします。

jQueryで簡単実装!フェードエフェクト付き画像ロールオーバー

サンプル


■マウスオーバー
背景色をふわっとオーバーします。

[jQuery] メニューの背景色をロールオーバーでふわっと変える

サンプル


■画像の表示
ふわっと表示させられます。

画像に遅延表示っぽいエフェクトを与えるだけのm5LazyDisplay

サンプル


| コメント(0)
JS:アンカーリンクを使わず指定位置までスクロール
2012.04.04
アンカーリンクを使って特定のIDまでスクロールさせるのは簡単に出来ますが、
この場合、リンク元で指定しなければなりません。

リンク元で指定できない場合でも、アクセス時に自動で移動する必要があり探しました。
検索では「window.scrollTo」などがよく出てきますが、
数値で指定するため移動させたい位置の上にテキストなどがあると使用できません。

なんとかCLASSやIDで指定できないか探して見つけました。
すごく簡単で使いやすいです。
下記の記事を参考にしています。
>リンク先ページの指定位置にスクロールで移動

---------------

<script type="text/javascript">
$(function() {
	var n = window.location.href.slice(window.location.href.indexOf('?') + 4);
	var p = $("移動させたいIDまたはCLASS").offset().top;
	$('html,body').animate({ scrollTop: p }, 'slow');
	return false;
});
</script>

---------------

青字部分を移動させたい位置のIDまたはCLASSを指定すれば完了です。

| コメント(0)