初心者のHTML+CSS学習サイト初心者向けにHTMLやCSSをわかりやすく解説するつもりのサイト。パソコンやスマートフォンでできる練習問題あります。解像度とは現在はデスクトップパソコンやノートパソコンだけなく、スマートフォンやタブレット等もあり、それぞれの機種で大きさも形もまちまちです。(以下の説明では総称してパソコンと表現します)パソコンのディスプレイでは文字や写真などをピクセル(ドット)を使って表現しています。ディスプレイで利用されているピクセル数を確認する際には解像度という項目を確認します。解像度とは画素の密度を示す数値のことを指します。解像度は機種によって異なり、気になる場合はパンフレットや確認画面で確認する必要があります。2,560×1,440ピクセル(SonyのVAIO公式サイト)例3:解像度の確認画面(Windowsではデスクトップ上で右クリックし、画面の解像度で確認および設定が可能)つまり、機種によって解像度(どれだけピクセルを利用しているか)は変化するので、同じ画像を利用していも表示される大きさは異なります。水平線や画像の大きさをwidth=”100′′と設定しても解像度が変わると見た目の大きさは変化します。なっており、ディスプレイ全体のピクセル数は2,000,000(200万)となります。デジタルカメラで撮影した写真が1,000万画素のものだとディスプレイ全体に収まりきれない程の大きさとなります。パソコンで表示されている画像はサムネイル(縮小表示)の画像を利用しており、本来の大きさはもっと大きい画像の可能性があります。Webサイトで画像を利用する際の注意点Webサイトの表示速度が遅くなるとサイト閲覧者が減る可能性が高くなります。(5秒以上かかるとかなり可能性が高くなる=他のWebサイトへ移動してしまう)画像のピクセル数の多さ(または容量)と表示処理に負担をかける(=表示が遅くなる)ことは比例しますので、画像のピクセル数は適切なもの※1にする必要があります。Webサイトで画像を利用する際には、画像のピクセル数を適切なものに変更する必要があります。画像のピクセル数を変更するには画像編集ソフト※2を利用するのが一般的です。※1、imgタグのwidthやheightで小さいピクセル数を指定しても画像本来の容量は変わりません。※2、有名な画像編集ソフトにはPhotoshopやGIMP等の様々なものがあります。スポンサードリンクレクタングル広告(大)レクタングル広告(大)sai関連記事HTMLやCSSを書く前の準備。HTMLやCSS等を記述する際には拡張子を表示しておく必要があります。HTMLやCSSはテキストエディタを利用して記述します。試してほしい5つの技HTMLやCSS、プログラミングの編集速度を上げる上で、僕がやっていることをご紹介します。知らなかったら是非試してみてください。コメントをキャンセルメールアドレスが公開されることはありません。data-url="">日本語が含まれない投稿は無視されますのでご注意ください。タグの入れ子プロフィールHTMLやCSSに関する書き方や練習問題を配信しています。配信は12:00ごろです。突っ込みや質問があれば、お問い合せやコメント下さい。