ホームページを自分で作れるようになるwikiです。誰でも編集が可能です。HTMLやCSSの説明があります。
はじめに
ホームページを作るときにWORDPRESSで作る方法とHTML、CSSのプログラムで作る方法があります。
WORDPRESSの方が簡単に作れますが、少し柔軟性がないです。ただプラグインという拡張機能を使うことで高度なことが簡単にできます。
このwikiではHTML、CSSで作る方を説明します。
ホームページの仕事はなりたい人が多く、なるのが難しいようです。このwikiは自分のWEBサイトを作るのが目的です。プログラミング学校に行ってもあまり身ににつかないことが多いです。
わからないときはcopilotに聞けばある程度なんとかなります。
VSコードをダウンロードしよう
VSコードをダウンロードする。
VSCODEで検索→↓windowをクリック→次へを3回クリック→項目すべて選択して次へ→インストール→完了
VSコードの右が崩れた田の字をクリック→Japanese languageを検索→インストール→右下に出るPOPをクリック→日本語になる。
Code Spell Checkerを検索→インストール
Live server を検索→インストール→後でファイル名を○○.htmlにしてプログラムを書き右下のgo liveを押せばプログラム内容をページとして見れます。
HTMLを使おう
HTMLを仮に日本語で書くとこのようになります
枠組み
| ★設定 |
| 設定のHTMLを書く |
| ★CSS |
| CSSを書く |
| ★内容 |
| 内容のHTMLを書く |
| ★JS |
| JSを書く |
| ★最後 |
設定のHTML
| ページタイトル「」 | 検索で出るタイトルを書く |
| ページ概要分「」 | 検索で出る概要文を書く |
| アイコン「」 | 上のバーにでるアイコンを書く |
内容のHTML
| 見出し「」 | 見出しのタイトルを書く |
| テキスト「」 | 通常のテキストを書く |
| 画像「」 | 画像を書く (改行なし) |
| リンク「」 | 押すと別のページに飛ぶリンク (改行なし) |
最後に検索ロボットに構成を伝えるタグをつけよう
| <ヘッダー>□□□</ヘッダー> | ヘッダー部分の前後をタグで囲む |
| <メイン>□□□</メイン> | メイン部分の前後をタグで囲む |
| <フッター>□□□</フッター> | フッター部分の前後をタグで囲む |
| <ナビ>□□□</ナビ> | メニュー部分の前後をタグで囲む |
| <アサイド>□□□</アサイド> | サイドメニュー部分の前後をタグで囲む |
| <セクション>□□□</セクション> | まとまり部分の前後をタグで囲む |
| <アーティクル>□□□</アーティクル> | まとまり部分の前後をタグで囲む |
| <ウリ> <リ>〇〇</リ> <リ>〇〇</リ> <リ>〇〇</リ> </ウリ> | この部分はリスト |
CSSを使おう
HTMLだけでは入れたテキストや画像がそのまま縦に並ぶだけです。
CSSで色やサイズ、位置を調節できます。
HTMLのCSSの内容を書くのところに書きます。
文字
| 文字色「」 | 文字の色が変わる |
| 文字サイズ「」 | 文字のサイズが変わる |
| 文字よせ「」 | 文字が枠に対して左か中央か右に寄せることができる |
| 行間「」」 | 文字を含めた１行分の高さ |
| 文字影「」 | 文字の後ろに影を出す |
背景
| 背景色「」 | テキストの背景に色がつく |
| 背景画像「」 | 上にテキストが書ける画像 |
枠
| 枠線「」 | テキストに枠線がつく |
| 横「」 | 枠の横のサイズを決める |
| 縦「」 | 枠の縦のサイズを決める |
余白
| 外余白「」 | 枠線の外の余白を決める。外の余白同士がは重なったとき大きい方が採用される。 |
| 中余白「」 | 枠線の中の余白を決める |
JavaScriptを使おう
できることの例
| クリック時 | ｐのCSSを変更する |
| クリック時 | ｐのテキストを変更する |
| クリック時 | imgの画像ファイルを変える |
| クリック時 | ｐにクラスＡをつける |
| クリック時 | ｐのクラスＡを外す |
| クリック時 | ｐのクラスＡがついているのなら外し、ついていないならクラスＡをつける |
| クリック時 | divの上にテキストを追加する |
| クリック時 | divの下にテキストを追加する |
| クリック時 | divの中の一番上にテキストを追加する |
| クリック時 | divの中の一番下にテキストを追加する |
| クリック時 | ランダムで1～６を表示 |
| クリック時 | ランダムで1～3を表示し、１なら大吉、２なら中吉、３なら小吉を表示 |
PHPを使おう
XAMPPをインストールする。
XAMPPを起動し、Apacheをstartにし、MySQLをstartにする。PHPは本来サーバーでしか動かないが、XAMPPを使うことで自分のパソコンを仮想的にサーバーのようにし動かすことができる。
VSコードの拡張機能でOPEN PHP/HTML/JS in Browserをインストールする。左下のOpen in Browserを押すことでPHPのプログラムを実際に見て確認できるようになる。
ファイル名は.PHPにする。PHPファイルでもHTMLファイルと同じようにHTML、CSS、JSが使える。PHPで書く部分は<?php ○○○○○○?>と囲む。
フォームの内容をメールで送る。
フォーム(HTML)
| フォーム「〇〇.php」 | 送信ボタンを押したときに○○.phpのプログラムに飛んでメールが送られる |
| 入力欄「お名前」 | 自由にテキスト入れる入力欄 |
| メール欄「メールアドレス」 | 自由にメールアドレスを入れる入力欄 |
| 自由記入欄「メッセージ」 | 自由に長文を入れる入力欄 |
| 送信ボタン「送信」 | 送信ボタン |
PHP
| 送信者「【メールの入力欄の内容】」 |
| 送信先「○○@gmail.com」 |
| タイトル「お問い合わせ」 |
| 本文「【お名前の入力欄の内容】【メールの入力欄の内容】【メッセージの入力欄の内容】」 |
ロリポップなどのレンタルサーバーを借りよう
ロリポップは月５００円でレンタルサーバーが借りられます。１０日間は無料でお試しできる。
FileZillaをインストールしよう。
FileZillaでロリポップにファイルをアップロードしよう。
