Udemy講師もやってます→u0u1.net/MGfzTwitterFacebookこんにちは。web制作に関する情報って、調べるといくらでも出ては来ますよね。margin/paddingの扱い方、flexboxの仕様、要素の中央ぞろえetc...でも、そういう記事読んでも実際の場面でどう使うかって結局わかんないですよね?そこで今回は、よくあるWebページの作り方をまるっと書いていこうと思います。質問や、「もっとこうした方が良い」「私はこうしている」などのご意見がありましたらコメントよろしくお願いします!長くなりそうなので、いくつかのpartに分けます。第1回:header(PC版)第2回:header(SP版)第3回:トップの画像エリア(PC版)第4回:トップの画像エリア(SP版)第5回:メインコンテンツのエリア、footer(PC版)第6回:メインコンテンツのエリア、footer(SP版)では早速本題に入ります。制作物の確認まずは、今回どのようなものを作るかを確認しましょう。以下のリンクからも確認してみてください。作るものが確認できたところで、必要なファイルを準備していきましょう。フォルダの構成は、以下の通りです。index.htmlとstyle.cssは基本は次回以降編集していきます。次に画像を用意します。以下のリンクからダウンロードしてください。http://eclair-company.sakura.ne.jp/public_test/common-html-test/img.zipお好きなものを使っていただいても構いません。ここまでで必要なファイルが全て準備できました。デフォルトスタイルシートの用意それでは、style.cssにデフォルトのスタイルを書いていきます。デフォルトのスタイルとは何かというと、一部のタグのデフォルトの状態を使いやすいように編集したものです。一般的にはreset.cssと呼ばれるすでに色々と調整されたcssファイルを導入することが多いですが、今回は解説もしたいので自分で書きます。コードは以下の通りです。順番に説明していきます。auto;}上から順番にいきます。border-box;}これは、全ての要素をborder-boxにしています。*(アスタリスク)は全ての要素を表します。border-box;は何かと言うと、paddingやborderの扱いに関するプロパティです。次の画像のような違いが生まれます。通常(画像左)は要素に対してpadding、borderをつけると全体のサイズは要素のサイズ+padding、borderのサイズになります。2=122pxとなります。border-box(画像右)の場合は、padding、borderのサイズも合わせてwidth/heightのサイズに収まります。よって横は200px、縦は100pxです。計算いらずで直感的に数値を指定できるのはborder-boxなので、僕がコーディングするときは基本的にこうしています。0;}この2つは関連しているので合わせて説明します。どちらもfont-sizeに関するプロパティを持ちます。何をしているかというと、remという単位を使いやすくしています。remとは、html要素のフォントサイズを基準にその何倍かで指定する単位です。利点としては、端末ごとに基準のfont-sizeが異なる場合がありそれに対応しやすいなどが挙げられます。html要素のデフォルトの基準は16pxとなっています。このままだとちょっと計算がしづらかったりするので、基準を10pxにするために62.5%にしています。20pxなら2rem、32pxなら3.2remと表現できます。body要素では基準はそのまま16pxを使いたいので1.6remにしています。marginに関しては、デフォルトで入っているものを消すために指定しています。以下のような違いになります。外側に空白がある意味は全くないので必ず指定しましょう。指定あり次はaタグです。none;}これはaタグをプレーンな状態に変更しています。本来aタグはインライン要素ですが、リンクをつける時に文章中に入れる場合より何らかの要素全体につけたりする場合が多いのでblock要素の方が都合が良いです。colorはデフォルトで青文字になってしまうのを、text-decorationはリンクの下線を打ち消しています。最後にimgタグです。auto;}imgタグはなかなか扱いに困るものです。本来inline要素のところをblock要素にします。サイズに関する指定ですが、これは画像が歪みにくいようにするためのものです。親要素にwidthが指定されていれば、その幅いっぱいに広がるように比率を維持して画像が配置されます。しないと歪んだりはみ出したりしてしまう場合があります。これでデフォルトのスタイルは以上です。実際はもっと細かく指定したり、reset.cssを使うことが多いですが、今回の制作物の場合はこれでも十分です。最後に、index.htmlの雛形を用意します。class="body"></div><footer></footer></body></html>metaタグのviewport設定は、レスポンシブデザインに必要なものです。次回以降は、header、classがbodyのdiv、footerの中身にそれぞれ追記していきます。第0回はここまでです。いかがでしたでしょうか。次回はheaderを制作していきます。AMお世話になります。第0回~第6回の見出しというか、もくじ第4回:トップの画像エリア(PC版)は、SP版だと思います。第3回がPC版ですので。修正されたら私のコメントは消していただいて構いません。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。〜header(PC版)編〜トップページへRECOMMENDこちらの記事も人気です。auto;の正体を暴くHTML/CSS2019.10.13Flexboxの初心者向けチュートリアル作ってみました。未分類2019.12.20プログラミング初心者から独学で学習したい人向けガイドライン【Web系】サイト制作とは2019.12.12【フリーランス志望は必読】Web制作の流れを改めておさらいするサイト制作とは2019.12.11【独学】初心者が3ヶ月でプログラミングをマスターする方法!【大公開】HTML/CSS2019.10.13Flexboxの初心者向けチュートリアル作ってみました。type="date"で、どこをクリックしてもカレンダーが表示されるようにする。