HTML/CSSコーディング基礎
制作 | 16.1h
本講座では、Webサイト制作全体フローの中で発生するデザイン画像をWebページとして組み立てる作業「コーディング」について学習していきます
講座で使う資料は下記からダウンロードしてください
『素材_HTMLCSS超入門』
playlist_play HTML/CSSコーディング基礎 — 全93講座
radio_button_unchecked
1. 学習の進め方
00:05:32
radio_button_unchecked
2. Webページを表示する仕組みを確認しよう
00:03:07
radio_button_unchecked
3. Webページを作るファイルを確認しよう
00:03:32
play_circle
4. Webサイト制作のトレンドを確認しよう
00:12:27
radio_button_unchecked
5. サンプルファイルの確認
00:04:34
radio_button_unchecked
6. ブラウザを確認しよう
00:14:45
radio_button_unchecked
7. テキストエディタを確認しよう(mac)
00:20:52
radio_button_unchecked
8. テキストエディタを確認しよう(win)
00:20:08
radio_button_unchecked
9. 拡張子を表示しよう(mac)
00:04:59
radio_button_unchecked
10. 拡張子を表示しよう(win)
00:04:14
radio_button_unchecked
11. サイトのディレクトリ(フォルダ)構造について
00:12:49
radio_button_unchecked
12. HTMLの基本的な書式を確認しよう
00:17:06
radio_button_unchecked
13. HTMLの階層構造を理解しよう
00:09:40
radio_button_unchecked
14. HTML を記述する際の注意点
00:08:06
radio_button_unchecked
15. HTMLのコメント/コメントアウト
00:07:22
radio_button_unchecked
16. 完成見本を確認しよう
00:04:10
radio_button_unchecked
17. フォルダの準備をしよう
00:03:41
radio_button_unchecked
18. VSCodeのエメットについて
00:09:09
radio_button_unchecked
19. htmlの雛形を作ろう
00:18:53
radio_button_unchecked
20. bodyに掲載する情報を用意しよう
00:03:56
radio_button_unchecked
21. 見出しのマークアップ
00:19:38
radio_button_unchecked
22. 段落のマークアップ
00:06:29
radio_button_unchecked
23. テキストの改行について
00:07:44
radio_button_unchecked
24. 箇条書き項目のマークアップ
00:16:41
radio_button_unchecked
25. 相対パスと絶対パスについて理解しよう
00:16:51
radio_button_unchecked
26. 画像を設置しよう
00:13:54
radio_button_unchecked
27. リンクを貼ろう(外部リンクとページ内リンク)
00:17:19
radio_button_unchecked
28. 詳細ページもマークアップしよう
00:19:26
radio_button_unchecked
29. 自己紹介ページと詳細ページをリンクさせよう
00:03:54
radio_button_unchecked
30. 自己紹介ページを少しだけCSSで装飾してみよう
00:19:41
radio_button_unchecked
31. CSSとは
00:03:20
radio_button_unchecked
32. CSSの基本構文
00:05:00
radio_button_unchecked
33. CSSを記述するところ
00:09:51
radio_button_unchecked
34. CSSの学習のしかた
00:07:41
radio_button_unchecked
35. セレクタを理解する
00:12:53
radio_button_unchecked
36. idセレクタとclassセレクタ
00:21:41
radio_button_unchecked
37. クラスの命名規則(BEM)について知ろう
00:15:49
radio_button_unchecked
38. 属性セレクタと全称セレクタ
00:08:44
radio_button_unchecked
39. 疑似クラスとは
00:02:18
radio_button_unchecked
40. リンク、要素の状態に合わせた指定
00:11:20
radio_button_unchecked
41. 要素の配置順序を数えた指定(1)
00:07:47
radio_button_unchecked
42. 要素の配置順序を数えた指定(2)
00:12:17
radio_button_unchecked
43. セレクタの詳細度(獲得ポイント)
00:15:52
radio_button_unchecked
44. フォント全般の指定
00:01:08
radio_button_unchecked
45. 色、装飾、太さの指定
00:05:50
radio_button_unchecked
46. フォントサイズの指定と単位
00:18:59
radio_button_unchecked
47. 行高の指定
00:20:20
radio_button_unchecked
48. 文字間の指定
00:04:45
radio_button_unchecked
49. 文字を横方向にそろえる指定
00:04:46
radio_button_unchecked
50. 文字を縦方向にそろえる指定
00:04:56
radio_button_unchecked
51. 文字の下線や訂正線の指定
00:06:08
radio_button_unchecked
52. フォントファミリーの指定とローカルフォントについて
00:10:10
radio_button_unchecked
53. Webフォントについて
00:08:03
radio_button_unchecked
54. Google Fontsの使い方
00:17:22
radio_button_unchecked
55. 色の指定と種類
00:25:02
radio_button_unchecked
56. 要素の透過と背景の透過
00:04:36
radio_button_unchecked
57. 背景全般の指定
00:03:02
radio_button_unchecked
58. 背景色の指定
00:01:05
radio_button_unchecked
59. 背景画像の指定(サイズ、繰り返し、位置)
00:21:53
radio_button_unchecked
60. ボックスモデルとは
00:04:07
radio_button_unchecked
61. ボックスモデルを作ってみよう
00:11:45
radio_button_unchecked
62. ボックス間の余白を理解する
00:04:42
radio_button_unchecked
63. 余白や線の方向指定
00:05:35
radio_button_unchecked
64. marginやpaddingの違いを理解する
00:06:52
radio_button_unchecked
65. ショートハンドを理解する
00:06:59
radio_button_unchecked
66. marginの相殺
00:16:13
radio_button_unchecked
67. ボックスサイジングを理解する
00:09:24
radio_button_unchecked
68. テキストボックスの制作
00:34:42
radio_button_unchecked
69. ボタン制作(ボタンの形状)
00:11:19
radio_button_unchecked
70. ボタンの制作(ボタンの装飾)
00:05:43
radio_button_unchecked
71. 背景画像と見出しを設置してみよう
00:19:07
radio_button_unchecked
72. ブロック要素、インライン要素
00:12:06
radio_button_unchecked
73. インラインブロック要素
00:05:23
radio_button_unchecked
74. 表示形式の変更、表示・非表示の切り替えの指定
00:09:21
radio_button_unchecked
75. はみ出しに関する指定
00:10:07
radio_button_unchecked
76. 要素の重なり、前面と背面の指定
00:08:54
radio_button_unchecked
77. 横幅の指定と単位
00:15:25
radio_button_unchecked
78. 高さの指定と単位
00:11:45
radio_button_unchecked
79. レイアウトパターンを理解する
00:08:35
radio_button_unchecked
80. ブロック要素の中央ぞろえ
00:08:10
radio_button_unchecked
81. ブロック要素の右揃え、左ぞろえ
00:04:43
radio_button_unchecked
82. ブロック要素とテキストの中央ぞろえについて
00:06:58
radio_button_unchecked
83. 横並びのレイアウトについて
00:07:16
radio_button_unchecked
84. フレックスボックスによるレイアウト
00:05:14
radio_button_unchecked
85. フレックス系プロパティ(横の整列)
00:10:43
radio_button_unchecked
86. フレックス系プロパティ(縦の整列)
00:11:25
radio_button_unchecked
87. フレックス系プロパティ(折り返し)
00:10:48
radio_button_unchecked
88. フレックス系プロパティ(要素の順序)
00:08:09
radio_button_unchecked
89. フレックス系プロパティ(伸縮)grow
00:06:10
radio_button_unchecked
90. フレックス系プロパティ(伸縮)shrink
00:08:20
radio_button_unchecked
91. 配置に関する指定
00:05:44
radio_button_unchecked
92. 配置位置に関する指定
00:13:48
radio_button_unchecked
93. 疑似要素とposition指定
00:15:34
recommendおすすめの講座
leaderboardその他ツール 人気ランキング
person講師
池端 由基 氏
LINE株式会社
株式会社サイバーエージェントを経て、NHN Japan株式会社(2013年4月 LINE株式会社に商号変更)
公式アカウント、スタンプ、ビジネスコネクト等のセールスを担当する。
LINE Ads Platformのリリースに合わせて専属営業組織の立上げに参画。
現在は、LINE Ads Platformセールス・コンサルティング室とエンタープライズビジネス事業部を統括。
公式アカウント、スタンプ、ビジネスコネクト等のセールスを担当する。
LINE Ads Platformのリリースに合わせて専属営業組織の立上げに参画。
現在は、LINE Ads Platformセールス・コンサルティング室とエンタープライズビジネス事業部を統括。
