
ホームページ中級講座 Table要素を使って表組作成
ホームページ内で表組みを作成する場合はtable要素を使います。 ひと昔前までは、テーブルレイアウトというのを使ってレイアウトを作成している時代がありましたが、今のTable要 ...

コードが爆速で入力できる。 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の部分だけ、別ファイ ...

09 ホームページ基礎講座 HTML編 header footer
<header><footer>要素 今回のマークアップは独自コンテンツようのarticle要素とsection要素の他に、ページのヘッダー部分に設定す ...

08 ホームページ基礎講座 CSSで様々な線を使う
前回07ホームページの基礎で作成したHTMLのマークアップファイルを使って、CSSを書いていきます。 今回のCSSは、線(borderプロパティ)を中心としたデザインをあれこれ ...

07 ホームページ基礎講座 HTML 箇条書き ul > li ol > li
箇条書きの<ul> <li>要素 <ol><li>要素 ul要素は順不同型リスト ol要素は順序型リストで、ホームページの中で ...

06 ホームページ基礎講座 CSSで横幅のwidthと線指定
前回の05はじめてのホームページでは、section要素などを指定する練習を行いました。 今回は、その指定したsection要素にwidthプロパティを使って横幅指定を行います ...

05 はじめてのホームページ HTMLとCSS
前回の04はじめてのホームページでは、cssのプロパティを使って、要素に背景色などの色指定などを行いました。今回は、htmlにあるマークアップの中でもグループを分ける作業を行い ...

04 はじめてのホームページ HTMLとCSS
前回の03はじめてのホームページでは「画像要素」の設置を行いました。 今回は、HTMLでマークアップされたファイルにCSSを使って、背景色の設定や、線で枠を設置したり、行の中で ...

03 はじめてのホームページ HTMLとCSS
前回は、HTMLにCSSを追加するところまで行いました。(02はじめてのホームページ) 今回は、画像を設置してみます。 今回使うHTMLコードの確認 下記のコードをコピーしてH ...

02 はじめてのホームページ HTMLとCSS
01のはじめてのホームページHTMLとCSS編では、エディタに文字にマークアップ言語であるHTMLを設定しました。タイトルにはタイトル要素のh1を文章には、段落要素の<p ...