社員ブログ社員ブログ

#CSS 記事一覧

CSSの未使用のセレクタがわかる!Chromeの新機能「CSS Overview」がすごい

日々サイトを更新していくと、「あれ?CSSのこのプロパティ何に使っていたっけ?」と思うことはありませんか?

Chromeの新機能「Overview」を利用すれば、未使用CSSがひと目で分かるようになります。

さらに、ページのカラー情報や設定フォント情報、ブレイクポイントの設定までわかるようになります。

気になる方はChromeを最新版に更新の上、続きを読んでください。

続きを読む

css3アニメーション transform,taransition,animationの違い

画像はありません

こんにちは、三橋です。

今回はcss3の新プロパティ、 transform,taransition,animationの違いを簡単にまとめてみました。

続きを読む

CSSで蛍光ペンみたいな線を引く

画像はありません

なにかで使えそうなのでメモ。

一行コピペでさくっと実装できるみたい。

続きを読む

CSS3背景アニメーションで雪を降らすの巻

画像はありません

こんにちは、三橋です。

今年も残すとこあと少しですね。

冬なので、css3の勉強に背景画像を動かして雪が降ってるようにしてみました。 続きを読む

フォントを変更したらフォームの横幅がサイドバーを無視する

画像はありません

このグリニッジのコーポレートサイトは約2年前にリニューアルしました。コンテンツ内容の改修ついでに、フォントをメイリオ(ヒラギノ)に変更しようと思いました。

テスト環境でメイリオを適応してみると、フォームがサイドバーを無視して幅MAXに。その改善策です。
ちなみにサイトはWordPress、フォームはContact Form7を利用していますが、今回はCSSの問題です。

続きを読む

「jQuery-URL-Parser」でURLの一部を取得してbody classにする

画像はありません

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タグが改行される時に背景画像の位置がズレる

画像はありません

WordPressのPlugin Link Indicationとは、

Link Indication←コレ(外部リンクにicon)や、yokoi@greenwich.co.jp←コレ(Mailにicon)などを実装するプラグインです。

Pluginの内容については説明されている方々が多くいますので、例によって割愛。

今回の問題は、やっぱり、いつもの、アレのバグによる問題です。

続きを読む

User Heat のHTMLコードを入れるとIEで空白が出る

画像はありません

User Heat のHTMLコードを入れると、IEでFooterに空白が出ました。
その改善方法です。

続きを読む

文字サイズサイズ小サイズ中サイズ大