-
ホームページ中級講座
04 ホームページ中級講座 display:flex のおさらい
下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML) 02ホームページ中級講座 ナビゲーションの作成(CSS) 今回は改めて、CSSのdisplayプロパティのflexについて、復習もかねて深く学... -
ホームページ中級講座
03ホームページ中級講座 googleフォントを指定
前回はホームページのヘッダー内に設置する「グローバルナビゲーション」のCSS設定「02ホームページ中級講座 ナビゲーションの作成(CSS)」を行なってきました。 前回の続きで、セクションにCSSの設定を行なったあと、Google Webフォント設定を行います。 ... -
ホームページ中級講座
02ホームページ中級講座 ナビゲーションの作成(CSS)
前回01 ホームページ中級講座 ナビゲーションの作成(HTML)作成したHTMLファイルにCSSを記述しデザインを適応させていききます。 【HTMLマークアップファイル】 マークアップされたHTMLは下記になります。また、CSSは外部スタイルシートになりますので、別... -
ホームページ中級講座
01 ホームページ中級講座 ナビゲーションの作成(HTML)
ホームページ中級講座1回目では、下記の完成形をめざしてHTML/CSSを1回目と2回目で記述していきます。 ホームページ初級講座で使っていたフォルダは閉じて、新たにホームページ中級というフォルダを作成し、そのフォルダ内に01フォルダ作成。index.html... -
ホームページ基礎講座
11 ホームページ基礎講座 box-shadow
【今回使うHTML/CSSファイルの準備】 今回は11のフォルダを作成し、その中にindex.htmlのHTMLファイルと外部スタイルシート「style.css」ファイルを作成します。index.htmlファイルを開き下記のコードをコピーするか、模写コーディングを行います。 <!D... -
ホームページ基礎講座
10 ホームページ基礎講座 外部スタイルシートとグラデーションCSS
今回は10のフォルダを作成し、その中にindex.htmlファイルを作成します。そのファイルを開いてHTMLコードをコピーして貼り付けておきましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>エコロジーと環境... -
ホームページ基礎講座
09 ホームページ基礎講座 HTML編 header footer
【header要素 とfooter要素の追加 】 今回のマークアップはarticle要素と、section要素の他に、Webサイトの上部ヘッダーに設定するheader要素。下部フッターに設定するfooter要素を設置していきます。 header要素 header要素は、HTML5から追加された新しい... -
ホームページ基礎講座
08 ホームページ基礎講座 CSSのwidthとmargin
前回07ホームページの基礎で作成したHTMLのマークアップファイルを使って、CSSを書いていきます。 今回のCSSは、線(borderプロパティ)を中心としたデザインを設定しながら、線とその要素内にある文字列との余白をあけるpaddingプロパティを設定する際... -
ホームページ基礎講座
07 ホームページ基礎講座 HTML 箇条書き ul > li ol > li
07ホームページ基礎講座では、Webサイトの中で使う箇条書き要素について、HTMLのマークアップ練習を行います。箇条書き要素は、Webサイトでは多くの場所で目次として扱われ、グローバルナビゲーションと呼ばれる重要な場所で使われたりします。 【HTMLマー... -
ホームページ基礎講座
06 ホームページ基礎講座 CSSで横幅のwidthと線指定
前回の05はじめてのホームページでは、section要素などを指定する練習を行いました。 今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定するborderプロパティを使用してCSSのデザイン設定を行います。 06のフォルダを作成し...