普段はテキストエディター(vscode)でCSSファイルを作成するのですが、MacやWindows、iphone、ターミナルでもCSSファイルの作り方を覚えたくなりました。
CSSファイルの作り方をいろいろなパターンで覚えてみたいという好奇心からです。
「CSSファイルの作り方をいろいろなパターンで覚えたい」という私の好奇心が、CSSファイルの作り方を覚えたい方のヒントになれば「これ幸い」と思い記事にまとめました。
いざCSSファイルの作り方スタート。
MacでCSSファイルの作り方
使用しているPCがMacの場合はテキストエディットでCSSファイルを作成できます。
Macのテキストエディットはキーボードのcommand+スペースでSpotlightを開き、Spotlight検索でテキストエディットと入力すると検索結果でテキストエディット.appがヒットするので起動できます。
起動したMacのテキストエディット画面が以下の画像のようになっている場合があります。
定規みたいのが表示されている場合です。この表示だとフォーマットがリッチテキストなのでCSSファイルの作り方が失敗してしまいます。そのため最初にテキストエディット環境設定で標準テキストにフォーマット等を変更する必要があります。
CSSファイルの作り方に必要なMacのテキストエディット環境設定は以下の記事を参考にしてから次の説明に進んでください。
起動して開いたMacのテキストエディットではキーボードのcommand+Sで表示される「名前:」の右横の入力ボックスにsyle.cssと入力します。
入力したstyle.cssが、これから作成するCSSファイル名になります。
次に「場所：」のところでCSSファイルを作成する保存場所を決めます。
例えばCSSファイルの保存場所をMacのデスクトップにする場合は「デスクトップ」にします。
「標準テキストのエンコーディング：」はUnicode(UTF-8)にします。
そして「拡張子が未指定の場合は、”.txt”を使用」にチェックが入ってるなら、チェックを外しておきます。
仕上げにEnterキーを優しく押します。青い保存ボタンをクリックでもオッケーです。
Enterを優しく押した後にMacのデスクトップにstyle.cssというファイル名のCSSファイルが作成されていれば、MacでCSSファイルの作り方が成功しています。
WindowsでCSSファイルの作り方
WindowsでのCSSファイルの作り方はメモ帳を使う場合です。
まずはメモ帳を起動することからです。
キーボードの「Windows」キーを押しながら「R」キーを押します。
するとディスプレイに「ファイル名を指定して実行」という画面が表示されるので「名前」に「notepad」と入力してEnterを押すことでメモ帳が起動します。
起動したWindowsのメモ帳では、Ctrl + Sのショートカットキーを使ってWindowsエクスプローラーを開きます。
Windowsエクスプローラーが開くと、そこはもうCSSファイルの作り方を覚える世界に突入しています。説明を続けます。
Windowsエクスプローラーの画面では、左に表示しているデスクトップフォルダあたりを、これから作成するCSSファイルの保存場所にします。
次に「ファイルの種類」を「すべてのファイル」にします。すべてのファイル横には、とぼけた顔文字みたいなのが表示するのでわかりやすいかと思います。
そしてファイル名をstyle.cssと入力。
最後にEnterキーを優しく押します。
Enterを優しく押した後にWindowsのデスクトップにstyle.cssというファイル名のCSSファイルが作成されていれば、WindowsでCSSファイルの作り方が成功しています。
vscodeでCSSファイルの作り方
CSSファイルの作り方をVScodeを使用した場合です。
VScodeは略語です。正式名は「Visual Studio Code」といって、コンピュータ上でソースコードやテキストを編集するソフトウェアの事です。
また、MacのテキストエディットやWindowsのメモ帳よりも優れた機能を備えているイケてるやつです。
そんなVScodeは、ここまでCSSファイルの作り方を覚えるために使用してきたテキストエディットとメモ帳の説明を無意味にするかのように、MacでもWindowsでもCSSファイルの作り方を同じ作り方で可能にしてくれます。
VScodeはインストールして使用します。
テキストエディタVisual Studio Codeをインストールする
インストール後にVScodeを起動すると黒い画面のテキストエディターが表示します。以下の画像のように。
表示したVScodeのエディターにはタブに「ようこそ」が表示して歓迎されるので「ようこそタブを削除」。
次にキーボードでMacはcommand+Nを、WindowsはCtrl + Nを押したら「Untitled-1」のタブが作成されるので、「Untitled-1」をCSSファイルに作り直します。
CSSファイルへの作り直し方は、Macはcommand+Sを、WindowsはCtrl + Sを押します。
すると名前を付けてファイルを保存できるようになるので、ファイル名をstyle.cssで入力し、これから作成するCSSファイルを保存するフォルダを決めます。
formatは「すべてのファイル」にします。
最後にEnterキーを壊れない程度に押します。
Enterを押した後に、指定したフォルダにstyle.cssというファイル名のCSSファイルが作成されていれば、VScodeでCSSファイルの作り方が成功しています。
VScodeでCSSファイルをstyle.cssのファイル名で作成するとき「“style.css”はすでに存在しています。置き換えてもよろしいですか?」と表示された場合は、指定したフォルダ内に同名のファイルが存在していることになります。
例えば前述の説明のときにMacのテキストエディットで作ったstyle.cssが存在している場合です。
そんなときのCSSファイルの作り方は、指定するフォルダを変更する、または既存の同名ファイルが必要なければ削除する、さらにもしくは、main.cssとかにファイル名を変更するかのどれかでCSSファイルの作り方は成功します。
iphoneでCSSファイルの作り方
お次はiphoneでCSSファイルの作り方です。
iphoneとipadで使用可能なアプリ「テキストエディター LiquidLogic」を使用します。
iphoneでCSSファイルの作り方を覚えてみたい場合は以下の記事を参考に、テキストエディター LiquidLogicをiphoneにインストールしてみてください。
iPhoneでHTMLエディタの無料アプリ(LiquidLogic)を使用してみた
iphoneにインストールしたLiquidLogicを開き、エディターボタンをタップするとエディターが表示します。
表示したエディターにはタブが１つ存在していて「新規1」と表示してるので新規1のタブをタップして保存をタップします。
するとファイル名が「新規1.txt」になっているので削除してから、恒例になりましたCSSファイル名のstyle.cssを入力します。
次に作成するCSSファイルをどのフォルダに入れるかですが「ローカル」をタップで選択します。
最後にCSSファイルを保存する画面になるので、画面右上の「保存」をタップします。
保存をタップした後に、ファイラーのボタンからローカルフォルダに移動し、style.cssというファイル名のCSSファイルが作成されていれば、iphoneでCSSファイルの作り方が成功しています。
今回はCSSファイルの作り方を覚えるためにローカルフォルダを指定しましたが、たとえばDropboxを紐付けしておくとCSSファイルの保存先をDropboxにすることができるので、PCとiphone間でのCSSファイルが共有できるようなCSSファイルの作り方もできるのです。
コマンドラインでCSSファイルの作り方
コマンドラインでCSSファイルの作り方も覚えておきたです。
コマンドラインは真っ黒な画面にコードがいっぱい書いてある手を出しづらい画面のやつです。
そんな真っ黒な画面のコマンドラインは、macにはターミナルが、Windowsにはコマンドプロンプトが備わっているので、それぞれ起動してCSSファイルを作成します。
Macのターミナルを使用したCSSファイルの作り方から覚えてみます。
Macのターミナルを起動します。
キーボードのcommand+スペースでSpotlightを開き、Spotlight検索でターミナルと入力すると検索結果でターミナル.appがヒットするので起動できます。
起動したらCSSファイルを作成するフォルダに移動するための以下のコマンドをターミナルに入力します。今回はデスクトップに移動します。
cd desktop
デスクトップに移動後はMacのターミナルでCSSファイルを作ります。
ターミナルでCSSファイルの作り方は、ターミナルにtouchコマンドを使い以下のように入力します。
touch style.css
入力後にEnterキーを押します。
これによりstyle.cssというファイル名のCSSファイルがデスクトップに作成されていれば、コマンドラインでCSSファイルの作り方が成功です。
Windowsのコマンドプロンプトを使用したCSSファイルの作り方も覚えてみます。
Windowsのコマンドプロンプトを起動するところからです。
キーボードの「Windows」キーを押しながら「R」キーを押します。
するとディスプレイの左下に「ファイル名を指定して実行」という窓が表示されるので「名前」に「cmd」と入力してEnterを押すことでコマンドプロンプトがWindowsで起動します。
起動したコマンドプロンプトではCSSファイルを作成するフォルダに移動します。デスクトップに作ってみます。
cd desktop
コマンドプロンプトにcd desktopを入力することでデスクトップに移動できます。
デスクトップに移動後はコマンドプロンプトにコマンドを打ち込みCSSファイルを作ります。
コマンドプロンプトでのCSSファイルの作り方は以下のコマンドを入力します。
type nul > style.css
style.cssというファイル名のCSSファイルがデスクトップに作成されていれば、コマンドラインでCSSファイルの作り方が成功です。
まとめ
CSSファイルの作り方をいろんなパターンで覚えてみることにした今回の投稿。
さんざんPCのデスクトップ上にstyle.cssを作成しましたが、１つフォルダを作成した中にstyle.cssを入れておくと良いです。
最終的には作成したCSSファイルはHTMLファイルに外部のCSSファイルとして読み込み、CSSファイル内のCSSの記述によってHTMLファイルのコンテンツをデザインしていくことになります。
