2020年4月– date –
-
01 バナー作成講座 まずは基本のサイズとフォント設定
【バナー作成するための準備】 バナーを作成するアプリは、特にこれでないとダメ！と決まりがあるわけではありません。使いやすい、慣れたプログラムでもかまいません 但し、Webデザインの仕事としてバナー作成を依頼される場合は別です。一般的なクラウド... -
コードが爆速で入力できる。 Emmet!プラグインの使い方
模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。 【EmmetでHTMLのタグを入力してみようっっw】 Emment でHTMLのタグ（要素）を... -
20 ホームページ中級講座 HTML編 フォトギャラリーを作る
今回はよく使うフォトギャラリーを作っていきましょう〜写真とキャプションの組み合わせのカード形のデザインです。<figure>という要素を使います <figure>？フィギュアって読むんですか？あの人形の? 読み方はあってますね。figureは図という... -
19 ホームページ中級講座 footerを下部に固定
前回の18ホームページ中級講座 flat を使った回り込みの続きになります。 今回は、ページ一番下に常に配置するfooter要素を、一番最下部に固定する状態を作ります。 最近のWebサイトは、スマホサイトの影響もあって、縦に長いLP（ランディングページ）が多... -
18 ホームページ中級講座 floatを使った周り込み
前回「17 ホームページ中級講座」の続きとなります。 HTMLとCSSは前回のファイルを引き続き使いますので用意しておきましょう。 ここでは、cssの周り込みのプロパティ「float」を使った例を行なっています。 floatは、画像周りこみを制御するプロパティで... -
07ホームページ中級講座 CSSで作成するロゴ
前回の06 ホームページ中級講座 便利なEmmet!で作成したHTMLのマークアップファイルを使います。 ここから学習する場合は、フォルダは07を作成して、下記のHTMLファイルをコピーするか、コードを模写してから行いましょう。cssは外部スタイルシートになる... -
06 ホームページ中級講座 便利なEmmet!
16ホームページ中級以降は、少し懐かしさもある下記のようなホームページのコードを模写しながら練習していきましょう。 パソコン画像とグラフ画像ファイルは別途準備ください。 【テキストにマークアップを行なっていきます】 下記のテキストをコピーして... -
05 ホームページ中級講座 様々なセレクタ::隣接セレクタ
前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 05のフォルダを作成し、inde.htmlに下記コードを貼り付けます。style.cssはファイル作成のみ行います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UT... -
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)
ホームページ中級講座１回目では、下記の完成形をめざしてHTML/CSSを１回目と２回目で記述していきます。 ホームページ初級講座で使っていたフォルダは閉じて、新たにホームページ中級というフォルダを作成し、そのフォルダ内に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
前回０７ホームページの基礎で作成したHTMLのマークアップファイルを使って、CSSを書いていきます。 今回のCSSは、線（borderプロパティ）を中心としたデザインを設定しながら、線とその要素内にある文字列との余白をあけるpaddingプロパティを設定する際... -
07 ホームページ基礎講座 HTML 箇条書き ul > li ol > li
07ホームページ基礎講座では、Webサイトの中で使う箇条書き要素について、HTMLのマークアップ練習を行います。箇条書き要素は、Webサイトでは多くの場所で目次として扱われ、グローバルナビゲーションと呼ばれる重要な場所で使われたりします。 【HTMLマー... -
06 ホームページ基礎講座 CSSで横幅のwidthと線指定
前回の０５はじめてのホームページでは、section要素などを指定する練習を行いました。 今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定するborderプロパティを使用してCSSのデザイン設定を行います。 06のフォルダを作成し... -
05 はじめてのホームページ HTMLとCSS
前回の０４はじめてのホームページでは、cssのプロパティを使って、要素に背景色などの色指定などを行いました。今回は、htmlにあるマークアップの中でもグループを分ける作業を行います。 セクショニングコンテンツの設定を行なったhtmlファイルが下記に... -
04 はじめてのホームページ HTMLとCSS
前回の０３はじめてのホームページでは「画像要素」の設置を行いました。 今回はHTMLでマークアップされたファイルに、CSSを使って背景色の設定や、線を用いた枠の設置、行内での中央揃えなどを行います。まずここで学習するhtmlファイルは下記になります... -
03 はじめてのホームページ HTMLとCSS
前回は、HTMLにCSSを追加するところまで行いました。(02はじめてのホームページ) 今回は、画像を設置してみます。 【今回使うHTMLコードの確認】 前回同様、03のフォルダを作成して、そのフォルダにindex.htmlを作成しておきましょう。フォルダの作成、フ... -
02 はじめてのホームページ HTMLとCSS
01のはじめてのホームページHTMLとCSS編では、エディタに文字にマークアップ言語であるHTMLを設定しました。タイトルにはタイトル要素のh1を、文章には段落要素の<p>をマークアップしています。今回は、デザイン担当のCSSを設定します。 【ホームペ...
12