HTML&CSS

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

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プロパテ...
スポンサーリンク
タイトルとURLをコピーしました