ホームページを作る際に必要なソフトはこれだけ

ホームページを作る際に必要なソフトはこれだけ

ホームページを作る際に必要なソフトはこれだけ

これだけ知っておけばOK。ホームページ制作に必要なツール

ホームページ制作に必要なツール(ソフト)をご紹介しましょう。

ほんとに最初は少なくて済みます。そこからご自分のレベルやスタイルに応じてツールを追加・変更していけば良いだけです。

ツールの基本的な使い方を知っていればWordpressでも他のCMSでも十分に応用が効きますからね。

まずはPCを1台

まずは当然ながらPC「パソコン」です。PCはMAC・Windowsどちらでも構いません。

基本中の基本となるHTMLファイルでできたホームページ(以下HTMLサイトとします)は、Wordpressなどのサーバーソフトと違って、あなたのPC上できちんと完成させる事ができます。

ですからまずはそこからスタートです。

HTMLファイルを準備する

次はホームページを構成するファイルです。
HTMLファイルとは簡単に言うと、拡張子が「.html」になっているファイルの事を指します。

拡張子を変更してファイル作成

パソコン上のファイルには拡張子と呼ばれる名前がついています。

例えば最近のWordファイルであれば「.docx」、テキストファイルであれば「.txt」などが拡張子です。これによりファイルにいろいろな種類による区別がされています。

この拡張子は通常は非表示になっているので普段目にしないかも知れませんが、実はファイル名の後ろに必ず付いており、パソコンの設定で表示・非表示ができるのです。

拡張子の表示の仕方

下記の様に拡張子が見えるようにチェックを付けると(Windows10の場合)、拡張子が表示されます。

拡張子の表示の仕方

HTMLファイルには「.html」という拡張子が付きます。そしてこのHTMLファイルはテキストファイルと属性的によく似ています。

ですのでテキストファイルの「.txt」の部分を「.html」に変えて保存してみて下さい。そのファイルのアイコンが違うもの(HTML用)になるはずです。

拡張子を.txtから.htmlへ変更

上記で拡張子を変えたHTMLファイルですが、変更前はテキストファイルでしたね。

ですのでHTMLの中身を開く場合(修正する場合)は、ファイルを右クリックして「プログラムの選択」からメモ帳などのソフトを選択して開きます。

つまり利用するツールとしては「メモ帳」などに代表されるテキストが更新できるソフトが使えれば問題ないということになりますね。

ホームページのhtmlを表示する方法

手元に既にHTMLファイルやCSSファイルがあれば、テキストファイルの拡張子を変えたりせずに元ファイルをコピーして使えばOKです。私は100%そうしています。

次に使うのがCSSファイル

cssファイルもtxtファイルと属性が似ており、テキストファイルのように更新ができます。

なので上記同様にテキストファイルの拡張子「.txt」を「.css」に変更すればcssファイルになってくれます。これだけです。→CSSとは?

拡張子を.txtから.cssへ変更

つまりHTMLファイルとCSSファイルとがあればホームページは作れるようになるのです。画像やその他のファイルも後々必要にはなりますが、それが無くても今は大丈夫です。

ホームページをインターネット上にアップするためには他にもソフトが必要になります。

テキストファイルに文字を書く事が中心

どんなに複雑なシステムを使ったサイトであってもホームページである限りこのテキストファイル部分とCSS部分は必ず扱います。

新規で一からプログラムを書き込んで構築するサイト制作時はもちろん、別の誰かが作ったホームページを修正・更新する場合も、このテキストファイルを変更する事になりますね。

Wordpressも同じです。

Wordpressは「テーマ」と呼ばるファイル構成により最初からサイトデザインが構築されています。

そのテーマの各ファイルもメモ帳の感じで内容を書き換える事になります。

あとは徐々にプログラミング言語(HTMLやphp)を覚えてく事で、誰でもサイトの制作・更新ができるようになるのですね。

あわせて読みたい関連記事

みんな同じ事をしているのです

レベル1の人でもレベル100の人でもやっている事は同じです。

後はより便利により効率よく作業を進める事を念頭にいろいろな工夫がされていってた結果、今の様にいろいろなソフトやツールが存在しているだけなのですね。

例えば同じ修正を100か所でしなければならなくなった時に、じゃあ一括でその変更ができないかと思う様になります。

そこで専用の別ツール・ソフト等を見つけてそれが利用されていく感じです。

用途に応じて使われるソフトが違うだけ

ですので時間の経過とともにその人にあったツールが利用され、結果として使われるソフトは千差万別になっていきます。

ともあれ、ベースとなるパソコン・HTMLファイル・CSSファイルの3つさえあればホームページは作れます。

まずは一度それを操作するソフトを揃えてみてはいかがでしょうか。

おすすめテキストファイル編集ソフト

ここでおすすめの無料で使えるテキスト編集ソフト(テキストエディタ)を2つご紹介します。

テキストエディタは下に紹介するソフト以外にもたくさんありますので、自分が使いやすいと思うものを選択してくださいね。

サクラエディタ

サクラエディタ

https://sakura-editor.github.io/download.html

多くのプログラム形式(C++、Java、COBOL、 HTML、CSS)等に対応したテキストエディタです。

その魅力は多彩な機能設定にあり、様々なカラー表示や、ツリー表示によるアウトライン解析、Grep機能・キーボードマクロ、Alt+範囲指定による箱型編集などの豊富な機能を備えています。

「設定」→「共通設定」→「タブバー」→「タブバーを表示する」を選択することにより、タブ形式で利用する事も可能です。複数のファイルを開いて編集するのに大変便利です。

あわせて読みたい関連記事

Brackets

Brackets

https://brackets.softonic.jp/

BracketsはJavaScript、HTML、CSSを編集するためのオープンソースのテキスエディタです。

オープンソースという利点を生かした多彩なプラットフォームでコード共有ができることから、ウェブ開発者に人気のエディタです。

変更した箇所をすぐにブラウザで確認できる「ライブプレビュー」、カーソルを画像ファイル名の文字列にのせると該当の画像がポップアップで出てくる「ホバービュー」など、初心者がスムーズに作業を進められる便利機能があります。

コードを折りたためる機能もついているため作業がしやすいでしょう。

この記事をシェアする

人気記事

HTMLカテゴリの関連記事