本当に自分の作りたいサイトを(勉強のために)実用的なWebページで作ってネットで公開してみると良いでしょう(本当に自分の作りたいサイトならモチベーションも上がるでしょうから)。
逆に言うと、自分が本気でネットで公開したいサイトでないと、それだけの学習コスト(学習の労力)を掛けて勉強するのは難しいかもしれません、(もちろん 不可能と言うことでは無いですが)自分が本気でネットで公開したい、と言うモチベーションが有った方が学習に圧倒的に有利です。
自分が本当にネットで公開したいコンテンツが有るか、どうかも重要な要素になるでしょう。
無料レンタルWebサーバーは基本的に広告が入るので、広告がウザくない所を探して下さい。
下記はアマチュア用の注意点です(プロとアマチュアでは方向性が違います)。
プロではピクセル･パーフェクトを希求しますが、アマチュアならリキッド･レイアウトでもおｋ、なおリキッド･レイアウトはフォント･サイズ(remなど)を基準とします。
現在のピクセル・パーフェクトはビューポートの横幅に比例して伸縮します。
Web系においての静的Webページでは古い(pxなどの)絶対単位のピクセル･パーフェクトは無くなりました(ただし動的Webページでは動的に絶対単位(px)で生成している場合が多い感じです、また基幹系においての静的Webページでも昔ながらの古い(pxなどの)絶対単位のピクセル･パーフェクトを使っているかもしれませんが)。
つまり、(Web系においての静的Webページでは)現在のピクセル・パーフェクトは、別物になったと言うことです、(完全な別物なので)それをピクセル・パーフェクトと呼んで良いのかと言う議論は有るでしょうが。
分かりやすく言うと、肉眼で見たイメージとしてのピクセル・パーフェクトなので、脳内で便宜的に「イメージ・パーフェクト(仮)」とでも読み替えれば良いでしょう。
なお 人がピクセル・パーフェクトと言った時に、古いpx単位のピクセル・パーフェクトを言っているのか、「イメージ・パーフェクト(仮)」を言って居るのか、文脈から判断する必要があります。
「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー･フレンドリー(PCフレンドリー、タブレット･フレンドリー、スマホ･フレンドリー)なページが推奨されます。
Chromeのモバイル･エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみればユーザー･フレンドリーが如何に重要か解るでしょう。
(各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー･ツールのモバイル･エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。
また、(ブラウザ側の設定で)フォント･サイズもイロイロ 変更してみて、イロイロなフォント･サイズに対応可能かどうかもチェックしてみると良いでしょう。
レスポンシブ･デザイン：「PC、タブレット、スマホ」を同一のHTMLコードにする手法はレスポンシブ･デザインと言われており、強く推奨されています(CSSのファイルは複数でも可)。
PC用を先に作る場合は、PC用を少し作ったら、(高度なCSSの場合は)モバイルでも こまめにチェックする事を強く推奨します(後で全面的に修正しなければならなくなると、精神的にゲンナリしますので)。
参考
Webページにおける基本的な留意点：レベル1
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+00000231&tsn+00000231&bts+2019/08/12%2011%3A02%3A18&
アマチュアの場合で細かく分けたい場合は、メディアクエリで「1312px以上」、「1312px未満～992px以上」、「992px未満～688px以上」、「688px未満」に分割する4パターンのレイアウト構成が推奨されているようです(もちろん、ページのレイアウト構成によっては、それ以下のパターン数でも作成可能な場合もあります)。
※注意点としては、ユーザーが意地悪くPC用ブラウザの横幅を小さくすると、PC用ブラウザで(レスポンシブ用などの)メディアクエリが効いてしまうと言う問題があります(メディアクエリを効かせたく無い部分はJavaScriptで記述する必要があります)。
(Webページ作成の基本のキとして)ブレイク･ポイントを念頭に置き、必ずワイヤー･フレームを作成して下さい(手書きでも良いですし、単純なレイアウトなら脳内だけでも おｋ)。
参考
チンチロリン
http://xd305417.html.xdomain.jp/responsive/dice000/dice000.htm
このチンチロリンは、単純なレスポンシブ･デザインのデモ･ページです(PCとスマホでレイアウトが変化します)。
分かりやすく作ろうなどと一切考えずに作ってしまっているので、コードを見ても分かりずらいかもしれません。
なお、このデモは あくまでもモバイル･エミュレーター･チェック用のデモ･ページでJavaScriptでフォント･サイズを計算しており、本番用ページでは無いと言うことは、ご了承 下さい。
通常、本番用ページはJavaScriptでフォント･サイズを計算しません、つまり本番用ページで様々な解像度をチェックするとなると、解像度を変更するたびにブラウザ側でフォント･サイズを調整しなければならないので面倒になってしまいます。
このデモはセレクト･ボックスでフォント･サイズを「0,85倍～1.65倍」まで変更可能です。
フォント･サイズの変更に伴なって、ブロック要素の「"縦"サイズ」も変化していることに注意して下さい。
これは、ユーザーによるブラウザのフォント･サイズの変更に対応可能である事を示しています。
勉強の手始めとして、その(PCとスマホでレイアウトが変化する)「チンチロリン」程度のモノか、又は もっと簡単なレイアウトから初めても良いです。
例えば、「画像」と「枠の有る要素を２つ」を作って、要素内には必ずテキストを入れ、PCとスマホでレイアウトを"変化"させるモノを作ってみるのも良いでしょう(要素に枠を表示させれば、要素からテキストが溢れているか目視で確認できる)。
また、(ブラウザ側の設定で)フォント･サイズもイロイロ 変更してみて、イロイロなフォント･サイズに対応可能かどうかもチェックしてみると良いでしょう。
>実用的なWebページ
「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー･フレンドリー(PCフレンドリー、タブレット･フレンドリー、スマホ･フレンドリー)なページが推奨されます。
>レスポンシブ･デザイン
(各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー･ツールのモバイル･エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。
>リキッド･レイアウト
(ブラウザ側の設定で)フォント･サイズもイロイロ 変更してみて、イロイロなフォント･サイズに対応可能かどうかもチェックしてみると良いでしょう。
注．フォント･サイズを固定(絶対単位の指定)してしまうと、ユーザビリティが著しく低下する可能性があるので注意が必要です。
また、デフォルト･フォント･サイズ(1rem)より小さくしてしまうと、目の悪い人にとってはユーザビリティが悪くなってしまう可能性があります。
ユーザビリティが悪いと、(クローラのAIは)当然 ユーザー･フレンドリーでは無いと言う判定になるので、SEO的にはマイナスになります。
解像度を変更したら必ずリロードして下さい。
解像度を変更してフォント･サイズが合わなくなったら、ブラウザの設定でフォント･サイズを調整して下さい。
Webページ作成時に何度も何度も解像度をチェックするとなると、フォント･サイズの調整も面倒になります。
上記「チンチロリン」内にフォント･サイズ自動調整用の「CSS、JavaScript」が記載されているので、それを使うと便利でしょう、あくまでもモバイル･エミュレーター用のコードなので、本番用Webページではコメントにするなど、無効にして下さい。
下記が一般的なSEO対策です(アクセス数の向上に関する留意点)。
初心者はクソデカイ画像を使ってしまいがちなので注意して下さい。
SEO(Search Engine Optimization：検索エンジン最適化)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000005C1&tsn+000005C1&bts+2022/03/04%2023%3A56%3A24&
>リセットCSS
おすすめのリセットCSS
https://qumeru.com/magazine/70
>destyle.css
>destryle.cssはリセットCSSの中でもかなり強力にブラウザのデフォルトCSSをリセットします。下記の使い方のサンプルコードを見てもらえると分かるかと思いますが、ほとんどのタグの見た目が同じ見た目になります。
>ブラウザのデフォルトCSSを無効化し、それに頼らずCSSを1から書いていきたいという方におすすめのリセットCSSです。
>ress
>ressはリセットCSSとノーマライズCSSのいい部分を混ぜた特徴を持っています。ノーマライズCSSのやりにくい余白の調整がやりやすかったり、レスポンシブデザインで書きやすかったりなど、モダンな開発環境に気の利いた設計がされています。
>reboot.css
>reboot.cssはBootstrapで利用されているリセットCSSです。Bootstrapを利用している方は自動で使う形になりますが、Bootstrapを利用していない方でもリセットCSSのみを切り出して利用することも出来ます。
>HTML5 Doctor Reset CSS
>Eric Meyer’s “Reset CSS”という一番有名なリセットCSSをベースに更に、HTM5のタグに対応させたプロジェクトです。
>HTML5 Doctor Reset CSS自体は更新が古いですが、使われているリセットCSSは一般的に使うであろうタグを網羅しており現場でも十分使えるレベルです。
|
|
掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+rpr/ を ご利用 下さい。
