HTML＆CSS

前回の記事では《div》要素と《float》プロパティを使って大まかなレイアウトを作成しました。 ただ、これでは、レイアウト同士がくっ付いているため、見た目がイマイチです。 レイアウトを配置した次の段階として、レイ...

ホームページのデザインを作成する場合、まず、大まかなデザインを決めます。 例えば、 上にタイトルを書く場所下にサイトマップを作りたい左右に画像と記事を分けて表示したい などなど、数多い要望があると思います。 これか...

HTMLとCSSの基本構造はシンプルです。難しく考える必要はありません。 自動車に例えると、 自動車の部品（CSS）自動車のパーツ（HTML） という感じで覚えると整理しやすいと思います。 自動車の製造過程は細かい...

要素の前後に文字を追加したい 要素の前後に文字を追加する場合は疑似要素《before》と《after》を利用します。 例えば、以下のようなHTMLが存在したとします。 <div class="sample">...

リスト《ul・ol・li》とは リストを作成するために必要なセレクタは以下の通りです。 ulolli 基本的には上記のセレクタの組み合わせでリストを作成していきます。 中点「・」のリストを作りたい方は、 &l...

疑似クラスとは 疑似クラスは指定したセレクタの全体にスタイルを反映させることができます。 例えば、疑似クラス《hover》を【sample】クラスに付ける場合、 .sample:hover { background-c...

疑似要素とは 疑似要素は指定したセレクタの一部分にスタイルを適用する要素です。 疑似要素には以下のような物があります。 ::after::before::first-letter::first-line::selecti...

セレクタの種類 基本的なセレクタは以下の５つです。 要素型セレクタ（a）IDセレクタ（#sample）クラスセレクタ（.class）属性セレクタ（）全称セレクタ（*） これらのセレクタは全体を指定する場合に利用されていま...

セレクタとは 簡単にセレクタを説明すると、 要素型セレクタ（a）IDセレクタ（#sample）クラスセレクタ（.class）属性セレクタ（）全称セレクタ（*） これらの全てがセレクタです。 ただし、セレクタは上記だ...

ファンクションキー「F12」 ソースコードを書くときに多用するのが「F12」キー。 F12キーのFは「ファンクションキー」とも呼ばれていて特定の機能を実行するためのボタンです。 このクラス名なんだっけ… ソー...