2023年8月5日 / 最終更新日時 : 2023年8月7日 beginners5_wp css3 デベロッパーツールの使い方を必ず覚えよう ある程度HTMLやCSSが理解できるようになったら、CSSのデザインはデベロッパーツールで作るようにしましょう。 数十行程度のHTMLでは埋め込むCSSもたかが知れています。ミスも少ないし単発で終わり、他の要素との兼ね合 […]
2022年9月29日 / 最終更新日時 : 2023年3月10日 beginners5_wp css3 横並びのレイアウト（flexbox） ページデザインやレイアウトを作成する上で、横並びの方法やテクニックを理解されてない方が多いです。 現在のようなflexboxが無かった時代は、「inline」や「inline-block」を使ったり、「float」を使っ […]
2022年9月24日 / 最終更新日時 : 2023年5月9日 beginners5_wp css3 リセットCSSについて（html5reset.css） 現在のブラウザ（ユーザーエージェント）には、最初から色々なCSS（デフォルトスタイルシート）が埋め込まれています。これらのデザインは、20年以上前の名残りのようなもので、現在のようなきれいなデザインを作成する時、邪魔にな […]
2022年9月6日 / 最終更新日時 : 2023年9月6日 beginners5_wp css3 不透明度について 画像や文字などをセル画のように2枚重ねた時、上の画像や文字を透過させ、半透明にしたい時があります。そこでいくつかの、透過方法を説明してみます。 使用するサンプル まず透過のテストをする為に、背景画像、背景色などを設定した […]
2022年9月4日 / 最終更新日時 : 2023年3月11日 beginners5_wp css3 カラーコードについて 「16進数について」の処でも話しましたが、色コードは一般的に #付きの6桁表記 が多く使われますよね。これは 1600万色 以上の色を表現でき、写真には欠かせないと思います。しかし、ページデザインの時にこんなに細かい色コ […]
2022年9月4日 / 最終更新日時 : 2023年9月6日 beginners5_wp css3 16進数について 色コードなどで使われる 16進数 ですが、コンピュータのコードには2進数、8進数、10進数、16進数などがあります。 日常生活で使ってる数字は0から9までの10種類で、9まで行くとそこから上が無いので、1繰り上がって「1 […]
2022年9月3日 / 最終更新日時 : 2024年4月23日 beginners5_wp css3 アイコンの作り方（文字タイプ） 文字タイプのアイコンは画像ではありませんから「背景画像」で作成する事はできません。そこで文字タイプのアイコンについて作り方を解説してみます。 特定のセレクタに対し、疑似要素の「::before」を使用します。 【参考サイ […]
2022年9月2日 / 最終更新日時 : 2023年3月10日 beginners5_wp css3 アイコンの作り方（画像タイプ） 「アイコンと画像の見極め方」で説明したように、アイコンは「文字や文章の飾り」という意味からも文章の一部（コンテンツ）ではなく、デザインという考え方なので、CSS側で作成するのが効率的です。作り方は、「特定の領域に壁紙を作 […]
2022年9月2日 / 最終更新日時 : 2023年2月22日 beginners5_wp css3 marginとpaddingの違い CSSのデザインやレイアウトをするうえでmarginとpaddingはとても重要な概念です。にも拘らず、この2つが区別できず、「見た目が思った通りにできてればどちらでも同じ」と考えてる人を見かけます。 marginとpa […]
2022年8月31日 / 最終更新日時 : 2023年3月11日 beginners5_wp css3 センタリングの方法 皆さんが、デザインを作成する上で、意外と迷われるのがセンタリングです。「センタリングの設定をしたんだけど中央に寄ってくれない」という相談をよく受けます。何故上手くできないのか、何故迷うのか．．それはインライン要素とブロッ […]