Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 156

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

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 067

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

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 045

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

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 002

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

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 037

前回の06 ホームページ中級講座 便利なEmmet!で作成したHTMLのマークアップファイルを使います。 ここから学習する場合は、フォルダは07を作成して、下記のHTMLファイ ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 098

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

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 036

前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 05のフォルダを作成し、inde.htmlに下記コードを貼り付けます。style.css ...

Webサイト制作,ホームページ中級講座

Thumbnail of post image 169

下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML)02ホームページ中級講座 ナビゲーションの作成( ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 040

前回はホームページのヘッダー内に設置する「グローバルナビゲーション」のCSS設定「02ホームページ中級講座 ナビゲーションの作成(CSS)」を行なってきました。 前回の続きで、 ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 182

前回01 ホームページ中級講座 ナビゲーションの作成(HTML)作成したHTMLファイルにCSSを記述しデザインを適応させていききます。 HTMLマークアップファイル マークア ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 159

ホームページ中級講座1回目では、下記の完成形をめざしてHTML/CSSを1回目と2回目で記述していきます。 ホームページ初級講座で使っていたフォルダは閉じて、新たにホームページ ...

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 050

今回使うHTML/CSSファイルの準備 今回は11のフォルダを作成し、その中にindex.htmlのHTMLファイルと外部スタイルシート「style.css」ファイルを作成しま ...

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 095

今回は10のフォルダを作成し、その中にindex.htmlファイルを作成します。そのファイルを開いてHTMLコードをコピーして貼り付けておきましょう。 <!DOCTYPE ...

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 103

header要素 とfooter要素の追加 今回のマークアップはarticle要素と、section要素の他に、Webサイトの上部ヘッダーに設定するheader要素。下部フッタ ...

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 037

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

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 092

07ホームページ基礎講座では、Webサイトの中で使う箇条書き要素について、HTMLのマークアップ練習を行います。箇条書き要素は、Webサイトでは多くの場所で目次として扱われ、グ ...

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 161

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

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 065

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

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 099

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

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 020

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

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 025

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

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 052

初心者の方むけのホームページ作成講座 はじめてのホームページ基礎講座では、HTMLを、Adobe Brackets を使って文章にマークアップをおこなう手順を行います。 Ado ...