LAST UPDATE

2021.05.09テンプレート追加
返信は随時

htmlの知識でOK

かつてhtml手打ちでサイトを作っていたレベルの知識があればなんとかなる!むしろhtmlにスタイル直書きしたり角丸テーブルを画像で表現したりしてた頃より簡潔に様々なことができます。

レスポンシブ対応

最近はみんなスマホで見てるし…とお思いの方!htmlとcssだけでPCもスマホも対応のレスポンシブでそれなりに今風なサイトが作れます!最近はアニメーションもcssでつけれるようになってます!

メモ帳だけでOK

必要なものはテキストエディタ1つだけ!PCに最初から入ってるメモ帳でもできるので、今すぐ始められます。まずはサンプルのサイトデータをダウンロードして、触ってみてください!

Illustration by Stories by Freepik
サンプル

DEMODOWNLOAD
今回作成したテンプレートです。
このテンプレートに関しては、画像や情報だけ差し替えてそのまま使っていただいてもいいですし、好きに中身を変えて使っていただいて構いません。クレジットやリンクも一切不要です。

とりあえずは、画像や文字情報を差し替えるだけでも自分のサイトになりますのでまずはそこからやってみてください!
もっとこの部分はこうしたい、とか違うレイアウトにしたい、という部分も、htmlとcssのしくみがわかれば自在にカスタマイズできるようになります。
そしていずれは、いちから自分でコーディングして自分だけのサイトを作ることができるようになると思います!
理解の手助けになるよう、htmlやcssなどの説明を次ページからしていますので、よろしければそちらに進んでください。

中に入っているファイルの一覧です。

PCとスマホの表示に関しては、ブラウザの横幅に応じて読み込むcssを切り替えることで表示を変えてます。PC/スマホ共通のスタイル(背景色や文字色など)はまとめたほうが管理しやすいかと思って1つにまとめてます。

テキストエディタひとつあればいいのですが、アクセサリのメモ帳よりはもうちょっと機能があるものがいいかなと思います。文字コードを指定して保存できるテキストエディタなら何でもOKです。
私自身色々試して比較したわけじゃないのですが、使っているのはCrescent Eveというソフトです。htmlタグやcssプロパティの入力補助機能や文法チェックの機能などがついていて便利です。

プレビューするブラウザはGoogleChromeがおすすめです。
ChromeはF12キーを押すと検証モードになって、コードのチェックをしたり、スマホ画面サイズでの動作確認ができたりします。他ブラウザにもある機能ですが、Chromeが一番使いやすいのではないかなあと思います。

とりあえずはダウンロードしたファイルをテキストエディタで開くとこから始めましょう!