illustrator講座,デザイン講座,動画

Thumbnail of post image 163

Illustratorの中でも苦手な方が多い、ペンツール。直線を書くのはそんなに戸惑いがないものの、曲線となると方向線の向きや、使い方に苦戦する場合が多く見られます。今回はpr ...

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

Thumbnail of post image 144

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

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

Thumbnail of post image 142

模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。 Em ...

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

Thumbnail of post image 001

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

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

Thumbnail of post image 129

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

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

Thumbnail of post image 108

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

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

Thumbnail of post image 158

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

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

Thumbnail of post image 007

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

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

Thumbnail of post image 062

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

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

Thumbnail of post image 039

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

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

Thumbnail of post image 160

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

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

Thumbnail of post image 054

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

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

Thumbnail of post image 177

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

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

Thumbnail of post image 187

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

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

Thumbnail of post image 038

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

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

Thumbnail of post image 173

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

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

Thumbnail of post image 100

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

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

Thumbnail of post image 025

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

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

Thumbnail of post image 115

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

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

Thumbnail of post image 104

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

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

Thumbnail of post image 161

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

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

Thumbnail of post image 118

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