WebDesign/Basics をテンプレートにして作成

開始行:
*Webサイト制作の基本 ~ ***MENU #contents2_1 ~ **はじめに ***情報公開の様々なかたち Web上にサイト形式で情報を公開するには様々な方法があります... -アカウントを取るだけで情報発信できるサービス（以下ほんの... --[[GoogleSites]]　← 別ページに記事を書いています。 --[[WordPress]]　← 別ページに記事を書いています。 --Instagram　https://www.instagram.com/ --Facebookサイト　https://www.facebook.com/ --Tumblr　https://www.tumblr.com/ -ノーコードツール（Webサイトビルダー） --CANVA　https://www.canva.com/ja_jp/ --STUDIO（スタジオ） https://studio.design/ja/ -- Wix（ウィックス）　https://ja.wix.com/　 --Jimdo(ジンドゥー）　https://jp.jimdo.com/ ~ ***制作に関わる様々なツール オリジナルのWebサイトは HTML, CSS, JavaScript といった言... -''素材の制作に関わるツール'' --画像処理：AdobePhotoshop, GIMP 等 --図表制作：AdobeIllustrator, InkScape 等 --映像制作：AdobePremiere, AdobeAfterEffect, FinalCut 等 --音づくり：Audacity, GarageBand, CakeWalk 等 -''モックアップツール（プロトタイピングツール）'' Webサイトのユーザーインターフェイス (UI) 制作に特化したデ... --''Figma'' https://www.figma.com/ --''Adobe XD'' https://www.adobe.com/jp/products/xd.html --Cacoo https://cacoo.com/ja/ --Drama https://www.drama.app/ --InVision Studio https://www.invisionapp.com/studio --Sketch https://www.sketch.com/ -''Webオーサリングツール（統合開発環境）'' HTML+CSS+JavaScriptによるコーディング作業を支援するツール... --''[[VisualStudioCode]]''　テキストエディタというより統... https://code.visualstudio.com/ --''Eclipse''　オープンソースであらゆる言語に対応します https://www.eclipse.org/ --Adobe Dreamweaver https://www.adobe.com/jp/products/dreamweaver.html --ホームページビルダー https://www.justsystems.com/jp/products/hpb/ --BiND for WebLiFE https://bindup.jp/ --Google WebDesigner https://webdesigner.withgoogle.com/ --BlueGriffon http://bluegriffon.org/ -''テキストエディタ'' HTML+CSS+JavaScriptのコーディングを行う、最もシンプルかつ... --[[TextEditor]] ← こちらで紹介しています。 ~ ~ **サイト制作に関わる基本概念 ***WebページとWebサイト Webページとは、HTML（Hyper Text Markup Language）という言... ~ #image(folder.jpg,right,35%) 一方、Webサイトというのは、一般に複数のWebページがセット... #clear #image(GitHub/RepositoryImage03.png,right,35%) [[Webサーバー>RentalServer]] や [[GitHub]] にアップする場... #clear Webサイトを制作する場合は、まずはじめにWebサイト用のフォ... ~ ***フォルダ名やファイル名について Illustrator や Photoshop での作業とは異なり、Webのデータ... -フォルダ名やファイル名に使える文字は、原則として半角英数... -フォルダ名やファイル名は、原則小文字として、単語区切りに... ~ ***情報量を表す単位記号について 情報量を表す単位記号は1000倍（０が３つ）単位で大きくなり... ''n''(ナノ), ''μ''(マイクロ), ''m''(ミリ)　←→　''K''(キロ... ITの分野では 2^10=1024 を基準にしますが、ここではふつうに... ~ ***文字について Webサイトの制作にあたっては、文字コードについての知識と、... -Webの技術も含め、コンピュータの中では、文字は 0110・・の... -Webサイトの文字は、基本的には閲覧する側のフォント環境に... 　ただし近年、例えば モリサワの TypeSquare などでは、Web... ~ ***色について Webサイトの文字や背景の色には、RGB値を16進数で表す16進ト... -16進トリプレット 先頭に # を書いて、赤・緑・青の順に、各２桁の計６桁を書く... 各成分は 00〜FF（0～255） の光度（intensity）で表現され、... -X11 Colors HTML と CSS に準拠したウェブブラウザで一般化している色名... 配色等については右のページをご覧下さい。＞ [[WebDesign/Co... ~ ***サイズの単位について Webサイト上の大きさを指定するには、画面サイズに対して最も... -px：画素数で指定。画面のサイズ（例えば、1920x1080）に対... -%：親要素の幅に対する子要素の幅を比率で指定するもの -em：文字の高さを基準にした単位。1emは1文字分で、環境によ... 　この単位は、親要素に対する比率になるので、同じ1.5emでも... -rem：root+em の略で、ルート要素のフォントサイズを継承し... ~ ***画像について 画像を掲載については、サイズと圧縮形式についての基礎知識... -スマホ、デジタルカメラの写真は、そのままでは画素数が多す... 。Twitter、LINE、Instagram 等のSNSでは、ユーザがアップし... 詳細については右のページをご覧下さい。＞ [[WebDesign/Imag... -Webサイトに表示される画像の形式は以下の３種類です。特定... --JPEG画像( .jpg )：写真などの圧縮に最適です（不可逆圧縮） --GIF画像( .gif )：256色以下、ベタの多いイラスト等に最適... --PNG画像( .png )：ロゴマーク等、背景を透明化するのに最適... ~ ***その他のメディアについて Webページには、画像のみならず、音声や動画を掲載することも... -音声 サイトが開くと同時に音が出る・・というのは、閲覧者にとっ... -動画 ファイルのサイズが大きく負荷がかかるため、自前のサーバー... 　限定公開（アドレスを知っている人にのみ閲覧させる）の方... ~ ***付記：過去にサイト制作の経験のある方へ Webの常識は日々変化しています。 以下、ご確認下さい。 -＜FRAME＞タグは使いません。 ナビとコンテンツをフレームで分ける方法がかつては用いられ... -＜TABLE＞タグを使ったレイアウトは行いません。 レイアウトはCSS側で、flex, float, position、といったプロ... ~ ~ **試作体験 Webサイトというものがコンピュータ上に、どのような形で存在... ~ ***PCの環境設定 開発系の作業では''ファイルの拡張子''を理解して扱うことが... -Windowsの場合 -- スタートメニュー＞すべてのプログラム＞アクセサリ＞エク... --[ALT] キーを押して、ツール＞フォルダオプションと開く --表示タブを選択、[登録されている拡張子は選択しない] のチ... -Macの場合 --Finderメニュー＞環境設定 --Finder環境設定ダイアログの詳細タブで --[すべてのファイル名拡張子を表示] にチェック。 ~ ***必要なツール（ソフトウエア）の準備 Webサイトの制作には大きく３つのソフトウエア、すなわち 作るソフト、見るソフト、転送するソフトが必要です。 -作るソフト（HTML, CSSの記述）　[[テキストエディタ>TextEd... -見るソフト（チェック）　[[ブラウザ>Browser]]（Chrome, Fi... -転送ソフト（アップロード）　[[FTPツール>FTP]]（FileZilla... 基本的にすべてフリーソフトウエアで事足ります。それぞれ準... Dreamweaver、ホームページビルダーなどのオーサリングソフト... ~ ***Webサイト開発用のフォルダを準備する -Webサイトの親フォルダを作る デスクトップ上で、右クリック > 新規フォルダ > WebSite -画像格納用のフォルダを準備する 上で作成した WebSite フォルダの中で、右クリック > 新規フ... #image(folder.jpg,right,30%) -フォルダ構成は右図のようになります。 -最終的には、''このフォルダ'' ＝ ''Webサイトの全体像'' で... ~ ***トップページを作成・保存する -[[テキストエディタ>TextEditor]]を立ち上げます。 -以下のソースコードを、エディタにコピー＆ペースト。 -それを WebSite フォルダに''index.html''という名前で保存... <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Sample Page</title> </head> <body> <h1>見出し</h1> <p> 　　 本文｜適当に文章を書いて下さい。 </p> </body> </html> ''トップページ ＝ index.html'' というのが、Webの「お約束... ~ ***動作確認 ページをブラウザで表示。またHTMLを書き換えて動作を確認し... -ブラウザを起動して下さい。 -index.html をブラウザの画面にドラッグ＆ドロップしてみて... -「見出し」と「本文｜・・」が表示されればOKです。 -HTMLの内容を書き換えて変化を確認して下さい。手順は以下の... --HTMLを書き換えて保存する --ブラウザの「再読み込み」を行う -ページタイトル ＜title> ～ </title> で挟まれた部分がページタイトルです。 -見出し ＜h1> ～ </h1> で挟まれた部分が見出しです。 -本文の文章 ＜p> ～ </p> で挟まれた部分が文章段落です。 ~ ***別のページをつくってリンクする Webサイトは、トップページ、アバウト（このサイトについて）... -index.html を [option]+ドラッグ してファイルを複製します。 -ファイルの名称を、例えば about.html と書き換えます。 -それをテキストエディタで開き、見出しや、本文の文章を書き... -それをブラウザで開いてみて、変更が反映されていればOKです。 -今作ったページと、先に作っていた index.html とをリンクで... -index.html 側 <a href="about.html">aboutページへ</a> という一行を <body> ～ </body>の間に追加（場所はどこでも可) -about.html 側 <a href="index.html">トップへ戻る</a> という一行を <body> ～ </body>の間に追加（場所はどこでも可) -index.html をブラウザで再読み込みします。 -青い文字で「aboutページへ」という部分が見えると思います。 -そこをクリックすると、about.html が表示され、そこで「ト... ~ ***ページに画像を掲載する 画像をページに掲載するには、以下のようにします。　[[詳細... -配置したい画像を用意します（ファイル名は半角英数 sample.... -画像ファイルを先に作った images フォルダの中に移動します。 -index.html に以下の一行を <body> ～ </body>の間に追加 <img src="images/sample.jpg"> images/sample.jpg という記述は、images フォルダの中にある... -index.html を保存したら、ブラウザで動作確認して下さい。 うまくいったら、もうひとつのページにも別の画像を掲載して... ''補足「リンク配置」について'' HTML 自体は単なるテキストファイルで、画像そのものを含むこ... とりあえずここまでで、Webサイトを構成するファイルがこのよ... ~ ***サイトの開発とバックアップについて #image(SiteBackup.png,right,30%) Webサイトなどのソースコードは、開発の過程で必要の都度バッ... ~ ~ **よくある質問 -実習室のテキストエディタで保存したファイルは他のソフトで... →　もちろんです。 　　テキストエディタで作成、保存されるのは、テキストファ... 　　最もシンプルかつ標準的な文字列データです。 　　他のエディタはもちろん、ブラウザでもワープロでも読め... 　　 -HTMLを書き直して保存したが、ブラウザ上の表示が変わらない。 →　ブラウザの更新ボタンを押して下さい。再読み込みが必要で... →　あなたが編集したファイルと、チェックしているファイルは... 　　初心者の方によくある例ですが、ファイルをコピー、移動... 　　自分が編集しているファイルがどれか？混乱しているケー... →　ファイル名の大文字／小文字の区別は問題ありませんか。 　　ローカルのPC上では大文字／小文字の区別がない場合があ... 　　大文字小文字が間違っていてもリンクがつながる場合があ... 　　サーバー上では区別されますので、つながりません。 -画像が表示されない →　リンク切れになっていませんか。配置したあと不要と思って... 　　配置したあとで場所を移動した。配置したあとでファイル... 　　これらはすべてリンク切れの原因となります。 →　画像ファイルは汎用のものですか？ ファイル形式はJPEG、G... 　　などでなければなりません。Photoshop で作ったPSD形式の... 　　Illustrator で作成したAI形式は特殊なので、ブラウザで... -文字化けする →　文字コードに関する設定正しいですか。 　　＜meta＞タグでUTF-8の使用を明言して下さい。 　　テキストエディタの文字コード設定で、UTF-8が選択されて... ~ [[本格的な作業では、こちらをご一読下さい。>WebDesign/Prob... ~ ~ ~ ~

終了行:
*Webサイト制作の基本 ~ ***MENU #contents2_1 ~ **はじめに ***情報公開の様々なかたち Web上にサイト形式で情報を公開するには様々な方法があります... -アカウントを取るだけで情報発信できるサービス（以下ほんの... --[[GoogleSites]]　← 別ページに記事を書いています。 --[[WordPress]]　← 別ページに記事を書いています。 --Instagram　https://www.instagram.com/ --Facebookサイト　https://www.facebook.com/ --Tumblr　https://www.tumblr.com/ -ノーコードツール（Webサイトビルダー） --CANVA　https://www.canva.com/ja_jp/ --STUDIO（スタジオ） https://studio.design/ja/ -- Wix（ウィックス）　https://ja.wix.com/　 --Jimdo(ジンドゥー）　https://jp.jimdo.com/ ~ ***制作に関わる様々なツール オリジナルのWebサイトは HTML, CSS, JavaScript といった言... -''素材の制作に関わるツール'' --画像処理：AdobePhotoshop, GIMP 等 --図表制作：AdobeIllustrator, InkScape 等 --映像制作：AdobePremiere, AdobeAfterEffect, FinalCut 等 --音づくり：Audacity, GarageBand, CakeWalk 等 -''モックアップツール（プロトタイピングツール）'' Webサイトのユーザーインターフェイス (UI) 制作に特化したデ... --''Figma'' https://www.figma.com/ --''Adobe XD'' https://www.adobe.com/jp/products/xd.html --Cacoo https://cacoo.com/ja/ --Drama https://www.drama.app/ --InVision Studio https://www.invisionapp.com/studio --Sketch https://www.sketch.com/ -''Webオーサリングツール（統合開発環境）'' HTML+CSS+JavaScriptによるコーディング作業を支援するツール... --''[[VisualStudioCode]]''　テキストエディタというより統... https://code.visualstudio.com/ --''Eclipse''　オープンソースであらゆる言語に対応します https://www.eclipse.org/ --Adobe Dreamweaver https://www.adobe.com/jp/products/dreamweaver.html --ホームページビルダー https://www.justsystems.com/jp/products/hpb/ --BiND for WebLiFE https://bindup.jp/ --Google WebDesigner https://webdesigner.withgoogle.com/ --BlueGriffon http://bluegriffon.org/ -''テキストエディタ'' HTML+CSS+JavaScriptのコーディングを行う、最もシンプルかつ... --[[TextEditor]] ← こちらで紹介しています。 ~ ~ **サイト制作に関わる基本概念 ***WebページとWebサイト Webページとは、HTML（Hyper Text Markup Language）という言... ~ #image(folder.jpg,right,35%) 一方、Webサイトというのは、一般に複数のWebページがセット... #clear #image(GitHub/RepositoryImage03.png,right,35%) [[Webサーバー>RentalServer]] や [[GitHub]] にアップする場... #clear Webサイトを制作する場合は、まずはじめにWebサイト用のフォ... ~ ***フォルダ名やファイル名について Illustrator や Photoshop での作業とは異なり、Webのデータ... -フォルダ名やファイル名に使える文字は、原則として半角英数... -フォルダ名やファイル名は、原則小文字として、単語区切りに... ~ ***情報量を表す単位記号について 情報量を表す単位記号は1000倍（０が３つ）単位で大きくなり... ''n''(ナノ), ''μ''(マイクロ), ''m''(ミリ)　←→　''K''(キロ... ITの分野では 2^10=1024 を基準にしますが、ここではふつうに... ~ ***文字について Webサイトの制作にあたっては、文字コードについての知識と、... -Webの技術も含め、コンピュータの中では、文字は 0110・・の... -Webサイトの文字は、基本的には閲覧する側のフォント環境に... 　ただし近年、例えば モリサワの TypeSquare などでは、Web... ~ ***色について Webサイトの文字や背景の色には、RGB値を16進数で表す16進ト... -16進トリプレット 先頭に # を書いて、赤・緑・青の順に、各２桁の計６桁を書く... 各成分は 00〜FF（0～255） の光度（intensity）で表現され、... -X11 Colors HTML と CSS に準拠したウェブブラウザで一般化している色名... 配色等については右のページをご覧下さい。＞ [[WebDesign/Co... ~ ***サイズの単位について Webサイト上の大きさを指定するには、画面サイズに対して最も... -px：画素数で指定。画面のサイズ（例えば、1920x1080）に対... -%：親要素の幅に対する子要素の幅を比率で指定するもの -em：文字の高さを基準にした単位。1emは1文字分で、環境によ... 　この単位は、親要素に対する比率になるので、同じ1.5emでも... -rem：root+em の略で、ルート要素のフォントサイズを継承し... ~ ***画像について 画像を掲載については、サイズと圧縮形式についての基礎知識... -スマホ、デジタルカメラの写真は、そのままでは画素数が多す... 。Twitter、LINE、Instagram 等のSNSでは、ユーザがアップし... 詳細については右のページをご覧下さい。＞ [[WebDesign/Imag... -Webサイトに表示される画像の形式は以下の３種類です。特定... --JPEG画像( .jpg )：写真などの圧縮に最適です（不可逆圧縮） --GIF画像( .gif )：256色以下、ベタの多いイラスト等に最適... --PNG画像( .png )：ロゴマーク等、背景を透明化するのに最適... ~ ***その他のメディアについて Webページには、画像のみならず、音声や動画を掲載することも... -音声 サイトが開くと同時に音が出る・・というのは、閲覧者にとっ... -動画 ファイルのサイズが大きく負荷がかかるため、自前のサーバー... 　限定公開（アドレスを知っている人にのみ閲覧させる）の方... ~ ***付記：過去にサイト制作の経験のある方へ Webの常識は日々変化しています。 以下、ご確認下さい。 -＜FRAME＞タグは使いません。 ナビとコンテンツをフレームで分ける方法がかつては用いられ... -＜TABLE＞タグを使ったレイアウトは行いません。 レイアウトはCSS側で、flex, float, position、といったプロ... ~ ~ **試作体験 Webサイトというものがコンピュータ上に、どのような形で存在... ~ ***PCの環境設定 開発系の作業では''ファイルの拡張子''を理解して扱うことが... -Windowsの場合 -- スタートメニュー＞すべてのプログラム＞アクセサリ＞エク... --[ALT] キーを押して、ツール＞フォルダオプションと開く --表示タブを選択、[登録されている拡張子は選択しない] のチ... -Macの場合 --Finderメニュー＞環境設定 --Finder環境設定ダイアログの詳細タブで --[すべてのファイル名拡張子を表示] にチェック。 ~ ***必要なツール（ソフトウエア）の準備 Webサイトの制作には大きく３つのソフトウエア、すなわち 作るソフト、見るソフト、転送するソフトが必要です。 -作るソフト（HTML, CSSの記述）　[[テキストエディタ>TextEd... -見るソフト（チェック）　[[ブラウザ>Browser]]（Chrome, Fi... -転送ソフト（アップロード）　[[FTPツール>FTP]]（FileZilla... 基本的にすべてフリーソフトウエアで事足ります。それぞれ準... Dreamweaver、ホームページビルダーなどのオーサリングソフト... ~ ***Webサイト開発用のフォルダを準備する -Webサイトの親フォルダを作る デスクトップ上で、右クリック > 新規フォルダ > WebSite -画像格納用のフォルダを準備する 上で作成した WebSite フォルダの中で、右クリック > 新規フ... #image(folder.jpg,right,30%) -フォルダ構成は右図のようになります。 -最終的には、''このフォルダ'' ＝ ''Webサイトの全体像'' で... ~ ***トップページを作成・保存する -[[テキストエディタ>TextEditor]]を立ち上げます。 -以下のソースコードを、エディタにコピー＆ペースト。 -それを WebSite フォルダに''index.html''という名前で保存... <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Sample Page</title> </head> <body> <h1>見出し</h1> <p> 　　 本文｜適当に文章を書いて下さい。 </p> </body> </html> ''トップページ ＝ index.html'' というのが、Webの「お約束... ~ ***動作確認 ページをブラウザで表示。またHTMLを書き換えて動作を確認し... -ブラウザを起動して下さい。 -index.html をブラウザの画面にドラッグ＆ドロップしてみて... -「見出し」と「本文｜・・」が表示されればOKです。 -HTMLの内容を書き換えて変化を確認して下さい。手順は以下の... --HTMLを書き換えて保存する --ブラウザの「再読み込み」を行う -ページタイトル ＜title> ～ </title> で挟まれた部分がページタイトルです。 -見出し ＜h1> ～ </h1> で挟まれた部分が見出しです。 -本文の文章 ＜p> ～ </p> で挟まれた部分が文章段落です。 ~ ***別のページをつくってリンクする Webサイトは、トップページ、アバウト（このサイトについて）... -index.html を [option]+ドラッグ してファイルを複製します。 -ファイルの名称を、例えば about.html と書き換えます。 -それをテキストエディタで開き、見出しや、本文の文章を書き... -それをブラウザで開いてみて、変更が反映されていればOKです。 -今作ったページと、先に作っていた index.html とをリンクで... -index.html 側 <a href="about.html">aboutページへ</a> という一行を <body> ～ </body>の間に追加（場所はどこでも可) -about.html 側 <a href="index.html">トップへ戻る</a> という一行を <body> ～ </body>の間に追加（場所はどこでも可) -index.html をブラウザで再読み込みします。 -青い文字で「aboutページへ」という部分が見えると思います。 -そこをクリックすると、about.html が表示され、そこで「ト... ~ ***ページに画像を掲載する 画像をページに掲載するには、以下のようにします。　[[詳細... -配置したい画像を用意します（ファイル名は半角英数 sample.... -画像ファイルを先に作った images フォルダの中に移動します。 -index.html に以下の一行を <body> ～ </body>の間に追加 <img src="images/sample.jpg"> images/sample.jpg という記述は、images フォルダの中にある... -index.html を保存したら、ブラウザで動作確認して下さい。 うまくいったら、もうひとつのページにも別の画像を掲載して... ''補足「リンク配置」について'' HTML 自体は単なるテキストファイルで、画像そのものを含むこ... とりあえずここまでで、Webサイトを構成するファイルがこのよ... ~ ***サイトの開発とバックアップについて #image(SiteBackup.png,right,30%) Webサイトなどのソースコードは、開発の過程で必要の都度バッ... ~ ~ **よくある質問 -実習室のテキストエディタで保存したファイルは他のソフトで... →　もちろんです。 　　テキストエディタで作成、保存されるのは、テキストファ... 　　最もシンプルかつ標準的な文字列データです。 　　他のエディタはもちろん、ブラウザでもワープロでも読め... 　　 -HTMLを書き直して保存したが、ブラウザ上の表示が変わらない。 →　ブラウザの更新ボタンを押して下さい。再読み込みが必要で... →　あなたが編集したファイルと、チェックしているファイルは... 　　初心者の方によくある例ですが、ファイルをコピー、移動... 　　自分が編集しているファイルがどれか？混乱しているケー... →　ファイル名の大文字／小文字の区別は問題ありませんか。 　　ローカルのPC上では大文字／小文字の区別がない場合があ... 　　大文字小文字が間違っていてもリンクがつながる場合があ... 　　サーバー上では区別されますので、つながりません。 -画像が表示されない →　リンク切れになっていませんか。配置したあと不要と思って... 　　配置したあとで場所を移動した。配置したあとでファイル... 　　これらはすべてリンク切れの原因となります。 →　画像ファイルは汎用のものですか？ ファイル形式はJPEG、G... 　　などでなければなりません。Photoshop で作ったPSD形式の... 　　Illustrator で作成したAI形式は特殊なので、ブラウザで... -文字化けする →　文字コードに関する設定正しいですか。 　　＜meta＞タグでUTF-8の使用を明言して下さい。 　　テキストエディタの文字コード設定で、UTF-8が選択されて... ~ [[本格的な作業では、こちらをご一読下さい。>WebDesign/Prob... ~ ~ ~ ~

ページ名: