ログイン、もしくは新規登録を行ってください。

ログイン

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 radio_button_unchecked 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
play_circle 93. 疑似要素とposition指定 00:15:34

person講師

池端 由基 氏

池端 由基 氏

LINE株式会社

株式会社サイバーエージェントを経て、NHN Japan株式会社(2013年4月 LINE株式会社に商号変更)
公式アカウント、スタンプ、ビジネスコネクト等のセールスを担当する。
LINE Ads Platformのリリースに合わせて専属営業組織の立上げに参画。
現在は、LINE Ads Platformセールス・コンサルティング室とエンタープライズビジネス事業部を統括。