株式会社For f|東京|Web制作開発|コンサルティング ホームページ作成の言語はhtml/css・自作する方法 - For f

ホームページ作成の言語はhtml/css・自作する方法

「自分でホームページ制作をしたい方」はhtmlとcssの知識が必要になりますが、この記事の通りに進めていくとひとまずはWebサイトの公開まで出来ます。

 
今回はWordPressのテーマを自作していきます。
 

結論1:htmlとcssを勉強だけでは出来ない
結論2:プロと一緒にやった方が早い

 

htmlとcssは基本的には「サイトの見た目を整える言語」です。

 
Webサイトを公開するには、見た目を整えるだけではなく、サーバーやドメインといったインターネット上の土地や住所のようなものが必要になります。
 
サーバー、ドメインに付いてはこの記事内に書いておりますのでご安心して進めていきましょう。
 

今回はWeb初心者が「Webサイトを公開する方法」を具体的に書いていきます。

もしもこの記事を読んで、もっとやって見たくなった方はプログラミングコーチングも行っておりますのでお問い合わせ下さいませ。
 

 

html/cssでホームページ制作を自作する方法

 
まずはこの3つを揃えます。
 

ホームページ制作で必要なもの

1・ドメイン
2・サーバー
3・テキストエディタ(htmlとcssを書く場所)

 
ドメインとは、当サイトでいうとhttps://forf.jpの「forf.jp」の部分です。サーバーはドメインを契約する際に一緒に契約出来るので追って記述していきます。
 
テキストエディタとは、パソコン内でhtmlやcssと言った言語を書く為のものです。
 

Webサイトを公開する場合は、テキストエディタで書いたhtml/cssのファイルをサーバーにアップロードしていく形になります。

 
他にもWebサイトを公開する方法はありますが、初心者はこの3つを揃えて公開する方法が最も簡単です。実際にクライアント様の案件もこのやり方で行う事が多いです。
 
それでは早速、テキストエディタをダウンロードしましょう。
 

テキストエディタをダウンロード・html/cssでホームページ作成する

 
テキストエディタには沢山種類がありますが、For fで最も使用しているVS CODEで進めていきます。
 
VS CODEは無料で使う事が出来ますので、ご安心ください。
 
VS CODEをダウンロード
 
こちらの画面が出てきたら「今すぐダウンロード」をクリックします。
 

次は、こちらが出てくるので、ご自分のパソコンに合ったものを選択します。

これでひとまず、ダウンロードは完了です。多少時間がかかるかもしれないので次はドメインとサーバーの契約に進みます。

 

ドメインの契約・html/cssでホームページ制作する

 
今回はFor fでも沢山のクライアント様や、内部での開発にも使用しているお名前.comを使用します。
 

入るとこのような画面になっておりますので「1・好きなドメインを入力」し「2・検索」クリックします。

 

ここでいう、好きなドメインとはサービス名や自分の名前など今後使っていきたいサイト名になります。

 
次は、.comや.jpを選択します。世界的に展開するのであれば.comなどの.jp以外のドメインがおすすめです。
 

上記でドメインを決めるとレンタルサーバーの契約画面に流れるので、このまま契約してしまいましょう。
 

 
最後は確認画面です。こちらをクリックすると、申し込み内容の確認に進みます。

*現在アカウントを持っていない方は「初めてご利用の方へ」を選択してください。

 

ここまでくるとドメインとサーバーの契約、テキストエディタのインストールが完了致しました。

 
この後、WordPressでの制作に入っていきます。WordPressとは、Webサイトを制作する為に使用するものです。
 
お名前.comでサーバーを契約すると「Webサイトを制作するWordPress」も追加料金無しでインストールする事が出来ます。
 

WordPressのインストール方法

 
まずはお名前.comにメールで届いているIDを使用してログインします。
 
そうすると、契約したドメインがあるのでその横にあるレンタルサーバーにします。

*サーバーを購入出来ているとログインボタンが表示されています。

 

次はワードプレスのロゴがあるのでクリックします。

そしたらワードプレスを追加のボタンを押し、必要情報の入力を行います。
 
補足ですが、SSL設定もワードプレスへのログインボタンの横にあるので行っておきましょう。
 
SSLとは、簡単にいうと通信のセキュリティのことです。これを行う事によって「http://forf.jp」から「https://forf.jp」のようになります。
 

ここまで完了するとワードプレスへのログインが可能になるので、ログインしてみましょう。
 
ログインしたら、テーマというボタンがあるのでそちらをクリックするとワードプレスのテーマ(テンプレート)を検索する事が出来るようになります。
 

 

WordPressでhtmlとcssを使用し、Webサイトを制作する場合はこのテーマというのを制作していく事になります。

 
次は先ほどダウンロードしたVS CODEを使用してファイルを作成し、Webサイトを公開していきましょう。
 

VS CODEにhtml/cssを記述する方法

 
まずVS CODEを開いてみてください。そうするとこのような画面になっています。

次はファイルを作成していきます。
 

WordPressでWebサイト公開する際には「index.php」と「style.css」というファイルが必ず必要です。

 
今は理解する必要は今はありません。これから記述する手順に沿って進めていくと、Webサイトを公開する事が出来ます。
 

必要なファイルを作る

1・新規フォルダを作成
2・ファイルを2つ作成

 
まずは「新規フォルダ」を作成し、2つのファイルを作成してみましょう。
 

新規フォルダを作成する

フォルダをデスクトップに作る方法は、画像の通りに行っていくと可能です。

新規フォルダが作成出来たら「1・VS CODEを開き」「2・フォルダをドラックアンドドロップ」します。完了すると、以下の画像のようにフォルダが入ります。

このようにデスクトップでの開発を行っていきます。
 

ファイルを2つ作成する

フォルダが入ったら、次はファイルを2つ作成しましょう。ファイル2つとはindex.phpファイルと、style.cssファイルです。
 

ファイルの作成方法は「新規ファイルを作成」で出来ます。ここから同じように2つの名前のファイルを作成します。

ファイルを2つ作成したら、再度お名前.comに入りサーバーにファイルをアップロードしていきます。
 

ファイルをアップロードする

ファイル画面に来たら、index.htmlとstyle.cssが入っているフォルダをそのままアップロードします。
 
その前にお名前.comにログインしていない方はログインします。
 
ログインしたらサーバーに入ります。

サーバーに入ったら「1・ファイル管理」「2・ファイル管理」をクリックします。

次にファイルマネージャーをクリックします。

アップロードの方法はパソコンからサーバーにドラックアンドドロップするだけですが、ここから少し複雑になります。冷静に対処していきます。
 

「1・public.htmlを探し」「2・契約したドメインを選択」「3・themesを選択」します。

そうすると、2つ以上はテーマが入っていると思います。
 
ここに「作成したフォルダをドラックアンドドロップ」します。

ここまできたら次は作成したWordPressのテーマを見てみましょう。
 

作成したテーマの確認

テーマの確認はそのままお名前.comからWordPressにログインします。
 
ログインしたら「1・外観」「2・テーマ」の順でアップロードしたテーマを見る事が出来ます。

私の場合は、内部を少し変えているので違う構造で見えますが、基本的にはここに作成したテーマが入ります。
 
ここからデザインを整えたり、追加で必要なファイルを入れていくと自分だけのサイトが完成します。
 

追加で必要なファイルは多数ありますがまずはここまで出来れば必要なファイルを個別でアップロードしていくとより良いWebサイトになります。

 
もし直接プログラミングの相談や、コーチングに興味を持って下さった方はご連絡下さいませ。
 
For fではIT顧問、プログラミングなどを行っております。
 

 

メール問い合わせ
メディアトップ