ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/11/30
NEW
【週刊ドットインストール】 サービス開始12周年!、Tailwind CSS入門リリース、256timesにて回答ボット稼働開始
PREMIUM
実践!スマートフォンサイトを作ろう
スマートフォン向けのサイトを制作するための、実践的なテクニックを学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
実践!アプリのランディングページを模写しよう
架空アプリのランディングページを組み上げながら、模写コーディングの練習をしていきます。
0%
動画レッスン一覧
(22)
未完了
#01 スマートフォン向けサイトを作ろう
(02:55)
無料公開中
index.htmlの作成
styles.cssの作成
未完了
#02 Viewportの設定をしよう
(01:47)
無料公開中
デベロッパーツールでの確認
Viewportの設定
未完了
#03 ヘッダー部分を作ろう
(02:16)
無料公開中
headerのマークアップ
スタイリング
未完了
#04 アイコンを配置してみよう
(02:37)
無料公開中
Font Awesomeのアイコン導入
idとclassの命名規則
未完了
#05 特徴紹介セクションを作ろう
(02:25)
無料公開中
特徴紹介セクション
画像幅の調整
未完了
#06 見出しのスタイルを整えよう
(02:34)
見出しのスタイリング
余白の調整
未完了
#07 ニュースのセクションを作ろう
(01:59)
newsセクション
画像幅の調整
未完了
#08 共通のスタイルを切り出してみよう
(02:22)
見出しのスタイル
余白、背景色のスタイル
未完了
#09 紹介動画のセクションを作ろう
(02:54)
動画の埋め込み
領域の調整
未完了
#10 16:9の領域を作ってみよう
(02:53)
垂直方向のpadding
縦横比の保持
動作確認
未完了
#11 フッター領域を作ろう
(00:54)
footerタグ
未完了
#12 メニューを作っていこう
(02:47)
navタグ
メニューのスタイリング
未完了
#13 閉じるボタンをつけよう
(02:40)
閉じるボタンの追加
shownクラスの作成
未完了
#14 JavaScriptを書いていこう
(02:15)
scriptタグ
要素の取得
クリックイベントの設定
未完了
#15 エラーを修正してみよう
(01:32)
デベロッパーツールの起動
エラーの確認方法
未完了
#16 コードを見やすくしてみよう
(01:24)
変数
改行、字下げ
未完了
#17 メニューを開閉できるようにしよう
(02:35)
classListの操作
即時関数、use strictキーワードの利用
未完了
#18 メディアクエリーを使ってみよう
(02:41)
メディアクエリー
動作確認
未完了
#19 画像を左右に振り分けてみよう
(02:07)
float、nth-of-typeによるスタイルの変更
未完了
#20 Flexboxで要素を横並びにしよう
(01:36)
Flexbox
動作確認
未完了
#21 PC向けのレイアウトを作ろう
(02:12)
幅の固定
メニューのスタイリング
未完了
#22 サイトを完成させていこう
(02:00)
サイトの完成
余白の調整
リリース情報(note)
『実践!スマートフォンサイトを作ろう』を追加しました
関連キーワード
基礎講座
(386)
初心者向け
(379)
HTML5
(32)
CSS
(118)
CSS3
(20)
JavaScript
(158)
ウェブサイト構築
(155)
詳細情報
最終更新日
2018年6月7日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript