Yuhfaの覚え書き

同じこともう一度やれって言われた時とかのためのメモ

macでwebページ作成する人向け

 

 2018/04/16

講義関係で一件。参考文献に記載の画像がwindowsなので一応。

 

macを使ってwebページを作成しようとするとwindowsのメモ帳/notepadに類するアプリケーションに悩むかも。なに使ってもいいのですが何を使ったらいいかわからない人向けにフリーソフトのサイトと、ダウンロード、使い方をざっくりと。

 

初めてmac使う人、を意識して書いているので少しくどい。

 

 

 

はじめてのWebページ作成 HTML・CSS・JavaScriptの基本 (KS情報科学専門書)

はじめてのWebページ作成 HTML・CSS・JavaScriptの基本 (KS情報科学専門書)

 

 上記の書籍のp.6からあたりのmac版と考えてください。

 

拡張子の関連付け(ファイルを開くアプリを指定する)方法はこちらに。

 

yuhfa.hatenablog.com

 

 

 

 

前述のようにmacのプリインストールにはwindowsと同じメモ帳はないので代替ソフトを。

メモ帳の代わりにテキストエディットというアプリか、webのフリーソフトを探します。

 

個人的にはモードに対応して色付けをしてくれる(以下画像参照)miが好みですがこれでなくてはならない、と言った専用のソフトはないです。テキストエディトも使える。

f:id:yuhfa:20180416143758p:plain

テキストエディットの使い方は例えば

www.edit-u.com

等で。

気をつけて欲しいのは標準テキストで保存してから拡張子を変えること。フォーマットを標準テキストにしてから

f:id:yuhfa:20180416145213p:plain

f:id:yuhfa:20180416144827p:plain

の.txtを.htmlにして保存、または.txtで保存してから名称変更すること。

リッチテキストでHTML形式の保存をするとリッチテキストに入力したものがそのまま表示されます。詳しくは試してみてください。

 

 

webから拾ってきます。いろいろなフリーソフトがありますがここでは割りと有名どころの

mi - テキストエディタ

を紹介しておきます。

タグに色分けをしてくれたりインデントを自動で挿入してくれたりと使いやすいツール。c言語などのプログラミングにも。プログラミングの話は

 

yuhfa.hatenablog.com

 こっちで。

 

 

 

 

上記リンクでダウンロードをします。

f:id:yuhfa:20180416132856p:plain

いうまでもないことですがライセンスについて、は一読を。

 

サイトに従ってダウンロードすると.dmgというファイルが落とされます。

これを開いて、

f:id:yuhfa:20180416133351p:plain

左側のアイコンを右側へ運ぶ。

これで指示に従えば無事、LaunchPadに左のアイコンが作られます。

 

 

開くとこんな感じ。

f:id:yuhfa:20180416133600p:plain

 

 

webページ作成ではhtmlのファイルを作るのでモードをHTMLに切り替えて使ってください。HTMLのモードで保存すれば拡張子は自動的に.htmlになります。

f:id:yuhfa:20180416133805p:plain

 

Finderで作ったhtmlファイルをクリックするとwebページとして開かれます。

ファイルの中身を編集するときは右クリックまたは二本指でクリックして

f:id:yuhfa:20180416134239p:plain

の、mi.appを選ぶと開けます。

htmlファイルをクリックするとテキストが開かれる、という人はここでChromeSafariを押す。

 

Chromeが入っていない人はSafariで[chrome]を入れてもいいかも?webブラウザなに使うかはほんと人それぞれなので。

 

yuhfa.hatenablog.com

 みたいなことは書いたことある。