preタグの使い方
複数行にわたってソースコードを書く場合、<code>をさらに<pre>で囲む必要があります。
preタグとは
<pre>とは、整形済みテキストを表すためのタグでして、空白や改行などのスペースをそのまま表示してくれます。
<code>で囲っただけのソースコードは、ブラウザ表示の際に空白が詰められた状態で表示されてしまうので、必ず<pre>で囲みましょう。
エスケープ処理が必要な文字・記号
エスケープ処理が必要な文字と記号は下記の通り。
「<」→「<」
「>」→「>」
「&」→「&」
「”」→「"」
とはいえ、ソースコードを書くたびに、いちいち自分でエスケープ処理するのは面倒なので、エスケープツールを使用して時短しましょう。
下記のサイトは無料で使えて、<code> <pre>で囲む・囲まないもチェックボックスひとつで設定できるのでおすすめです。
Webページの作成
HTMLとは
HTML（エイチティーエムエル）は、HyperText Markup Languageハイパーテキスト・マークアップ・ランゲージ）の略で、ウェブページを作成するための標準マークアップ言語です。
略して「HTML」といいます。
HTMLの書き方
HTMLを記述していくには以下の環境が必要です。
・パソコン（PC）+マウス
・テキストエディタ（メモ帳でも可）
・Webブラウザ「インターネットを利用するために使うもの」
これだけあれば、今すぐにでもHTMLを記述して、仕上がりを確かめることができます。
ただ、HTML、CSS、Javascriptを記述してブラウザで確認するには「ディレクトリ」を用意する必要があります。
今回作成する「ディレクトリ」の構成は以下のとおりです。
一般的なHTMLページの基本骨格の例を紹介します。
HTMLの骨格
「フォルダ」と「index.html」を作成する
「HTMLがどのようなものなの」かHTMLの基本的な書き方を学ぶ前に実戦してみましょう。
Web ページを保存するフォルダを任意の場所に作成します。
1．今回は、「ドキュメント」に「web」（名前は任意）という名前の「フォルダ」を作成します。
次に「Webフォルダ」の中に必要なデータ（index.html、csフォルダ、jsフォルダ、imgフォルダ）を作成します，
2.いま作成した「web」という名前のフォルダを開きます．何もない部分を右クリックして「新規作成」→「テキスト ドキュメント」を選びます。
「新規 テキスト ドキュメント.txt」というファイルが作成されます。
3.このファイル名を「index.html」に変更します。
4.拡張子を「新規 テキスト ドキュメント.txt）」から「index.html）」に変更するので次のような警告が表示されますが，構わず はい を選びます。
5.拡張子も変更したのでファイルのアイコンが変化しました。
テキストエディタ（メモ帳）で編集する
1.作成した「index.html」を任意のテキストエディタで開きます。まずは Windows に標準搭載されている「メモ帳」アプリで編集することにします。
2.「メモ帳」を起動し，エクスプローラから「index.html」をマウスでドラッグ＆ドロップして開きます。
3.上記のタブに「index.html」と表示された「メモ帳」に、下記の「index.html」のサンプルコードを「コピー」してメモ帳に「貼り付け」します。
4.「ファイル」をクリックして「保存」します。
index.htmlのサンプルコード
「webフォルダ」に保存する「index.html」コード
CSSとは
上の章でHTMLとは何かを学びました。
では、次にCSSとは何かを学んでいきましょう。
CSSの正式名称はCascading Style Sheets（カスケーディングスタイルシート）と言います。
ページのレイアウトを形成するためのスタイルシートです。
index.htmlのみで表示すると
上の章では、HTMLのみ記述してページを表示させましたが、
でも、CSSを加えてあげることで、綺麗なレイアウトへと変化していきます。
例えば、文字の色や背景色、配置などを自由に変更させることができます。
ただ、「HTMLのタグで囲った範囲に対してCSSを適用させていく」必要があるので、HTMLとCSSは、後程説明するjavascriptを含め常にセットです。
HTMLでマークアップして、CSSでレイアウトを整える。これがWebページを作成していく際の基本的な流れになります。
CSSの書き方
CSSの書き方には、色々な方法があります。
・外部ファイルを読み込む
・head内に記述する
・インラインで記述する
上で挙げた方法であればどれを選んでもいいのですが、「外部ファイルを読み込む」ことが一般的な記述方法になります。
ここからは、「外部ファイルに記述する方式」でCSSを記述してみたいと思います。
ただ、その前に先ほど作成したindex.htmlの「linkタグのhref属性」に下記に記述します。
何をしているかというと、HTMLファイルからCSSファイルを読み込む際の記述です。
この記述を加えることで、CSSファイルでのスタイル適用が実現されます。
cssデータを「css」フォルダに保存してみよう
「cssがどのようなものなの」かcssの基本的な書き方を学ぶ前に実戦してみましょう。
1.cssのフォルダを作る。
マウス右クリック➡「新規作成」➡「フォルダ」を選択。
名前を「css」に変更します。
2.メモ帳を開く
新しく作った「css」フォルダを開きます。
マウス右クリック➡「新規作成」➡「テキストドキュメント」を選択します。
3.「style.css」をコピーしてメモ帳に貼り付けする
4.メモ帳をファイル名「style.css」として「css」フォルダに保存します
なお、「style.css」以外の「grid.css」、「ress.min.css」についても「css」フォルダに保存します。
cssフォルダ(「style.css」、「grid.css」、「ress.min.css」の3種類)データを追加すると下記の画面表示となります。だいぶ整いました。
※JavaScript（js）、まだ画像（img）なしです。
cssフォルダに保存するcssのサンプコード
①「style.css」、②「grid.css」、③「ress.min.css」の3種類
「cssフォルダ」に保存する「style.css」コード
「cssフォルダ」に保存する「grid.css」コード
「cssフォルダ」に保存する「ress.min.css」コード
JavaScriptとは
では、最後にJavaScriptについて簡単に説明していきます。
JavaScriptの主な使われ方は、Webページに動きをつけることです。
それ以外にも様々な活用方法があり、いろいろな場面で活躍しています。
・WEBページの動作
・WEBアプリ開発
・スマホアプリ開発
・ゲーム開発
ざっくり言うとこのような用途で使われています。
ちなみに、JavaScriptとJavaを混同されがちですが、この２つの言語は全然違いますので要注意！
名前は似ていますが、全くの別物です！
JavaScriptで出来ることは幅広く、JavaScriptをマスターすれば幅広い分野で活躍することができます。
JavaScriptの書き方
では、最後にJavaScriptについて簡単に説明していきます。
・HTML上で動かす
・外部ファイルとして読み込む
この２パターンです。
先ほど作成した「index.html」に直接記述をすることも出来るし、外部ファイル「script.js（今回はこの名称ですがファイル名は任意）」に記述してもHTMLファイルから読み込むことができます。
「script.js」読み込み部分の真上に「jQuery」を読み込むための記述をします。
この記述が無いと、jQueyを記述したところで意味がないので注意してください。
また、jQueryの読み込み記述は「script.js」よりも先に読み込ませないといけません。
jsデータを「jsフォルダ」に保存してみよう
「jsがどのようなものなの」かjsの基本的な書き方を学ぶ前に実戦してみましょう。
1.jsのフォルダを作る
マウス右クリック➡「新規作成」➡「フォルダ」を選択
名前を「js」に変更して保存します。
2.メモ帳を開く
新しく作った「js」フォルダを開きます。
マウス右クリック➡「新規作成」➡「テキストドキュメント」を選択する
3.style.jsをコピーしてメモ帳に貼り付けする
4.メモ帳をファイル名「style.js」として「js」フォルダに保存します
jsフォルダに保存するjsのサンプコード
①「style.js」の1種類のみ
「jsフォルダ」に保存する「style.js」コード
今回使用した画像
1.画像を収納するフォルダを作る
マウス右クリック➡「新規作成」➡「フォルダ」を選択
名前を「img」に変更して保存します。
「imgフォルダ」の中に下記の画像を一点ごとに保存します。
2.保存の仕方
保存する画像の上で右クリック➡「名前を画像を保存」をクリック➡「webフォルダ」を選択➡「imgフォルダ」を選択➡今回は名前変更しで➡ 保存 をクリックします。
これで全ての作業終了です!
※保存しないと画像が表示しません。
最終的にこのような画面になります。
ホームページ完成
「css」フォルダ、「js」フォルダ及び「img」フォルダにデータを入れると、このようなホームページになります。
☆ダウンロード：My pageの「フォルダ」
ダウンロードしたフォルダは「圧縮」されています。
「解凍」する方法は、下記をご参照してください。
解凍したデータは、コピーしてドキュメント等「新しいファイル（名前は任意）」に貼り付けて完成です。
圧縮フォルダの展開（解凍）方法
①圧縮フォルダの右クリックメニューから「すべて展開」を選びます。
②下の画面でフォルダをどこに展開するか指定できます。この場所で良ければ画面下の「展開」をクリックします。
③展開すると圧縮する前の「web」フォルダが復元され、フォルダの中身が表示されます。
これで無事にフォルダの展開は終了しました。
しかし、よく見ると「chisa」フォルダの中に、さらに「chisa」フォルダが入っている状態になっています。
こういうときは先ほどの展開場所を指定する画面で元フォルダの末尾の名前「chisa」を削除してやるとフォルダが入れ子状態にならずに済みます。
これで「web」フォルダの中に「chisa」フォルダが入りました。
展開の方法は、上記以外色々あります。
圧縮するフォルダをダブルクリックで開いて、中にあるフォルダをズルズルッとドラッグ（コピー）して展開する方法です。
使い勝手の良い方法で「展開」してください。
…ここまで…
ホームページを変更するには
下記に、ホームページの変更・修正手順を説明します。
まず変更する前に・・・
自分のパソコンのデータが最新（サーバーのデータと同じ）である場合は、「ダウンロード」する必要がありませんが、サーバのデータの方が最新の場合は、ダウンロード（逆転送）する必要があります。
※2024/9/21現在、サーバーのデータが最新ですので必ず「ダウンロード」して変更作業を行ってください。
下記に「ダウンロード（逆転送）」方法を説明します。
1、FFFTPを開き「ダウンロード（逆転送）」します。
2、右側のファイルを選択、左上の「」をクリックします。
3、これで完了です。（必ずパソコンとサーバーのデータが同一であること）
4、メモ帳を開いて、ホームページを変更する。
「メモ帳」を開く➡「メモ帳」の左上の「ファイル」をクリック➡「開く」をクリックすると「画面」が表示されます➡変更するデータが収納されているファイルを選択します。今回は「ドキュメント」をクリック➡「webファイル」を選択➡画面下の 開く をクリックします。
下記の画面が表示されます。
「indwx.htmlファイル」表示されていな場合は➡画面下の「すべてのファイル(*.*)｜クリック➡「すべてのファイル(*.*)」を選択、左クリックします。
「index.html」ファイルが表示されました。
「index.html」ファイルをクリックして選択します。
画面下の 開く をクリックすると、「index.html」のデータがメモ帳に表示されます。
この「メモ帳」を使って変更します。今回は、時間割の科目等を変更する。
変更が終わったら、この「メモ帳」左上の「ファイル」をクリックして「保存」を左クリックして、そのまま「保存」もしくは「名前を付けて保存」をクリックして保存します。
変更内容の確認は
下記に、ホームページの変更・修正手順を説明します。
先に表示した下記の画面の「index.html」を選択してダブルクリックします。
または、「index.html」の上でマウスカーソル右クリック ➡ 開く をクリックします。
変更後の、「ホームページ」が表示されます。
※作成したホームページは、パソコンでオフラインで見ることができます。
スマホ等で出先で見るためには「サーバーに転送」する必要があります。
ご連絡ください。
☆FFFTP のダウンロード
FFFTPの使い方
FFTPを起動する。
FFFTPを起動すると、以下の画面を立ち上げます。
上記画面の左下の 接続 をクリックする。下記の画面に変わります。
では、転送してみましょう
☆アップロード「PCデータ（左） サーバーデータ（右）」の仕方
転送するファイルを「選択」して、「」をクリックします。
次の画面が表示されますので、 OK をクリックします。
（ダウンロードも同じ）
☆ダウンロード「PCデータ（左） サーバーデータ（右）」の仕方
転送するファイル「選択」して、「」をクリックします。
終了の仕方
1、「切断」をクリックします。
2、「」をクリックすると、画面が閉じます。
Googleカレンダーを埋め込む
「My homepage」に「googleカレンダー」を埋め込む場合は、自身のパソコンから操作する必要があります。
さらに、レスポンシブデザインにも対応しているため、スマートフォンやタブレット端末でも見やすく表示されます。
Googleカレンダーをwebサイトに埋め込む方法について、「株式会社アーティス」さんで分かりやすい記載がありましたので紹介します。
この部分を差し替える
以上。