質問です。 HTMLとCSSを学習しようと思い、自分で好き勝手に本やネットで書き方を拾い集めながら、取り敢えず見れるレベルのWebサイトが作れました。 また別のサイトを作ろうと思ったのですが、

HTML、CSS | ホームページ作成37閲覧xmlns="http://www.w3.org/2000/svg">250

ベストアンサー

0

その他の回答(1件)

0

とりあえず「Progate、ドットインストール」の無料版を理解できるまで周回してみると良いでしょう。 もし フロントエンドをガッツリやりたいなら、下記を参考に実用的なWebページを実際に作ってみると良いでしょう。 実用的なWebページ:ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000037&tsn+00000037&bts+2021/03/21%2013%3A55%3A19& 「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー・フレンドリー(PCフレンドリー、タブレット・フレンドリー、スマホ・フレンドリー)なページが推奨されます。 Chromeのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみればユーザー・フレンドリーが如何に重要か解るでしょう。 (各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。 PCにおいては とりあえず「1k~4k」解像度をチェックしてみると良いでしょう。 具体的には「1k」では「約1000px*750px」(アスペクト比「4:3」)を、フルHD画面 以上なら「約2000px*1120px、約4000px*2250px」(アスペクト比「16:9」)の解像度をチェックすると良いでしょう。 「タブレット、スマホ」は既に登録されているプリセットの解像度でチェックしてみると良いでしょう。 「タブレット、スマホ」の解像度のプリセットは[Responsive]コンボボックスで選択可能です(下記の解像度をチェックしてみると良いでしょう)。 タブレット:『「iPad」(768px*1024px)、「iPad Pro」(1024px*1366px)』。 スマホ:『「Galaxy Fold」(280px*635px)、「iPhone 5/SE」(320px*568px)、「Moto G4」(360px*640px)、「Pixel 2」(411px*731px)、「Surface Duo」(540px*720px)』 解像度を変更したら必ずリロードして下さい。 (Webページ作成の基本のキとして)ブレイク・ポイントを念頭に置き、必ずワイヤー・フレームを作成して下さい、手書きでも良いですし単純なレイアウトなら脳内だけでも おkです。 ※初心者の場合はワード系のアプリでカッチリ作ったほうが、そのままサイズを測れば良いので分かりやすいでしょう(それを「%、vw」などに換算する)。 勉強の手始めとして、その(PCとスマホでレイアウトが変化する)「チンチロリン」程度のモノか、又は もっと簡単なレイアウトから初めても良いです。 例えば、要素を2つ作って、要素内には必ずテキストを入れ、PCとスマホでレイアウトを変化させるモノを作ってみるのも良いでしょう。 また、(ブラウザ側の設定で)フォント・サイズもイロイロ 変更してみて、イロイロなフォント・サイズに対応可能かどうかもチェックしてみると良いでしょう。

プロとアマチュアでは方向性が違います。 プロを目指す場合はピクセル・パーフェクトを希求して下さい、プロを目指さない場合はユーザー・フレンドリーを希求して下さい。