youtube

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

模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「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の部分だけ、別ファイ ...

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

前回０７ホームページの基礎で作成したHTMLのマークアップファイルを使って、CSSを書いていきます。 今回のCSSは、線（borderプロパティ）を中心としたデザインをあれこれ ...

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

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

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

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

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

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