中級

模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。 Em ...

今回はよく使うフォトギャラリーを作っていきましょう〜写真とキャプションの組み合わせのカード形のデザインです。<figure>という要素を使います <figure>？ ...

前回の18ホームページ中級講座 flat を使った回り込みの続きになります。 今回は、ページ一番下に常に配置するfooter要素を、一番最下部に固定する状態を作ります。 最近の ...

前回「17 ホームページ中級講座」の続きとなります。 HTMLとCSSは前回のファイルを引き続き使いますので用意しておきましょう。 ここでは、cssの周り込みのプロパティ「fl ...

前回の16 ホームページ中級講座 便利なEmmet!の続きになります。 HTMLは前回のマークアップされた下記のHTMLファイルを使います。cssは外部スタイルシートになるので ...

16ホームページ中級以降は、少し懐かしさもある下記のようなホームページのコードを模写しながら練習していきましょう。 パソコン画像とグラフ画像ファイルは別途準備ください。 テキス ...

前回の14 ホームページ中級講座 display:flex のおさらいの続きになりますので、HTMLとCSSファイルは引き続き同じファイルを使っていきます。 隣接セレクタ ＋ ...

 12  ナビゲーションの作成(CSS)でナビゲーションの横並びの記述で使ったCSSのdisplayプロパティのflexについておさらいのコード模写を行いま ...

前回はホームページのヘッダー内に設置する「グローバルナビゲーション」を設置する12ナビゲーションのCSSを行なってきました。 前回の続きで、ヘッダー以下のマークアップに基づき、 ...

前回 11 ホームページ中級講座 ナビゲーションの作成（HTML)で作成したHTMLファイルを使って、CSSを設置していきましょう。 マークアップされたHTMLは下記になります ...

１１回目と次の１２回目で、下記のようなナビゲーションといわれる「目次」部分が挿入されたコード模写を行なっていきましょう。 まずは、HTMLのマークアップから行いますので、下記の ...

今回は、前回10-1ホームページ中級講座・外部スタイルシート編で作成をしたHTML/CSSファイルをアレンジしていきます。 今回使うHTML/CSSファイルの準備 HTMLファ ...

前回の０９ホームページ基礎講座から中級に上がってきました！中級からは、CSSを記述することが多くなりますので、CSSの行数も多くなります。ここからは、CSSの部分だけ、別ファイ ...