CSSのグラデーションを応用してストライプ柄や文字の下にマーカーを作る

 CSSのグラデーションの機能を、うまく応用させると、CSSだけでストライプやマーカーを表現する事ができます。
画像を使わなくても表現できるので、コードを直すだけで様々な変更ができ、とても便利です。

CSSでグラデーションを使う

CSS3以前は、グラデーションを表現する際に、画像を使って表現するしかありませんでした。
しかし今は、CSSだけでグラデーションを再現する事が可能です。
今回は、CSSでグラデーションを表現する方法の紹介です。

HTMLで入力フォームを作成する方法

HTMLでお問い合わせ・お申し込みフォームを作ります。
実際にメールを送信する事は、HTMLだけでは出来ません（PHP等のサーバーサイドのプログラムが必要です）が、見た目だけならHTMLで作る事ができます。
formタグやinputタグ、selectタグを使って、作っていきます。

flexボックスの作り方

CSS3から、要素を横並びにする際に、float以外にもいくつかの選択肢ができました。
その中から、使用頻度の高いflexボックスの使い方を紹介します。
様々なプロパティが用意され、非常に煩雑ですが、実はよく使うプロパティは数種類で十分です。よく使うものを重点的に覚えていきましょう。

一般的な2カラム（2段組）の組み方

HTMLとCSSを使った、一般的な2カラム（2段組）レイアウトの作り方です。
よく使うレイアウトなので、作り方をマスターしておきましょう。
以下のレイアウト図を元に、HTMLとCSSを組んでいきます。

css詳細度に関して

CSSには、セレクタをどの様に書くかによって、優先順位が決まる、詳細度という考え方があります。 この詳細度が解っていないと、複雑なサイトを作った時に、想定通りにCSSを当てられない可能性があるので、理解が必要です。 各々のセレクト方法に点数があり、それを計算していくとわかりやすいです。

おすすめのfont-family設定 2020年

cssのfont-familyは、基本的には一般のパソコンやスマートフォンに元々入っているフォントしか指定できません。（正確には、指定自体はできますが、見てくれる方のパソコンで再現できません）
複数のフォントを指定できますが、左から順に調べ、フォントが見てくれる方のパソコンに指定されたフォントがあったら、そのフォントが反映されます。

floatとclear

要素を横に並べる時は、floatプロパティをよく使います。 floatは、clearとセットになっており、clearを忘れてしまうとレイアウト崩れを起こす可能性があるので、必ずclearするようにします。

相対パスの考え方

HTMLからCSSを読み込むときや、画像を読み込むときなど、「何か」から、「何か」を読み込むという作業は、とてもよく発生します。
その、「読み込む」という作業は、「パス」という考え方を使います。
中でも、「読み込むファイル」から、「読み込まれるファイル」の場所を指定する方法を相対パスと言います。
以下、HTMLから画像を読み込む場合のパス指定をサンプルに、説明していきます。

HTML5のアウトラインについて

HTMLには、文章の構造を表すアウトラインという仕組みがあります。
アウトラインとは、本の目次のような構造を取ります。

HTML5、よく使うタグのカテゴリーとコンテンツモデル

HTMLを書くときに、よく使うタグの一覧です。
HTMLには、たくさんのタグがありますが、全部覚えようとしないで、ひとまずよく使うものだけ使えれば十分です。