【初心者向け】ホームページ制作学習、無料で公開までする方法【HTML、CSS、JavaScript】

この記事は約5分で読めます。
広告

HTML、CSS、JavaScriptの学習から制作、公開まで
パソコンに何もインストールなしで無料でやる方法です。
完成したWebページは無料サーバーにアプロードして公開します。
その方法もご紹介します。
完成品イチゲのポートフォリオ(アクセスカウンターは後でつけた)
ポートフォリオづくりにも役立ちます。
Html、CSSの知識はスクレーピングなどでも役立ちますので
一通りやっておくことをお勧めします。

広告

Html、CSS学習

まったくHTML、CSSの知識がない方は、こちらの記事を参考にしてください。

エディタ

特に理由がなければVSCodeなどの専用エディターをインストールする方が効率はいいです。

パソコンのストレージに余裕がないので以下の方法で作りました。
パソコンにインストールすることなくオンラインエディタjsFiddleを使用
使い方はhtmlのブロックにコードを書き右上の「RUN」をクリックすると結果が左下に表示されます。
注意 jsFiddleは再読み込みしてしまうと、記述したコードが全て消えてしまいます。
定期的にメモ帳に張り付けて保存しておきましょう。
というよりjsFiddleはインデント確認用に使いメインはメモ帳のほうがいいです。
メモ帳で保存するときは*.txtで保存しないように注意。
例えばhtmlを保存するとき
ファイル→名前を付けて保存→ファイルの種類を「すべて」→ファイル名index.html→保存
これでindex.htmlをダブルクリックすればプラウザで表示されます。
ファイルの種類をテキスト文書(*.txt)で保存してしまうとindex.html.txtになってしまうので注意です。
index.htmlをメモ帳で編集するときはダブルクリックではできません。
ダブルクリックするとプラウザが立ち上がってしまいます。
メモ帳新規作成で、そこにドロップするか
メモ帳からファイルを開くでindex.htmlを開きます。
ショートカットキーを使うと便利です。
CTRL+A(全部選択)、CTRL+C(コピー)、CTRL+V(貼り付け)、CTRL+S(上書き保存)

jsFiddleはインテンドつけて見やすくするだけに使い。
動作確認はローカル環境でやった方がいいです。
jsFiddleだとcssフォルダなどのディレクトリ構造を作るのが大変です。
目次へ

Html、CSSでWebサイトを作ってみる

学習に使わせていただいた動画はアキユキ / Web制作チャンネルさんのこちらです。
HTMLとCSSでホームページを作る方法を完全解説【Web制作初心者向け】
最初から一通りやってくれているのでわかりやすいです。

Youtubeだとコードが見にくいいので、
私が動画をもとに作った完成品イチゲのポートフォリオ(アクセスカウンターは後でつけた)を
右クリックし名前を付けて保存すれば
index.html、style.cssなどダウンロードできます。
基本的に動画と同じコードです。
ただし以下はアクセスカウンターのコードなので抜いてください。
(このまま貼ると私と共用のアクセスカウンターになってしまいます。)

<!--タグはここから--><table border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><a href="http://www.rays-counter.com/"><img src="http://www.rays-counter.com/d505_f6_023/623e95e357dd8/" alt="アクセスカウンター" border="0"></a></td></tr><tr><td align="center"><img src="http://www.rays-counter.com/images/counter_01.gif" border="0"><img src="http://www.rays-counter.com/images/counter_02.gif" border="0"><img src="http://www.rays-counter.com/images/counter_03.gif" border="0"><img src="http://www.rays-counter.com/images/counter_04.gif" border="0" ><img src="http://www.rays-counter.com/images/counter_05.gif" border="0"></td></tr></table><!--ここまで-->


動画をやってみた補足の情報を書いていきます。

SVGは「フリー素材 SVG」で検索すると出てきます。
しかし表示すると大きすぎるので削除しました。
reset.cssが違うからなのかよくわかりませんでした。

headerの画像はぱくたその画像を使いました。
ダウンロードするとき画像の左上に
「拡大・トリミングする(jpg)」というのが出るのでそれをクリックするとトリミングできます。
1200×400にトリミングしてダウンロードしました。

下のサービスの画像は領域が380pxなので
ぱくたそから横幅は倍の760
縦は黄金比4:3になるように570にトリミングしてダウンロード。
その後Windows標準搭載アプリのペイントで50%にサイズ変更し使っています。

リセットcssは
【2021年版】おすすめのリセットCSSまとめ!基本と使い方の解説ものdestyle.cssを使いました。

JavaScript

JavaScriptも追加します。
ひらくのプログラミング教室さんの【javascript実践編#4】ハンバーガーメニューを作ってみようを参考にメニューを追加しました。

無料サーバーへアップ

完成品はXFREEという無料レンタルサーバーにアップロードしました。
完成品イチゲのポートフォリオ(アクセスカウンターは後でつけた)
やり方は以下の記事を参考にしてください。
目次へ
MENTAやってます(ichige)

コメント

タイトルとURLをコピーしました