HTML&CSS Slickの導入方法 （動画あり）
Webのページにスライドショーを導入する場合、人気があるのがjQueryでできたslickが人気です。
レスポンシブレイアウトにも対応しており、スマホにも使えます。
ところが、初心者にはなぜか導入がうまくいかないという声も多いです。
...
HTML&CSS
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 SNS対策でOGP設定をする
WebサイトでSNS対策をする場合はOGPの設定をしておきましょう。
OGPとは、Open Graph Protocol(オープン・グラフ・プロトコル)のことです。
Facebookやtwitter、などのSNSでシェアされた時に「...
HTML&CSS z-indexこうすれば思い通り動く〜ネットや入門書では誤解を生む説明が多いので注意！
HTMLとCSSのレイアウトで親要素の裏側に子要素を移動したい。つまり親子間での重ね順を変える場合どうしてますか？
positionプロパティとz-indexプロパティを使って移動させるはずです。
でも、なかなか思い通りに動いてくれ...
HTML&CSS object-fitプロパティとobject-positionプロパティを活用した正円形の画像表示
CSSのborder-radiusプロパティを使用すると簡単に角丸を作成することができます。
border-radiusプロパティの使い方は MDN web docs ページを参考にしてください。
border-radiusプロパテ...