CSS

CSS

サイトの表示スピードを上げるのにやったこと

ファイルの圧縮・結合 CSS、JavaScriptファイルの圧縮は単純なコーポレートサイトなら工数をってまでやる必要はないかなと思います。タスクランナーで自動で圧縮の設定しているならそれはいいことだと思います。 結合は必ずやったほう...
NO IMAGE CSS

【CSS3】transitionを使ったレスポンシブ対応のアコーディオンメニュー、height対応

transitionを使ったメニューを作るときのポイント まず、transitionを使ったアニメーションを実装する際に押さえておきたいポイントを紹介します。 display: noneで要素を非表示にしておくとアニメーションが適用...
CSS

WP Social Bookmarking Lightのボタンデザインを変更可能にしました。

WordPressのソーシャルボタンを設置するプラグインとして有名なWP Social Bookmarking Lightを改変してボタンのデザインをカスタマイズできるようにしました。
CSS

【CSS】スキップリンクのclipの使い方で戸惑ったのでメモ

WordPressのデフォルトテーマである「TwentyFourteen」のスタイルシールを読んでいるときに、clip: rect(1px, 1px, 1px, 1px);という見たことのないプロパティを見つけたので、clipの使い方につ...
CSS

【Sass】rem指定でも自動でpxを追加してくれるULTIMATE PX/REM MIXINを使ってみた

現在WordPressのテーマを作成しており、フォントサイズの単位をremで進めているのですが、IE8以下がremに対応していないということで対応するためには以下のように記述する必要があります。 font-sizeの指定は少...
NO IMAGE Chrome

【Sass+Compass】MACに導入から、デベロッパーツールとの連携まで。

SASSとは SASSとはCSSのコード修正、管理がちょっと楽になるメタ言語。 メタ言語というとちょっと難しく聞こえますが、全然簡単なので安心してください。 MACにSassをインストールする ターミナルで以下のコマンドを...
NO IMAGE CSS

【ネガティブマージン】3カラムレイアウトでの使用例

TwentyFourteenのスタイルシートを読んでいると見たことないコードを発見。 margin: 0 0 0 -100%; (margin-left:-100%;) margin:-100% ?????????? ...
CSS

日本語「Webフォント」の利用方法とメリット・デメリット

Webフォントとは 今までは指定したフォントがインストールされていない環境では思った通りに表示されませんでした。 WEBフォントであればWEBからインストールするのでどの環境でも同じように表示されます! 今までの場合は多くのサ...
CSS

【Webフォント】タイトルを無料で使える「Noto Sans CJK」に変更してみた!

Webフォントについては以下の記事にまとめています。 日本語「Webフォント」の紹介とメリット・デメリット では実際に「Noto Sans CJK」をダウンロードするところからWeb上で表示するまで設定します。 ダウンロード 以...
CSS

【CSS】ショートカットキーの表示を本物のキーボードのようにする

今までは、ショートカットコマンドを紹介したりする際に普通のテキストに「」をつけたりして表示していました。もう少しかっこいいデザインないかなぁと探していたところMacのキーボードのようなかっこいいデザインのスタイルシートを見つけました。 ...