0

cssで角丸をつくる

できると言われたらやってみたくなる角丸デザイン。

どや!?css3の角丸(border-radius)に関する情報を掻き集めた
画像を使わずにCSSだけで角を丸くする方法

まとめると

四隅丸めたい
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari,Chrome */
border-radius: 20px; /* CSS3 */

上半分を丸めたい

/* CSS3 */
border-top-left-radius: 20px; /* 左上 */
border-top-right-radius: 20px; /* 右上 */

/* Safari,Chrome */
-webkit-border-top-left-radius: 20px; /* 左上 */
-webkit-border-top-right-radius: 20px; /* 右上 */

/* Firefox */
-moz-border-radius-topleft: 20px; /* 左上 */
-moz-border-radius-topright: 20px; /* 右上 */

下半分丸めたい

/* CSS3 */
border-bottom-left-radius: 20px; /* 左下 */
border-bottom-right-radius: 20px; /* 右下 */

/* Safari,Chrome */
-webkit-border-bottom-left-radius: 20px; /* 左下 */
-webkit-border-bottom-right-radius: 20px; /* 右下 */

/* Firefox */
-moz-border-radius-bottomleft: 20px; /* 左下 */
-moz-border-radius-bottomright: 20px; /* 右下 */

0

可変グリッド導入の際に

HPに可変グリッドを導入してみたくてしてみました。

まず「可変グリッド」がわからなくて
動的 とか Box とか で検索してました。

最近また増えてきた可変グリッドレイアウトのjQueryプラグインまとめ 2012年9月
によればたくさんあるみたい。
jsファイル導入だけど、できるかな。
なんとかできました

レスポンシブWeb制作で話題のjQuery Masonryを試してみた
[jQuery]自動整列プラグインjQuery masonryの設定方法・オプションまとめ

1

jsファイルを読み込む

ワードプレスでjsファイルを読み込むことは知識が少ないのでやらないようにしてますが、

可変グリッドのページを使ってみたくて

jQuery MasonryをWordPressで使ったときのメモ

を見ながら Masonry.js 導入してみました。

でも動かない。

基礎から知らなければ動かないのではないか・・・と

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例

を読む。

最終的に「カプセル化」でうまくいきました。

[解決済み] jquery masonry がうまく動作しない

0

ロールオーバーしたいときに

マウスをリンク画像に乗せたときに変えたいときに
動作が重くならないか、SEO的にどうなんだろう。
といろいろ考えながら作りこむので意外と時間がかかります。

最近は参考サイトを見ながら
heightとpaddingとoverflowを使った画像置換を使ってます。

heightを0にしてpaddingで高さ調整。
overflowをhiddenにしてはみ出した文字は表示しない。

参考:CSSスプライトについてあれこれ。