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

20 ホームページ中級講座 HTML編 フォトギャラリーを作る
今回はよく使うフォトギャラリーを作っていきましょう〜写真とキャプションの組み合わせのカード形のデザインです。<figure>という要素を使います <figure>? ...

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

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

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

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

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

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

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

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

11 ホームページ中級講座 ナビゲーションの作成(HTML)
11回目と次の12回目で、下記のようなナビゲーションといわれる「目次」部分が挿入されたコード模写を行なっていきましょう。 まずは、HTMLのマークアップから行いますので、下記の ...

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

10-1 ホームページ中級講座 外部スタイルシート
前回の09ホームページ基礎講座から中級に上がってきました!中級からは、CSSを記述することが多くなりますので、CSSの行数も多くなります。ここからは、CSSの部分だけ、別ファイ ...