CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番

最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介

人気のあるブログのレイアウトやデザインを見ていると、結構共通点があります。共通しているということは、それぞれ重要な意味があるはずです。 例えば、超有名な以下のブログは、すべて２カラムで左にメインコンテンツがあります。 ホームページを作る人のネタ帳 Webクリエイターボックス かちびと.net Webデザインレシピ ということでウェブサイト作成のプロが作るブログの共通点を探ってみました。これが絶対正しいということはないですが、デザインやレイアウトの参考にはなると思います。 枠組みについて まずは全体的な枠組みについてです。 1. 横幅は1000px前後 私がホームページを作り始めた頃は、横幅800pxが多かったのですが、ディスプレイは年々大きくなって、解像度も高くなっていますので、800pxはもうあまりないですね。 かといって広すぎても、収まりきらなくなるので広けりゃいいってもんでもないです