2024年7月13日 10:39【初心者・未経験者向け】CSSでデザインする準備をしようPart1
CSSを効果的に学び、使いこなすためにはいくつかのツールが必要です。初めての方でもすぐに始められるよう、必要なものをいくつか紹介し、解説します。それでは実際にCSSでデザインする準備を始めましょう！
CSSを書くために必要なもの
実際にCSSを書くためには、いくつかの基本的なものが必要です。
下記3点は、CSSを書く前にあらかじめ準備しておきましょう！
１ エディタ
CSSを書くためには、コードを書くエディタが必要です。多くの人が無料のエディタを使っています。おすすめのエディタは「Visual Studio Code」や「Atom」などです。
これらは使いやすく、CSSを書くのに最適です。エディタをインストールしておきましょう。
２ ブラウザ
CSSでデザインしたページを確認するためには、ウェブブラウザが必要です。
Google Chrome, Mozilla Firefox, Safariなど、どのブラウザでもウェブページを表示することができます。ブラウザはCSSの変更をリアルタイムで確認するための「開発者ツール」も備えているので、コードの変更が直接どのように表示されるかを確認できるのが特徴です。
ブラウザもあらかじめ準備しておきましょう。
３ HTMLファイル
CSSを適用するためには、まずHTMLファイルが必要です。index.htmlというファイルを作成しましょう。
以下は、基本的なHTMLの例です。
<!DOCTYPE html>
<html>
<head>
<title>CSSの準備</title>
</head>
<body>
<h1>こんにちは、CSS!</h1>
<p>これがHTMLの例です。</p>
</body>
</html>上記のようなHTMLファイルを作成し、エディタで保存しておきましょう。
４ CSSファイル
CSSを書くためには、CSSファイルを用意する必要があります。新しいファイルを作成し、「style.css」という名前で保存しましょう。
ファイル（ファイル名はお任せします！）を作成し、ファイルの中に.htmlと.cssのフォルダを作成しておいてください！
ファイル
├── index.html
└── style.cssもう少しでCSSを書く準備が整います！
次回の記事、 CSSでデザインする準備をしようPart2 では、HTMLにCSSを適用する方法を紹介しますので是非チェックしてください！
前回の記事はコチラ▶CSSの基本的な構造と書き方
次回の記事はコチラ▶CSSでデザインする準備をしようPart2
この記事を書いた人
アパレル店員からWEBデザイナーになるため勉強中です。
アパレル店員からWEBデザイナーになるため勉強中です。
.png&w=640&q=75)
