動画

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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