Progate

Phase2

【Phase 2】Git & Command Line学習:すでに使っているツールを体系的に理解する

Phase 2で実際にGitを使いながら作品を公開してきましたが、体系的に学んだことはありませんでした。ProgateのGitコース・Command Lineコースで、使っているツールを改めて理解しました。学習の背景すでにGitを使っていた...
JavaScript

JavaScriptのDOM:Webページを操作する仕組み

Week 2の準備として、DOMについて学習しました。クリックカウンター作成に必要な、Webページを操作する基本的な仕組みです。DOMとはDOM = Document Object Model(ドキュメントオブジェクトモデル)Documen...
HTML/CSS

CSSのFlexbox:モダンなレイアウト方法

メディアクエリに続いて、「Flexbox」を学びました。floatに代わる、より柔軟で強力なレイアウト手法です。FlexboxとはFlexboxは、モダンなレイアウト方法です。要素を簡単に横並びにしたり、配置を制御したりできます。float...
HTML/CSS

CSSのメディアクエリ:レスポンシブデザインの基本

Font Awesomeとpositionに続いて、「メディアクエリ」を学びました。画面サイズに応じてスタイルを変更し、スマホやタブレットにも対応できます。メディアクエリとはメディアクエリは、画面サイズに応じてCSSのスタイルを設定できる手...
HTML/CSS

CSSの応用テクニック:Font Awesomeとposition

インラインブロック要素に続いて、「Font Awesome」と「position」を学びました。アイコンの使用や要素の配置など、実践的なテクニックです。Font AwesomeとはFont Awesomeは、アイコンが用意されているサイトで...
HTML/CSS

CSSのインラインブロック要素:display プロパティで要素の振る舞いを変える

レイアウトの基本に続いて、「インラインブロック要素」を学びました。要素のタイプを自由に変更できる強力な機能です。複数のセレクタを指定カンマ , で区切ることで、複数のセレクタに同じスタイルを適用できます。h1, h2, h3 { color...
HTML/CSS

CSSのレイアウト:div要素とボックスモデル

HTMLの全体構造に続いて、「レイアウト」を学びました。Webページの構造を整理し、見やすく配置するための技術です。レイアウトの基本:<div>要素レイアウトは、<div> 要素で構成します。<div> 要素は、要素をグループ化するために使...
HTML/CSS

HTMLの全体構造:head要素とbody要素

CSSのクラスに続いて、「HTMLの全体構造」を学びました。Webページとして正しく表示されるには、特定の構造が必要です。HTMLの基本構造HTMLファイルには、<html> 要素の中に <head> 要素と <body> 要素が必要です。...
HTML/CSS

CSSのクラス:特定の要素にスタイルを適用する

CSSの基本に続いて、「クラス」を学びました。クラスを使うことで、特定の要素だけにスタイルを適用できます。問題:すべての要素に適用されてしまう要素名をセレクタにすると、同じ要素すべてにスタイルが適用されてしまいます。<p>この段落は赤色にし...
HTML/CSS

CSSとは:Webページをデザインする言語

HTMLでページの構造を作った次は、「CSS」を学びました。CSSを使うことで、Webページを美しくデザインできます。CSSとは**CSS(Cascading Style Sheets)**は、ページをデザインするための言語です。HTMLで...