CSSで記事ページをデザインする。たまろぐたまろぐCSSで記事ページをデザインする。Wordpressツイート今回は記事ページのモバイル端末用のCSSを解説していきます。超シンプルなテーマだといっても、解説するのは途方もないなぁなんて思っていましたが、いよいよ終わりが近づいてきました。100%;}難しい事は何もない!早速解説していきます。h1{}記事のタイトルに反映します。余白だけ変更していますね。左0に設定しています。10px;ボックスの内側の余白を10pxに変更しています。#cc6511;}記事タイトルのリンクの色を変更しています。グレー背景にオレンジ色結構気に入っています。h2{}記事内の見出しh2に反映します。#cc6511;枠のしたの部分だけ指定します。10px;}記事内の見出しh3とh4に反映します。それぞれ余白と色を変更しています。後は文字サイズが違うだけ。10px;}記事の文字サイズを18pxに設定。この値は結構大きめです。アクセスビリティって大事なんですよね。各自調節してください。0;}記事内の画像に反映。widthは幅を指定できます。100%なので、親要素いっぱいの幅になります。30px;}リストが格納されているボックスです。ulは順序が関係ないリストに使います。順序が決まっているものはolを使ってください。あ、CSSではなくHTMLの方でol使ってくださいね。#cc6511;}リストに反映します。100vw;}ブログカードのタイトルに反映します。auto;横のマージンをオートにします。これによって、なんとボックスが中央に表示されます。100%;最大の幅を100%にします。横スクロール嫌い!width:100vw;幅を画面の幅いっぱいにします。vwについてちょっと解説そういえばこれ詳しく解説してなかったかもなぁなんて思って解説します。vwは画面の幅に対して要素の幅をどのくらいにするかを指定できます。80vw;こうすると画面の幅の80%の幅になります。%との違いは画面の幅を基準にするか、親の要素の幅を基準にするかです。解説終わり!まとめこれでフッター以外は全てデザインし終わりました。フッターはCSSかなり短いのでもうほとんど終わったといっても過言ではないでしょう。https://tamalog.info。