ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/05/25
NEW
週刊ドットインストール(2023/05/25号)を更新しました!
2023/05/24
NEW
ポートフォリオ掲載可能!実案件をイメージした新クラス、『Webアプリ案件修行 ダミーデータジェネレータ編』をリリースしました
PREMIUM
【旧版】実践!ウェブサイトを作ろう
アプリを紹介するサイトを制作しながら、HTML/CSSの実践的なテクニックを学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
実践!アプリのランディングページを模写しよう
架空アプリのランディングページを組み上げながら、模写コーディングの練習をしていきます。
0%
動画レッスン一覧
(16)
質問と回答
(1)
未完了
#01 ウェブサイトを制作していこう
(02:59)
無料公開中
完成版の確認
作業用フォルダの説明
index.htmlの作成
styles.cssの作成
未完了
#02 ヘッダーのマークアップをしていこう
(02:53)
無料公開中
headerのマークアップ
スタイルの設定
未完了
#03 ボタンのスタイルを整えよう
(02:46)
無料公開中
marginの調整
ボタンの作成
未完了
#04 要素の位置を調整していこう
(02:40)
無料公開中
全体の中央揃え
headerのスタイリング
未完了
#05 画像を絶対配置してみよう
(02:28)
ヘッダー画像の配置
Font Awesomeの読み込み
未完了
#06 共通のスタイルを切り出しておこう
(02:00)
共通スタイルの切り出し
未完了
#07 疑似要素でサブタイトルを作ろう
(02:35)
タイトルの設定
data属性
after疑似要素
未完了
#08 スタイルを再利用できるようにしよう
(01:14)
.section-titleの作成
未完了
#09 特徴紹介セクションを作ろう
(02:21)
特徴紹介セクションのマークアップ
未完了
#10 要素を左右に振り分けていこう
(02:20)
:nth-of-type()
要素の振り分け
未完了
#11 特徴紹介セクションを完成させよう
(02:58)
余白の設定
:not(:last-child)
floatの解除
未完了
#12 利用者の声を紹介してみよう
(02:57)
利用者の声セクションのマークアップ
未完了
#13 Flexboxを使って要素を配置しよう
(02:27)
Flexbox
画像の絶対配置
未完了
#14 利用者の声セクションを完成させよう
(02:02)
画像位置の調整
余白の調整
未完了
#15 最後のセクションを作っていこう
(02:24)
call-to-actionセクションのマークアップ
call-to-actionセクションのスタイリング
未完了
#16 ウェブサイトを完成させよう
(01:42)
footerの作成
スタイルシートの整理
#07 疑似要素でサブタイトルを作ろう
サブタイトルでafter疑似要素を使うのはなぜでしょうか
2019年8月13日
ギャラリー
このレッスンについて
最終更新日
2018年5月17日
バージョン情報
HTML / CSS
関連キーワード
(5)
基礎講座
(368)
初心者向け
(367)
HTML
(115)
CSS
(116)
ウェブサイト構築
(155)
このレッスンを共有する