Webデザイン

サイドバーを追尾式にしているサイトをたまに見かけますよね。 弊社で運営しているいくつかのサイトでも Google AdSense 広告を追従させています。これが収益にどれほどの効果をもたらすものなのか […]

CSS だけで作れるおしゃれなボックス（枠線・囲み枠）のデザインサンプルをご紹介します。 ブログ記事の主役はテキストですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさも改善されます。 ボックスがあ […]

HTML で打ち消し線を引くときは <del> または <s> を使いますが、どちらも文字と同じ色の線が行の中央に 1 本引かれるだけです。 例） 打ち消し線打ち消し線打ち消し線 わかりやすいです […]

ブログでスマホ対応のテーマ・テンプレートを使っていても、広告や表（table）が枠からはみ出してしまったり、ぐらぐらと横揺れしてしまうことがありますよね。 レスポンシブ web デザインテーマはそうしたことがおきないよう […]

テキストリンク（<a>）は、CSS でいろいろなデザインにすることができます。 CSS で何も指定しない状態だと、青文字＋下線というスタイルになりますよね。 Naifix｜ブログ初心者向け無料ノウハウ集 この […]

「サンプルの CSS をコピペしたのにうまく反映されない！」 そんなときにチェックしてほしい CSS の優先順位。本日は最終回です。 CSS 優先順位 (1) ～CSS の記述場所～ CSS 優先順位 (2) ～id・c […]

CSS 優先順位の解説 2 回目です。 前回は「スタイルシートをどこに書くかで優先順位が変わる」という内容でした。 今回は id 属性と class 属性に関連した優先順位を解説していきます。少し難しくなりますが、何度か […]

ブログ運営は記事を書くだけではなく、自分好みのデザインに作り上げていく楽しさもあります。 Naifix でもちょっとおしゃれなデザインにする CSS などをご紹介していますが、利用中のテーマやテンプレートによってはコード […]

CSS の position プロパティの使い方を覚えると、画像と画像を重ねる、画像と文字を重ねる、というのが簡単にできるようになります。 画像編集ツールで加工しても良いですが、CSS で表現すると画像の上に表示されてい […]

読みやすいブログデザインを目指すなら、余白と配色がポイントです。 別記事でブログ記事本文の横幅と左右の余白に関して解説しています。 本記事は横ではなく縦の余白に着目してみたいと思います。つまり、1 行目と 2 行目の行間 […]

ブログの本文で強調したい部分には <strong> や <b> を使いますが、デフォルトのスタイルではただの太字になるだけです。 これだとちょっと味気ないときは、CSS でデザインしてみましょう。 […]

CSS3 が登場してから、画像や JavaScript を使わずに様々な表現ができるようになりました。 検索すれば「え！こんなのも！？」というテクニックがたくさん出てきます。ジェネレーターも数多くあるので、複雑な記述を覚 […]