ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/11/30
NEW
【週刊ドットインストール】 サービス開始12周年!、Tailwind CSS入門リリース、256timesにて回答ボット稼働開始
PREMIUM
【旧版】実践!ポートフォリオサイトを作ろう
HTML/CSSでポートフォリオサイトを作りながら実践的なWeb制作について学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
実践!ポートフォリオサイトを模写しよう
シンプルなポートフォリオサイトを組み上げながら模写コーディングの練習をしていきます。
0%
動画レッスン一覧
(17)
質問と回答
(58)
未完了
#01 ポートフォリオサイトを作ってみよう
(02:24)
無料公開中
完成版の確認
プロジェクトフォルダの設定
index.htmlの作成
フォルダ構成の確認
未完了
#02 faviconを設定してみよう
(02:09)
無料公開中
!
faviconの設定
未完了
#03 画像を表示してみよう
(02:37)
無料公開中
header
画像の表示
未完了
#04 ヘッダーに背景色をつけよう
(02:52)
無料公開中
style.cssの作成
背景色の設定
bodyのスタイリング
imgのスタイリング
未完了
#05 名前と自己紹介を配置しよう
(02:41)
コンテンツの追加
.container
未完了
#06 フレックスボックスを使おう
(01:44)
フレックスボックスの設定
h1のスタイリング
未完了
#07 リストを配置してみよう
(01:30)
リストの配置
ulのスタイリング
未完了
#08 リストのスタイルを整えよう
(02:30)
画像の配置
リストのスタイリング
未完了
#09 ヘッダーのスタイルを整えよう
(02:44)
上下中央揃えの設定
余白の調整
画像の丸め
outlineの削除
VS Codeのコード折りたたみ機能
未完了
#10 見出しのスタイルを整えよう
(02:21)
mainタグ
見出しのスタイリング
未完了
#11 作品紹介のセクションを作ろう
(01:17)
sectionタグ
作品紹介
未完了
#12 作品の画像を配置しよう
(01:45)
imgタグ
動作確認
未完了
#13 見出しと段落のスタイルを整えよう
(02:26)
h2のスタイリング
pのスタイリング
outlineの削除
未完了
#14 paddingとmarginの違いを理解しよう
(02:30)
paddingの設定
marginの設定
背景色、境界線の設定
未完了
#15 余白を設定していこう
(01:52)
section間の余白
section内の余白
未完了
#16 フッターを作り込んでいこう
(01:52)
フッターの設置
smallタグ
footerのスタイリング
未完了
#17 いろいろな書き方を試してみよう
(02:38)
太字の設定
.containerの設定
#01 ポートフォリオサイトを作ってみよう
文字を縦書きにして、右から追加していくようなレイアウトは CSS でできますか?
2022年9月29日
#02 faviconを設定してみよう
HTML モードを確認するためのバーが表示されません
2022年6月9日
rel="icon" と書けば「 href で指定したファイルは favicon と認識される」という理解で正しいでしょうか?
2022年1月27日
meta タグの「 http-equiv="X-UA-Compatible" 」は必要ですか?
2022年1月27日
#03 画像を表示してみよう
HTML で img タグにサイズ指定するとき単位を指定しないのはなぜですか?
2022年6月1日
ヘッダー画像のサイズ指定は styles.css で行っても良いですか?
2022年1月27日
なぜ width と height を HTML で設定するのでしょうか?
2022年1月27日
なぜ favicon のアイコンは <link rel="" の形で表して太郎のアイコンは <img src="" の形で表すのですか?
2022年1月27日
#04 ヘッダーに背景色をつけよう
style.css と styles.css は何が違うのですか?
2022年1月27日
フォントサイズの設定について、現場の方達が一般的に使う単位はどれなのでしょうか?
2022年1月27日
reset CSS は使ったほうがよいのですか?
2022年1月27日
margin:0; を入力してもブラウザ上部の空白が消えません
2022年1月27日
vertical-align: bottom; にしたとき画像の上の背景色が埋まるのは何故ですか?
2022年1月27日
#05 名前と自己紹介を配置しよう
header .container ではなく、 .container ではだめですか?
2022年11月20日
フレックスボックスを使って中央揃えしても大丈夫ですか?
2022年7月23日
header .container を header > .container と書いても問題ありませんか?
2022年6月22日
header{} 内に .container のスタイルを書いても問題ありませんか?
2022年6月10日
header .container {} を .container {} と書いてもいいのでしょうか?
2022年1月27日
親要素で指定した margin を子要素で同じ値で再度、定義しているのはなぜですか?
2022年1月27日
outline と border の違いは何ですか?
2022年1月27日
#06 フレックスボックスを使おう
width を設定しないと margin: 0 auto; が 適用されないのはなぜですか?
2022年6月1日
header h1 ではなく、.container h1 としても問題ありませんか?
2022年6月10日
CSS で設定する値はどのようにして決めているのでしょうか?
2022年1月27日
要素に直接 class を指定するか、div で囲ってからスタイリングするか、どちらの方が良いのですか?
2022年1月27日
h1 タグを使う理由は何ですか?
2022年1月27日
フレックスボックスの詳しいレッスンはありますか?
2022年1月27日
#07 リストを配置してみよう
MDN に、Safari では list-style: none; を指定するとリストとして認識されないとあります
2022年6月10日
list-style-type: none; と list-style: none; の違いはなんですか?
2022年6月3日
ul に padding: 0 をつけるのはなぜですか?
2022年2月4日
ul タグがなくてもアイコンは表示できますが、なぜ必要なのですか?
2022年1月27日
body や h1 などに対して margin: 0; を記述しているのに header でさらに margin: 0; を記述しないといけないのでしょうか?
2022年1月27日
リストのスタイルを消すときに header ul で指定していますが、.container ul と指定しては間違いなのでしょうか?
2022年1月27日
#08 リストのスタイルを整えよう
float か flex のどちらを使えばいいですか?
2022年6月10日
img の width と height を CSS に書いても問題ないですか?
2022年2月10日
画像の width や height に単位をつけないのはなぜですか?
2022年1月27日
ブログアイコンの 1 つ目のリストに margin-right としないのは何故ですか?
2022年1月27日
header ul li + li で写真アイコンのみが指定されるのはなぜですか?
2022年1月27日
#09 ヘッダーのスタイルを整えよう
padding: 32px 0; の 0 はどういう意味ですか?
2022年9月29日
アイコンの width と height を HTML に直接書き込んでいるのはなぜですか?
2022年6月22日
margin-left: 32px; の 32px はどうやって決めているのですか?
2022年5月19日
.container ではなく header .container とするのはなぜですか?
2022年5月24日
header .icon ではなく header .container img に border-radius を指定しても良いですか?
2022年1月27日
margin と padding の使い分けについて教えてください
2022年1月27日
#10 見出しのスタイルを整えよう
中央揃えにする方法が多くてどれを使えばいいかわかりません
2022年7月9日
#11 作品紹介のセクションを作ろう
section タグは main タグの中に入れてもいいのですか?
2022年7月23日
section で勇者ゲームから神経衰弱まで括っても見た目は同じでしたが、 section は必要なのでしょうか?
2022年1月27日
#12 作品の画像を配置しよう
画像サイズ height="225" はどうやって決めたのですか?
2022年5月24日
画像の width だけでなく height も同時に指定するのはなぜですか?
2022年1月27日
画像の width height は、CSS と HTML どちらに記述するべきですか?
2022年1月27日
#13 見出しと段落のスタイルを整えよう
outline: 5px; margin: 5px; とすると、outline は margin の中に収まりますか?
2022年7月9日
#14 paddingとmarginの違いを理解しよう
背景色や border が無い場合、margin ではなく padding でレイアウトする人が多いのはなぜですか?
2022年1月27日
#15 余白を設定していこう
なぜ main h2 に margin: 16px 0; としないのですか?
2022年8月23日
「 section の上に背景色が伸びるのも微妙なので」とはどういうことですか?
2022年4月4日
main section + section で 3 番目の section の上にも余白がつくのはなぜですか?
2022年1月27日
section + section と書くと 2 番目以降の section の上にも余白がつくのは何故ですか?
2022年1月27日
#16 フッターを作り込んでいこう
footer にあてているスタイルを small に指定しても何も変わらないのはなぜですか?
2022年1月27日
#17 いろいろな書き方を試してみよう
スタイルを書く順番に決まりはありますか?
2022年4月4日
あとから共通する CSS の設定をまとめるというのも現場ではあることなのでしょうか?
2022年1月27日
リリース情報(note)
『実践!ポートフォリオサイトを作ろう』をリリースしました
関連キーワード
基礎講座
(386)
初心者向け
(379)
HTML
(116)
CSS
(118)
Web制作
(35)
詳細情報
最終更新日
2021年8月25日
バージョン情報
Chrome 92