-”text-align:center”はブロック要素に記述されている内容（インライン）に効く。 -”margin: 0 auto”はブロック要素にダイレクトに効く。しかしwidthが100%の状態だと効かない。（実際には効いているが幅が広すぎて身動きできないような状態で中央に動かない。） 考察： ユースケース１：ブロックの幅は100%のままで良く、記述されている内容を中央に寄せたいのであればtext-align: centerで十分。 ユースケース２：ブロックの幅を小さくする必要があり、且つそのブロック要素を中央に寄せたい場合はmargin: 0 autoを使う必要があり。（さらにブロック内に記述される内容も中央寄せしたい場合はtext align: centerも併用。） ユースケース１ p { text-align: center } ユースケース２ p{ text-align: center/left/right; max-width: 30%; margin: 0 auto }
対象読者 ・最近プログラミングを始めた方 ・ショートカットキーを普段使わない方、知らない方 ・PC操作にそもそも慣れていない方 はじめに さあプログラミング人生スタートだっ！！ まずはHTMLとCSSだっ！！ ノンノン…? プログラミングのスタートはHTMLとCSS。そうなのかもしれません。 ただ… ショートカットキーを知ることもまたプログラミングのスタートだと思います。 嘘は絶対つきません。私は後悔しまくりました。ショートカットキーは想像を絶するほどに便利すぎます。 この記事では、プログラミングを始めたばかりの人が本当に毎日必ず使うショートカットキーのみを取り上げようと思います。（タイトル詐欺しないように…） ショートカットキー ショートカットキーとは、キーボードの決められたキーを押すことによって、操作をするものです。早速使いまくるショートカットキーを紹介していきます！ キー 機能 ⭐️command + C 選択箇所のコピー ⭐️command + V コピーの貼り付け ⭐️command + X 選択箇所の切り取り（コピーしつつ削除） ⭐️command + Z 手前の変更分を元に戻す（複数回戻ることも可能） command + Y com+Zで戻しすぎた変更分を逆に進める command + A ファイル内の文字を全て選択 command + S ファイルの保存 command + F ファイル内の文字を検索 ⭐️がついているショートカットキーが絶対に絶対に毎日といって良いほど使うものですのでとりあえずここだけ抑えましょう！！！ ＊補足 command+c（x）とcommand+vをセット command+Zとcommand+Yをセット で使えば完璧超人の魔法使いに慣れそうですね、、、、?♀️?♀️ おわりに この記事を読んでショートカットキーの第一歩を踏み出すことができた最強のあなた。友達でプログラミングやっている人がいたら自慢してください。「ハイっ！お前知らない〜っ！」って言ってマウントをとってやりましょう！！?? 嘘です。そんなことしてもなんも意味ありません。どんどんもっともっと便利なショートカットキーを知って使い倒して、友達にも共有して一緒に強くなりましょう！！?
やりたいこと vue-cli＋Vuetify環境下にて、 HTML要素の横スクロールバーを下部だけでなく上部にも表示したい。 完成品 実現方法 以下の通りに実装しました。※下述の参考記事から発想を得ました。 横スクロールバーをつけたいHTML要素（以下、「コンテンツ」）に CSSで下部の横スクロールバーを表示させる コンテンツの上に新しいブロック要素を追加し、 [1]と同様にCSSで下部の横スクロールバーを表示させる コンテンツと[2]で追加した要素のスクロールイベントを Vuetifyの v-scroll.self で拾う コンテンツと[2]で追加した要素の element.scrollLeft を [3]のイベント内で同期させる template <template> <div> <!-- 横スクロールバー上 --> <div id="topbar" class="scroll-x-topbar" v-scroll.self="onScrollXTopBar"> <div class="inner-topbar"></div> </div> <!-- コンテンツ ＋ 横スクロールバー下 --> <div id="content" class="scroll-x-content" v-scroll.self="onScrollXContent"> <div class="inner-content"> これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。 </div> </div> </div> </template> script export default { methods: { onScrollXTopBar(e) { document.getElementById("content").scrollTo(e.target.scrollLeft, 0); }, onScrollXContent(e) { document.getElementById("topbar").scrollTo(e.target.scrollLeft, 0); }, }, }; style .scroll-x-topbar { overflow-y: hidden; overflow-x: scroll; width: 500px; height: 10px; } .scroll-x-content { overflow-y: hidden; overflow-x: scroll; width: 500px; } .inner-topbar { width: 1000px; height: 1px; } .inner-content { width: 1000px; background-color: lightskyblue; } 参考記事 以下の記事を類似の一例として参考にさせていただきました。ありがとうございました。
