自由に書けるからこそ、運用していくとカオスになりがちなCSS。
改めてCSS設計とFLOCSS（フロックス）について考えてみました。
今回はFLOCSSのポイントを私なりにまとめたいと想います。
続きを読む
CSSの未使用のセレクタがわかる！Chromeの新機能「CSS Overview」がすごい
2020年07月31日 金曜日
日々サイトを更新していくと、「あれ？CSSのこのプロパティ何に使っていたっけ？」と思うことはありませんか？
Chromeの新機能「Overview」を利用すれば、未使用CSSがひと目で分かるようになります。
さらに、ページのカラー情報や設定フォント情報、ブレイクポイントの設定までわかるようになります。
気になる方はChromeを最新版に更新の上、続きを読んでください。
続きを読む
フォントを変更したらフォームの横幅がサイドバーを無視する
2012年08月27日 月曜日
このグリニッジのコーポレートサイトは約2年前にリニューアルしました。コンテンツ内容の改修ついでに、フォントをメイリオ（ヒラギノ）に変更しようと思いました。
テスト環境でメイリオを適応してみると、フォームがサイドバーを無視して幅MAXに。その改善策です。
ちなみにサイトはWordPress、フォームはContact Form7を利用していますが、今回はCSSの問題です。
「jQuery-URL-Parser」でURLの一部を取得してbody classにする
2011年06月15日 水曜日
jQueryで現在開いているページのURLの一部を取得して、body class="ココ" に入れちゃえという話。
jQueryプラグイン jQuery-URL-Parserについて
jQuery-URL-Parserは、URLをパースしてくれるjQueryのプラグインです。
以下は簡単にどこを取れるか書いています。詳しくはjQuery-URL-Parserで確認してくださいね。
- URL attributes 「
.attr()」
https://example.com/folder/dir/index.html?item=value
・/folder/dir/index.html
・/folder/dir/
・index.html - Query string parameters 「
.param()」
https://example.com?sky=blue&grass=green
・'blue'
・'green'
・'grass':'green' - URL segments 「
.segment()」
https://example.com/folder/dir/example/index.html
・'folder'
・'example' - Fragment parameters and/or segments 「
.fparam()」 「.fsegment()」
https://example.com#sky=blue&grass=green
・'blue'
https://example.com/#/about/us/
・'about'
WordPress Plugin "Link Indication" IEでaタグが改行される時に背景画像の位置がズレる
2010年04月05日 月曜日
WordPressのPlugin Link Indicationとは、
Link Indication←コレ（外部リンクにicon）や、yokoi@greenwich.co.jp←コレ（Mailにicon）などを実装するプラグインです。
Pluginの内容については説明されている方々が多くいますので、例によって割愛。
今回の問題は、やっぱり、いつもの、アレのバグによる問題です。
