Web動画

HTML&CSS

Slickの導入方法 (動画あり)

Webのページにスライドショーを導入する場合、人気があるのがjQueryでできたslickが人気です。 レスポンシブレイアウトにも対応しており、スマホにも使えます。 ところが、初心者にはなぜか導入がうまくいかないという声も多いです。 ...
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の使い方(5)〜flexプロパティについて(動画あり)

flexアイテムを拡大、縮小してflexコンテナにぴったりと収める方法の解説をおこないます。
スポンサーリンク
タイトルとURLをコピーしました