トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"沙羅"

★この掲示板は書き込みを停止いたしました 。
記事の書き込みはリンク・ページの表示 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/ を ご利用 下さい。

Index Menu
(2)<FirstTitle>:Webページにおける基本的な注意点 <LastTitle>:Webページにおける基本的な注意点(3) (3)<FirstTitle>:CSSデモ/タブ リンク使用(1) <LastTitle>:CSSデモ/タブ リンク使用 003 (2)<FirstTitle>:Visual Studio Code開発環境/settings.json <LastTitle>:Visual Studio Code開発環境/settings.json(0) (1)<FirstTitle>:JavaFX8デモ/「ComboBox、Timer」 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:JavaScriptフレームワーク <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:











<Number>: [0000040B]  <Date>: 2022/01/25 05:05:11
<Title>: Webページにおける基本的な注意点(3)
<Name>: amanojaku@管理人

インターネットでは「ファイル名、フォルダ名」は(半角)英文字の小文字と大文字が区別されるので注意が必要です。
なお、(実際は何の問題もないのですが)インターネット上の慣習で英大文字は推奨されませんが、それは ただの慣習なのでアマチュアなら それほど気にしなくても良いでしょう(プロを目指すなら英大文字は使わないほうが良いでしょうが)。
また、インターネットに公開する場合、「ファイル名、フォルダ名」には使えない文字、使ってはダメな文字があります。
とりあえず、半角「英字(大文字・小文字)、数字、アンダーライン」程度にして下さい。
「ファイル名、フォルダ名」には全角文字も使用しないで下さい、インターネットでは全角文字の「ファイル名、フォルダ名」には対応していません。
自分のサイト内の(リンク可能な)コンテンツは相対アドレスで指定して下さい(当然、ローカルのフル・パス「C:\~」もダメです)。
絶対アドレスで指定すると引越し時に面倒なことになります(基本的に先頭に「 http:// 」が付くのが絶対アドレス、「 http:// 」が付かないのが相対アドレスです)。

ブラウザのフォント・サイズの初期値は16pxのようです、スマホなどではフォント・サイズは初期値(16px)が推奨されているようです。

現在、キャラクターセット(文字エンコード)は多数ありますが、「UTF-8、Shift_JIS」の2つがインターネットでのデファクトスタンダードです(現在、Shift_JISよりUTF-8の方が推奨されています)。
metaタグのcharset属性で(「UTF-8、Shift_JIS」などの)キャラクターセット(文字エンコード)が設定可能です。
必ず(metaタグの)charset属性に設定されているキャラクターセット(文字エンコード)でセーブして下さい、セーブ時のキャラクターセット(文字エンコード)が違うと全角文字が文字化けするので注意して下さい。

ASCII あれこれ
http://yytomy.sakura.ne.jp/fundamental/ascii.html

ASCII(規格)だけでは漢字は表現できないので、JIS漢字(規格)が考案されましたが、非常に使いづらかったので、MicrosoftがJIS漢字(規格)を勝手に改変しShift_JIS(規格)が作成されました。
しかし Shift_JIS(規格)は約6,300文字程度しか収録されておらず、規格上からも収録文字数を大幅に増やすことはできませんでした。
そこでユニコードコンソーシアムによってUnicode(規格)が作成されました。
UTF-8(規格)はUnicode系の文字エンコードです。

UTF-8にはBOMを付与できますが、本来 BOM(Byte Order Mark)はエンディアン(ビッグエンディアン、リトルエンディアン)を指定するためのモノなのですが、UTF-8にはエンディアン(ビッグエンディアン、リトルエンディアン)は存在しないので、本来のBOM(Byte Order Mark)と意味で使われている訳ではなく、単にUTF-8エンコードである事を表わしているにすぎません。

BOM(Byte Order Mark)
http://exlight.net/devel/unicode/bom.html


フロントエンド(プロ)を目指すならベンダー・プレフィックスの付与は必須になります、ベンダー・プレフィックスの最適化には「Live Sass Compiler(+Visual Studio Code)」のようなツールが必須になります(下記参照)。
「Visual Studio Code」を使う場合、下記に記載されているプラグインを全て導入することを推奨します。

Visual Studio Codeでフロントエンド開発環境を構築する
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000002AB&tsn+000002AB&bts+2019/11/17%2010%3A34%3A59&


SEO(Search Engine Optimization:検索エンジン最適化)
まず、SEOの基本のキ(常識レベル)として「description、keywords」の設定をして下さい(下記参照)。

検索結果に表示!HTMLでmetaタグを使う方法【初心者向け】
https://techacademy.jp/magazine/12701

必須レベル(最重要ファクター):「記事の質(端的に言うとアクセス数)、特定の解像度に依存しないユーザー・フレンドリーなページ」の2本柱。
※この"必須レベル(最重要ファクター)"が最高の優先順位だと言うことに注意して下さい(SEOは王道で勝負が基本です)。
つまり いくら他を頑張っても、この"必須レベル(最重要ファクター)"がグダグダだったらダメダメと言う事になりかねないです。

強く推奨レベル:「(ペライチでない場合)パン屑リスト(nav要素)、レスポンシブ・デザイン、ロボッツ・テキスト(robots.txt)の設置、サイトマップ(sitemap.xml)の設置」。
※パン屑リストはページのヘッダーと、ハンバーガー・メニュー内の両方に設置すると更に良いかもしれません(両方が面倒な場合は、ハンバーガー・メニュー内に設置すれば良いでしょう)。

推奨レベル:「description、keywords」。

注意点としては「記事の質(端的に言うとアクセス数)」は当然として、「特定の解像度に依存しないユーザー・フレンドリーなページ」に対応できてないと、SEO的にはマイナスになります。
具体的には(pxなどの)絶対単位を使っていると「特定の解像度に依存する」ので、SEO的にはマイナスになります。
また、画像などのファイル・サイズが大きくて表示が重くなると予想される場合は、SEO的にはマイナスになります。
注.スマホは必ずしも4G通信している保障はありません、電波状況が悪い場合は3G通信になるので、画像のファイル・サイズが肥大化すると、画像の表示が非常に重くなる場合も有り得るので注意が必要です。
また 格安SIMの場合は無駄にパケットが消費されるのは非常に迷惑になります。


サイトのタイトルは「ユニーク」で「覚えやすい」タイトルが強く推奨されます。
下記でチェックしてみると良いでしょう。

Free Keyword Generator Tool: Find 100+ Keyword Ideas in Seconds
https://ahrefs.com/ja/keyword-generator

「検索エンジン:Google、国:日本」に設定、「キーワードを探す」をクリック、ロボットでないをチェックする。
「ボリューム」はキーワードの月間平均検索数(推定値)です。
「ボリューム」値が1000前後なら充分にユニークですが、あくまでも推定値なので あまり厳密に考えなくても良いです(「ボリューム」値が2000前後だとダメとか、3000前後だとダメとか、そう言うことではありません、あくまでも参考程度に考えて下さい)。


HTML内では特殊文字は「文字実体参照」か「数値文字参照」に変換しなければなりません(クォーテーション、ダブル・クォーテーション」はバッティングする場合だけ変換すれば良い)。
※HTMLとJavaScriptでは そのルールが違うので注意が必要です。

HTMLの記号・特殊文字の文字コード表(文字実体参照、数値文字参照)
https://gray-code.com/html_css/list-of-symbols-and-special-characters/

例えばHTMLでは「<'&"&"&'>」と言うテキスト・データを表したいなら最低限「<」、「>」、「&」を変換する必要がありますが、「クォーテーション、ダブル・クォーテーション」がバッティングする場合は、それらも変換する必要があります。
下記は、その具体例です。
通常のテキストは勿論、URLまで変換しなければならない事に注意して下さい(HTML内のテキストは徹底的に変換しなければならないと認識する必要があります)。
リンク・テキストは「<'&"&"&'>」と表示されているハズです、またリンクをマウスの右ボタンで、「リンクのURLをコピー」をすると「 http://<'&"&"&'> 」となるハズです。
※URLは「href="http://~ "」とダブル・クォーテーションで囲まれており、ダブル・クォーテーションはバッティングするので、ダブル・クォーテーションも変換していることに注意して下さい(クォーテーションを変換したい場合は「&#39;」)。


<html>
    <head>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
        <meta charset="UTF-8">
        <title>test</title>
    </head>
<body>
    <a href="http://&lt;'&amp;&#34;&amp;&#34;&amp;'&gt; " >&lt;'&amp;"&amp;"&amp;'&gt;</a><br>
</body>
</html>


第一目標:特定の解像度に依存しないページにトライしてみると良いでしょう。
手始めとして、簡素なパイロット版ページで作ってみると良いでしょう(要素に囲まれたテキスト、画像、1行入力、ボタン」など)。

pxから相対単位への換算で割り切れない場合は、あまり細かい値は意味ないような感じです。
%系では小数点以下1桁(小数点以下2桁目を四捨五入)、倍率系はでは小数点以下3桁(小数点以下4桁目を四捨五入)、程度で良いようです。
実際の表示に誤差が出たら、当然 微調整が必用になります。

Chromeの検証モードでサイズを確認できます。

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方
https://saruwakakun.com/html-css/basic/chrome-dev-tool


第二目標:レスポンシブ・デザインにトライしてみると良いでしょう。
メディアクエリで、アマチュアなら「1312px以上」、「1312px未満~992px以上」、「992px未満~688px以上」、「688px未満」に分割する4パターンのレイアウト構成が推奨されているようです。

参考

フロントエンド・スキル
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000036D&tsn+0000036D&bts+2020/09/15%2000%3A31%3A53&

Block( Address 00000580 Identity 00000231 )










ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.