![見出し画像](https://assets.st-note.com/production/uploads/images/99262722/rectangle_large_type_2_59b247f131fd7082b77aeffa1d5cb7ab.jpeg?width=800)
ホームページ作成入門①まずは編
HTMLと呼ばれるホームページ作成の基礎を使って簡単なホームページを作成していきます。
作り方は色々ありますが無料で準備や前提知識がなるべるく必要の無い方法を紹介します。
CodeSandbox
https://codesandbox.io/
↑にアクセスして
↓ Create Sandboxをクリック(登録不要で初められます)
![](https://assets.st-note.com/img/1677719644383-WLsh3IT2a2.png?width=800)
右下の「static」をクリック
![](https://assets.st-note.com/img/1677719695526-ofwbreFR9a.png?width=800)
以下の画面が表示されます
![](https://assets.st-note.com/img/1677719755509-VB4QdoG1ze.png?width=800)
↓こっちが編集画面
![](https://assets.st-note.com/img/1677719883119-xYsaCSfRAl.png?width=800)
↓こっちがプレビュー画面です
![](https://assets.st-note.com/img/1677719891724-K5JDdwdsPb.png?width=800)
試しにちょっと編集してみましょう
<h1>
This is a static template, there is no bundler or bundling involved!
</h1>
↑を↓に変更
<h1>
Test
</h1>
左上のメニューから「File」➔「Save」で変更を保存します
![](https://assets.st-note.com/img/1677720133246-Md733gJyeL.png)
プレビュー画面が変更されました
![](https://assets.st-note.com/img/1677720216192-t2EX8Bg3Fu.png)
ブラウザで確認
↓のURLを選択してコピー(人によってURLは異なります)
![](https://assets.st-note.com/img/1677720395369-3f0itRO42v.png)
Google Chromeの検索窓に貼り付けて開きます
![](https://assets.st-note.com/img/1677720555753-cz4hrV1ASB.png)
友達にホームページを見せるには
このURLをメールやチャットで送ればみんな見れますね
スマホで確認したい?
![](https://assets.st-note.com/img/1677720593018-YY8pCxnH13.png)
表示されたQRコードをスマホで読み込めばOK
![](https://assets.st-note.com/img/1677720744814-0p1dTagh1o.png)
まとめ
簡単だったと思いますがいかがでしたか?
一昔まえはサーバーを準備してドメインを取得してSSLを設定してHTMLを作って、サーバーにアップロードして。。。。お金がかかって。。。
となっていましたが、いい時代になりました。
応用
編集画面の気になる箇所をいじってみて、どこをいじるとどうなるかをみてみましょう
![](https://assets.st-note.com/img/1677719883119-xYsaCSfRAl.png?width=800)
この記事が気に入ったらサポートをしてみませんか?