全記事一覧（過去記事はこちらから） ＊投稿日が新しい順に記事が並んでいます。 « < 4 5 6 > » 2015年3月24日 Useful Tips ファイルサイズを小さくするMinify, 整形を戻すBeautify, 比較するCompare 前回、サイトの表示スピードアップのために4つほど作業をしたが、これらのほかに「ファイルサイズを縮小」することも有効。 javaScriptやCSSファイルの「改行」や「ホワイトスペース」「コメント」は、ヒトが読みやすくしているだけ。ブラウザにとって不要なこれらを削除すれ …（続きを読む） 2015年3月23日 WordPress PageSpeed Insightsで分析し、サイトの表示スピードをアップする4つの作業をメモ Googleの「PageSpeed Insights」でWebページの表示速度を測ることができる。 このサイトも、前回までの6記事をUPしたところで「PageSpeed Insights」で分析してみた。 結果は真っ赤っか。 ＊まずはモバイルの結果。39（100点満点） …（続きを読む） 2015年3月21日 WordPress canvasでWordPressサイトの背景に画像をランダムに配置する canvas要素を使って、Webページの背景に画像をランダムに描画することができる。このサイトも背景はcanvasを使っている。 ただ、WordPressでは若干 javaScriptファイルに手直しが必要だった。 そして、モバイルビューでは表示領域が PCとは違うので …（続きを読む） 2015年3月20日 Web Design フリーアイコン素材のダウンロードサイトと、アイコン利用時の注意点など アイコンを探すとき「アイコン素材 フリー ベクター」などのキーワードで検索すると、ど〜っとヒットする。毎回検索をするのもアレなので、今まで使った素材サイトや、それらの「まとめサイト」をメモっておこうと思う。 そのほか、アイコン素材をダウンロードする前や、加工時の注意点、 …（続きを読む） 2015年3月18日 CSS -webkit-appearance : noneで初期化！スマホのフォーム要素のスタイル このサイトの制作時にスマホで表示確認をしていたとき、フォームのテキスト入力部分（input type=”text” や textarea）は大丈夫なのに、送信ボタン（input type=”submit”）だけは、どうして …（続きを読む） 2015年3月13日 CSS Media Queriesの条件分岐とブレイクポイントについて 今回はMedia Queriesの条件分岐と、ブレイクポイントについてメモっておきます。 CSS2以前から、「メディアタイプ（Media Type）」に別けてスタイルを切り替える方法はあったのだが、CSS3ではより細かく「メディア特性（Media Feature）」も加 …（続きを読む） 2015年3月8日 CSS MediaQueriesとviewportは一緒じゃないと無意味（viewportの指定について） レスポンシブレイアウトで、CSSでMedia Queriesを設定したら、HTMLでviewportを指定しなければ意味ない。何も起こらないんですね〜。Media Queries使うならviewportは必須。 ところで、viewportのプロパティや値はいろいろあるけ …（続きを読む） 2015年2月28日 CSS レスポンシブレイアウトに最適な Grid System を採用 このブログサイトをWordPressで作ろうと思い立ち、デザインを考えているとき、アーカイブの表示をPCでは横並びに、タブレットやスマホでは縦に並びしたいと思った。 いわゆるレスポンシブレイアウトで構成したい。WordPressループで出力する記事抜粋を、CSSでうまく …（続きを読む） « < 4 5 6 > » スポンサーリンク
2015年3月24日 Useful Tips ファイルサイズを小さくするMinify, 整形を戻すBeautify, 比較するCompare 前回、サイトの表示スピードアップのために4つほど作業をしたが、これらのほかに「ファイルサイズを縮小」することも有効。 javaScriptやCSSファイルの「改行」や「ホワイトスペース」「コメント」は、ヒトが読みやすくしているだけ。ブラウザにとって不要なこれらを削除すれ …（続きを読む）
2015年3月23日 WordPress PageSpeed Insightsで分析し、サイトの表示スピードをアップする4つの作業をメモ Googleの「PageSpeed Insights」でWebページの表示速度を測ることができる。 このサイトも、前回までの6記事をUPしたところで「PageSpeed Insights」で分析してみた。 結果は真っ赤っか。 ＊まずはモバイルの結果。39（100点満点） …（続きを読む）
2015年3月21日 WordPress canvasでWordPressサイトの背景に画像をランダムに配置する canvas要素を使って、Webページの背景に画像をランダムに描画することができる。このサイトも背景はcanvasを使っている。 ただ、WordPressでは若干 javaScriptファイルに手直しが必要だった。 そして、モバイルビューでは表示領域が PCとは違うので …（続きを読む）
2015年3月20日 Web Design フリーアイコン素材のダウンロードサイトと、アイコン利用時の注意点など アイコンを探すとき「アイコン素材 フリー ベクター」などのキーワードで検索すると、ど〜っとヒットする。毎回検索をするのもアレなので、今まで使った素材サイトや、それらの「まとめサイト」をメモっておこうと思う。 そのほか、アイコン素材をダウンロードする前や、加工時の注意点、 …（続きを読む）
2015年3月18日 CSS -webkit-appearance : noneで初期化！スマホのフォーム要素のスタイル このサイトの制作時にスマホで表示確認をしていたとき、フォームのテキスト入力部分（input type=”text” や textarea）は大丈夫なのに、送信ボタン（input type=”submit”）だけは、どうして …（続きを読む）
2015年3月13日 CSS Media Queriesの条件分岐とブレイクポイントについて 今回はMedia Queriesの条件分岐と、ブレイクポイントについてメモっておきます。 CSS2以前から、「メディアタイプ（Media Type）」に別けてスタイルを切り替える方法はあったのだが、CSS3ではより細かく「メディア特性（Media Feature）」も加 …（続きを読む）
2015年3月8日 CSS MediaQueriesとviewportは一緒じゃないと無意味（viewportの指定について） レスポンシブレイアウトで、CSSでMedia Queriesを設定したら、HTMLでviewportを指定しなければ意味ない。何も起こらないんですね〜。Media Queries使うならviewportは必須。 ところで、viewportのプロパティや値はいろいろあるけ …（続きを読む）
2015年2月28日 CSS レスポンシブレイアウトに最適な Grid System を採用 このブログサイトをWordPressで作ろうと思い立ち、デザインを考えているとき、アーカイブの表示をPCでは横並びに、タブレットやスマホでは縦に並びしたいと思った。 いわゆるレスポンシブレイアウトで構成したい。WordPressループで出力する記事抜粋を、CSSでうまく …（続きを読む）
2015年3月24日
Useful Tips
