CSS3のbox-flexで要素が伸縮する比率を決める
今回は、子要素のボックスが伸縮する比率を決める場合の処理をメモ。 ボックスの伸縮する比率とは？ たとえば、子要素のボックスが3つあったとした場合に、基本的には何も指定していなければ、そのボックス内の要素の幅に合わせて左詰…
csscsscss
csscssCSS3のbox-ordinal-groupで順番を入れ替える
前回は主にフレックスボックスについてメモしたけども、基本的にはフレックスボックスにする要素の親要素に対するCSSを指定しましたが、今回はそのフレックスボックス自体に関するCSS3をメモ フレックスボックスの順番を入れ替え…
cssCSS3のflexboxでボックスレイアウトを組んでみる
2013年7月1日現在ですは、flexboxの仕様が変わった為、この記事は古い記事になりました。新しい記事は「CSS3のFlexboxが仕様が変わった！！新しいフレキシブルボックスレイアウトとは！？」になります。 css…
css【CSS】レスポンシブルで可変+固定レイアウトで組む
最近は、レスポンスWebが流行りそうというか話題になってるけど、デバイスが多すぎて対応が大変になってきてる。 レスポンスの方法はまぁたくさんあるので、今回は「レスポンシブルで可変+固定レイアウトで組む」ってことに注目して…
cssCSS3のアニメーションをjavascriptで実行する方法
よくCSS3でロールオーバーでアニメーションさせるのありますが、まぁそれは、普通にcssで「:hover」の部分に変化させたいプロパティを記述すればいいだけなんですが、javascriptで制御する場合はどうするんだっけ…
css【CSS】一行でテキストを左右に分けるときのCSS
よくタイトルバーなどで左側にタイトルで右側に日付なり「続きはこちら」のようにテキストが左右に分けてある場合がある。まぁ場合にもよるのだろうけど。一応メモ。 text-alignで振り分ける まずはそれぞれ寄せたいテキスト…
css【CSS】nth-childとnth-of-typeとfirst-childとfirst-of-typeの違い
いや～なまじjqueryをいじりまくっていたんで勘違いしてました。 nth-childとnth-of-typeの違い ここはh3要素 ここはp要素 ここはp要素 ここはh3要素 ここはp要素 ここはp要素 例えば上記のよ…
cssCSS3のセレクターで属性チェックする
css3のセレクターで気になったものをメモる。 ただ普段jqueryを使っているせいか違和感がない。 /* ①httpから始まる */ a[href^=”http”]{ color:red; } /* ②comで終わる …
csscss3から追加された新しい単位「rem」でのフォントサイズ調整が便利
cssでフォントサイズを決めていくときよく「%」とか指定しくこともあると思うけど、たまに「あれ？思ったより強いさくね？」って思うときある。まぁ設計の問題だろ！ってツッコミはほっといて、css3から追加された新しい単位の「…
cssCSS3のanimationによるキーフレームアニメーションをやってみた。
今回は前回に引き続いてCSS3の「animation」プロパティについてメモっていく。 animationプロパティの種類 animationプロパティは前回のtransitionプロパティと似ている部分も多いのでそんな…
