HTML、CSS、JavaScriptの学習から制作、公開まで
パソコンに何もインストールなしで無料でやる方法です。
完成したWebページは無料サーバーにアプロードして公開します。
その方法もご紹介します。
完成品イチゲのポートフォリオ（アクセスカウンターは後でつけた）
ポートフォリオづくりにも役立ちます。
Html、CSSの知識はスクレーピングなどでも役立ちますので
一通りやっておくことをお勧めします。
今回、作ったものと同じデザインでモダンJavascriptを使って作りました。↓↓
見た目がいいホームページを簡単に作って公開するなら、こちら。
Html、CSS学習
まったくHTML、CSSの知識がない方は、こちらの記事を参考にしてください。
エディタ
特に理由がなければVSCodeなどの専用エディターをインストールする方が効率はいいです。
パソコンのストレージに余裕がないので以下の方法で作りました。
パソコンにインストールすることなくオンラインエディタjsFiddleを使用
使い方はhtmlのブロックにコードを書き右上の「RUN」をクリックすると結果が左下に表示されます。
!+TabでHtmlのひな型（emｍet）が入力できます。
注意 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）
コメント