グッズスタンディングディスクノートパソコンパソコン書斎椅子ブルーライトカットモニタブルーライト対策眼鏡つぶやき腰椎椎間板ヘルニア電源カフェ運営サイト当サイトについてお問い合わせ超初心者・ノンプログラマー・ノンデザイナーだってかっこいいホームページをちゃんと作成することができる!実践的な方法、コツやツボなど役立つ情報をわかりやすく説明するナビサイトです。テキストエディタTweetPocket今日はAtomテキストエディタでhtml・cssファイルを新規作成してから保存するまでの操作方法の流れを説明しますね。長くなりますが、必ずできるようになりますのでゆっくりやって下さいネ。̄)なので、このページを作りました(^^ゞ。いうことでAtomエディタでhtml・cssファイルを「新規作成→文字コード設定→改行コード設定→ファイル種類設定→保存する」まで操作する方法をまとめました。できるようになりますのでゆっくりやって下さいネ。今日の作業をする前に、プロジェクトフォルダを登録する必要があります。作成していない人はこちらから準備をお願いしますねAtomテキストエディタでプロジェクトフォルダを登録する方法プロジェクトフォルダって何?というあなたはコチラをどうぞAtomテキストエディタのプロジェクトフォルダってそもそも何?それでは、ファイルの新規作成からはじめますね。ファイルを新規作成Atomでファイルを新規作成する方法は、何通りかありますが、一番簡単な方法を説明しますね。[ファイル]→[新規ファイル]を選択してください。すると[untitled]というタブが表示されます。これでファイルが新規作成できました。文字コードを設定するAtomでファイルを開いたら「文字コード」を設定します。html5とcssはUTF-8が推奨ですので、文字コードはUTF-8で設定する前提で話をすすめますね。いっても方法は簡単です。初期設定でUTF-8に設定されています。Atomウィンドウの右下をみると"UTF-8"の文字がみていますね。ちなみにこのUTF-8は"BOMなし"です。あっ、BOMについて知りたいというあなたはコチラ→そもそも「UTF-8(BOMなし)」と「UTF-8(BOMあり)」とはもしUTF-8以外の文字コードが設定されていた場合は、Atomウィンドウの右下に設定されている文字コードをクリックしてください。文字コード選択画面が表示されますので、そこから「UTF-8」を選択してください。改行コードを設定するAtomで改行コードを設定します。改行コードはAtomウィンドウの右下に表示されています。「CRLF」が設定されていますね。わたしの場合、改行コードについては、このままCRLFで問題ないのですが、改行コードをLFに設定する人もいると思うので、その方法をお伝えしますね。このAtomウィンドウ右下にある「CRLF」部分をクリックすると選択画面が表示されますので「LF」を選択してください。Atomウィンドウ右下は「CRLF」と表示されたままですが、「LF」に切り替わっています。何か文字を入力して改行をするとAtomウィンドウ右下に「LF」と表示されます。どれを選択すればいいの?それでは次にいきます。htmlやcssなどファイルの種類を選択Atomでhtmlやcssなどこれから編集しようとしているファイルの種類を選択します。Text」の文字をクリックしてください。ファイルの種類選択画面が表示されるので、そこから「HTML」「CSS」などこれから作成するファイルの種類を選択してください。htmlの場合HTMLを選択します。Atomウィンドウの右下が「HTML」に切り替わりましたね。これでhtmlタグが強調表示されるようになります。cssの場合CSSを選択します。Atomウィンドウの右下が「CSS」に切り替わりましたね。これでCSSセレクタおよびプロパティが強調表示されるようになります。Atomで編集しているとタブに青丸(=●)マークが表示される設定ができたので、Atomでhtmlやcssの編集をしていきます。編集するとタブの部分に青丸(=●)マークが表示されます。これは編集中のファイルが、まだ保存されていない印です。いうことで、次は保存の方法です。Atomでhtmlやcssなどファイルを保存するAtomでhtmlやcssなど編集が終わったら、保存します。[ファイル]→[保存]を選択してください。ダイアログボックスが表示されます。ここで保存先フォルダを選択し、ファイル名を入力します。このときファイルの拡張子(.htmlや.css)も一緒に入力してくださいね。今回はhtmlファイルを編集したので、test.htmlと入力します。これでファイル保存終了です......あれっ?画面左側にいま保存したファイルが表示されましたね。この部分をAtomではツリービューと呼んでいます。Atomの便利なところはこの左側ウィンドウ(=ツリービュー)を使用して、ファイルの新規作成、コピー、削除などができることなんです。これについては、また後日ご紹介します。以下にその方法をまとめました。Atomテキストエディタでhtml・cssファイルを、コピー→貼り付け→名前を変更するなど、複製する3つの方法Atomテキストエディタでhtml・cssファイルを削除する方法Atomテキストエディタでhtml・cssファイルを編集し、保存する方法まとめ今日はちょっと長くなってしまいましたが、Atomテキストエディタでhtml・cssファイルを「新規作成→文字コード設定→改行コード設定→ファイル種類設定→保存する」操作方法の流れを簡単に説明しました。Atomの操作方法がわからない!といった時に利用してくださいネ。reply.メールアドレスは公開されませんのでご安心ください(入力しなくてもコメントできます)。..)φNameEmail上に表示された文字を入力してください。きもできるおしゃれで素敵な電源カフェでした。こんなひと1970年製の元ITエンジニア。現在は別の仕事をしていますが、ホームページ作成に夢中のおじさんです。ノンプログラマー・ノンデザイナーである普通の人が、ホームページをちゃんと作ることができる実践的な方法、コツやツボをわかりやすく説明しています。週間アクセスランキング5分で学べるBracketsの使い方。使いはじめたい人の基本操作。5分で学べるBracketsの使い方。使いはじめたい人の基本操作。5分で学べるBracketsの使い方。使いはじめたい人の基本操作。管理人の運営サイトイタリア観光ぷちガイド管理人が今から約10年前にイタリア観光へ行った時の自身の体験にもとづき、イタリア各地の観光キーワードをご紹介しています。