Web Design:お知らせ欄制作『ホバーでボックスがひっくり返り内容を表示するお知らせ欄』の作り方(※コーディング動画※)



Published
<チャプター>
00:00:00|デモスタート

00:00:56|オープニング

※HTML
00:01:11|htmlコーディング01

00:01:47|htmlコーディング02

00:02:14|画面左右中央表示

※SCSS(CSS)
00:02:26|SCSS(CSS)コーディング開始

00:02:30|.infoコーディング

00:02:46|.listコーディング

00:03:03|.itemコーディング

00:03:27|.boxコーディング

00:03:46|.front,.backコーディング

00:04:09|.titleコーディング

00:04:33|.thumbコーディング

00:04:50|.backコーディング01

※HTML
00:05:12|frontパーツ非表示

※SCSS(CSS)
00:05:21|.dateコーディング

00:05:40|.sentenceコーディング

00:05:58|.linkコーディング

※HTML
00:06:23|frontパーツ表示

※SCSS(CSS)
00:06:32|.backコーディング02

00:06:51|.item:hover .boxコーディング

※ソースコード
00:07:08|ソースコード確認

00:07:43|デモエンド

00:08:41|エンディング

<概要>

<動画のソースコードのダウンロードはこちら>
↓↓↓↓↓
『Web Design|ホバーでボックスがひっくり返り内容を表示するお知らせ欄』
URL

皆様のWebサイト制作にお役立てください。
Webデザイン勉強中の方は、勉強素材としてもどうぞ!

<チャンネル運営元>
↓↓↓↓↓
ホームページ制作|MATEREATE(マテリエイト)
https://matereate.com/

****************************************************

html、css、jQueryを使用し、ボタンやナビゲーションなどWebサイトで扱う様々なパーツを制作するコーディング動画です。自分のメモ用としてアップロードしています。基本的にscss(sass)でコーディングしていますが、右側には常にcssファイルを表示しているので、もし参考にしたいという方がいらっしゃいましたら、どうぞご視聴ください。

****************************************************

<音楽素材>
DOVA-SYNDROME https://dova-s.jp/


#Webデザイン
#お知らせ欄
#ホバーエフェクト
#サイト制作
#デザインアイディア
#コーディング動画
#マテリエイト
#ホームページ制作
Category
Web design
Be the first to comment