![見出し画像](https://assets.st-note.com/production/uploads/images/119183285/rectangle_large_type_2_348756101a0be7fc99c7812bd1d5c041.png?width=800)
【本を見ながら作ってみる】Newsページ続きから パート3
はい。今日はNewsページ続きからです。久しぶりに
10分ほど寝坊したので今日は早めに仕上げて寝ようと思います。
えいえいおーーー♪
前回まではこちら。
昨日は左側の実をコーディングして終わったので
続きは右側、サイドバー部分を
![](https://assets.st-note.com/img/1697552681648-Hjc2xHdD3i.png?width=800)
![](https://assets.st-note.com/img/1697553091609-g1Nm4cWFn8.png?width=800)
![](https://assets.st-note.com/img/1697553192426-oKNI1njYgU.png?width=800)
・中黒のところ。paddingで余白つきました
![](https://assets.st-note.com/img/1697554068007-0KiWZZmNvZ.png?width=800)
カーソルを合わせた際の装飾も出来た♪
![](https://assets.st-note.com/img/1697554132212-V7NKK261KC.png)
あ、Newsページできたぁ 🙌🙌
![](https://assets.st-note.com/img/1697554483428-Bo7eeRVIqE.png?width=800)
サクッと完了♪
あ、meta情報先に色々登録してみよう
何も表示してないのはちょっと寂しいしなぁ
<meta property=”og:url” content=”ページのURL”/>
<meta property=”og:type” content=”ページの種類”/>
<meta property=”og:title” content=”ページのタイトル”/>
<meta property=”og:description” content=”ページのディスクリプション”/>
<meta property=”og:site_name” content=”サイト名”/>
<meta property=”og:image” content=”サムネイル画像のURL”/>
OGPタグ
SNSにWebページをシェアした時、
ページのURLなどを正しく表示させて目立たせるために設定
例:TwitterやFacebook
Webページの情報がシェアされると、ページのURLやページタイトルが
視覚的に目につくようにサムネイルが表示されるとのこと。
レスポンシブに対応させる手順 フムフム…
確かに調整必要そうね 文字が大きかったりロゴが小さいし
あれこれ調整必要。。。
![](https://assets.st-note.com/img/1697555444570-hnbp98IWb0.png?width=800)
なんかところどころ気持ち悪いずれなどがあるけど
多分これであってそうな気がする
![](https://assets.st-note.com/img/1697556374071-ZCNYDo8J5Y.png?width=800)
<!-- レスポンシブに対応させる手順 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
これはindex.htmlにも入れなきゃこうならないもんね
CONTENTSを縦並びにするそうな…
これを見ただけで‥‥頭痛くなる 笑
この辺に来ると本と、回答と、vscodeとにらめっこ状態です 笑
![](https://assets.st-note.com/img/1697556851320-dMiO8E34qN.png)
![](https://assets.st-note.com/img/1697556810064-EailWLMDT4.png)
…でNewsページも調整だそうで
![](https://assets.st-note.com/img/1697557100238-SPtKG9UC9u.png)
メインエリアの下にサイドバーが設置されるそうな
![](https://assets.st-note.com/img/1697557150642-yBYo9nyyUz.png)
ここまで出来たら、あとは文字サイズや余白を調整するそうな
![](https://assets.st-note.com/img/1697557547075-u6AfvQPvAz.png)
スクショはこちら。 ↑は実際のページ ※作成途中
![](https://assets.st-note.com/img/1697557727220-ENPT3v8yxu.png)
明日は3カラムのレイアウトに設定しようか来航と思います。
キリがいいので今日はここまでです🙌🙌🙌
追伸 実際スマホで表示してみてみました
手直ししてみたいところは多くあります
本を見ながらなので本がなければココまで出来ませんが
小さな目標達成ということで明日もコツコツ頑張ります♪
本を見ずにサクサク作れる日はいつになることやら 笑
続きはこちらです
この記事が気に入ったらサポートをしてみませんか?