HTML&CSS Slickの導入方法 （動画あり）
Webのページにスライドショーを導入する場合、人気があるのがjQueryでできたslickが人気です。
レスポンシブレイアウトにも対応しており、スマホにも使えます。
ところが、初心者にはなぜか導入がうまくいかないという声も多いです。
...
Web動画
HTML&CSS 
HTML&CSS Web作成講座〜FlexBoxレイアウトでヘッダーを作成（動画あり）
FlexBoxレイアウトでヘッダー部分作成課題
課題
課題用ファイル の「header_flex_beforeフォルダ」の中のCSSフォルダ内の「style.css」を編集して、「完成例.png」のようなレイアウトを作成...
HTML&CSS Web作成講座 FlexBoxレイアウトの動画
FlexBoxレイアウトの動画を下記ページに追加しました。
FlexBoxレイアウトはCSS3から採用された新しいレイアウト方法です。
この新しいレイアウトの基本的な使い方の解説です。
動画は過去の記事に追加しています。
F...
HTML&CSS Web作成講座 floatレイアウト1（動画あり）
フロートの挙動のサンプル1
フロートの挙動のサンプル2
フロートの挙動のサンプル3
FLOATの仕組みとOVERFLOWでFLOAT解除できる理由
サンプルのダウンロ...
HTML&CSS Web作成講座 floatレイアウト2 （コード解説 動画）
サンプルのダウンロード
ここでダウンロードする「float1.zip」ファイルは、以下の動画で使用したものです。
Web作成講座 floatレイアウト1
Web作成講座 floatレイアウト2 （コード解説 動...
HTML&CSS Web制作講座 Webフォント、inlin-block、marginの相殺について(動画あり）
この動画は「WEB制作講座 BACKGROUNDプロパティの説明(動画あり）」の続きになります。
Google Fontsの使い方の説明、displayプロパティに「inline-block」と「block」、「inline」の違い...
HTML&CSS Web制作講座 backgroundプロパティの説明(動画あり）
Web制作講座について
こちらは、Web制作の基礎知識を学習して、具体的にレイアウトを組み始める段階の初心者をターゲットにした内容です。
HTML,CSSの文法の原理原則や、特にコーディングで行き詰まりそうな点を解説します。
今回...
HTML&CSS CSS flex〜チートシート(動画あり)
flexBoxの主軸と交差軸についての動画
FlexBoxのプロパティと値をまとめたものです。
FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。
ネット上にも団...
HTML&CSS FlexBoxの使い方（7）〜 flex-wrapについて（動画あり）
flex-wrapの動画
floatの代わりにdisplay:flexを使用するとレイアウトが簡単になります。けれども、場合によっては思わぬ挙動となり困る場合が出てきます。それは例えば幅の問題です。Flexアイテムに指定し...
HTML&CSS FlexBoxの使い方（５）〜flexプロパティについて（動画あり）
flexプロパティの動画
flexプロパティについて解説します。
display:flexを指定したときflexコンテナはblockの性格を持ち、親要素の幅いっぱいに広がります。flexコンテナでflexアイテムをき...