Q&A
ご提示のリンク先を見ましたが、スクリーンショットとは違う感じの表示でした。
「レスポンシブ対応後」のスクリーンショットでは、2行目の「イベント」などが左に合っていますが、リンク先では右に合っていました。これはリンク先の方を見て回答して大丈夫ですか？
実現したいこと
レスポンシブ対応前
レスポンシブ対応後
発生している問題・分からないこと
レスポンシブ対応後でもレスポンシブ対応前と同じような表を作成したのですが、どうしても、黒色の長方形の要素が変わってしまいます、どのようなコードを入力するとレスポンシブ対応前後で同じような表を作成することができるでしょうか。
また、max-width: 821;の際には表の形を他の物にした方がいいのか教えてください、よろしくお願いします。
回答のコードを入力後
リンク内容
該当のソースコード
https://codepen.io/Yg-K-the-typescripter/pen/mdNKdeK
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
marginやpaddingを調整して要素の左端をそろえたが適用されない箇所があり微妙にそろわなくなった。
補足
特になし
vscodeとcode.penで表示が異なってしまっているようなので、リンク先の方をみて回答をお願いします。
もしかして、リンク先、というのは codepen のことではないのかな……？
そうであるならば、コードをご提示ください。
https://prod.liveshare.vsengsaas.visualstudio.com/join?637A4F6CCDA14DDC3BE7ECCE56E3C2CF3BB9
返答遅れてすいません、こちらvscodeのコードでございます。
live share は共同セッション系なのでそれでタイミング不一致するようなこの環境で使うのは無茶では……
やるなら gist とか github とかにソースを上げて確認してもらうとかそっちの方がいいのではないでしょうか……？
（まぁ、codepen で思った感じに動かないならそっちしかない気がしますが。
HTML
<div class="info-table">
<div class="info-boxes"></div><!-- /.info-boxes -->
<div class="item">
<span class="item-time">2023.04.01</span>
<span class="item-ttl">休診情報</span>
<span class="item-txt">2023年4月の休診日は5日、17日、27日となります。</span>
</div>
<div class="item">
<span class="item-time item-time-2">2022.12.24</span>
<span class="item-ttl item-ttl-2">イベント</span>
<span class="item-txt item-txt-2">当院でクリスマスイベントを行います。南高校吹奏楽団をお呼びして、ロビーコンサートを開催予定です。</span>
</div>
<div class="item">
<span class="item-time">2022.12.11</span>
<span class="item-ttl item-ttl-3">採用</span>
<span class="item-txt item-txt-3">当院では臨床検査技師を募集しております。詳しい福利厚生についてご説明させていただきます。当院で働く…</span>
</div>
<div class="item">
<span class="item-time item-time-4">2022.12.11</span>
<span class="item-ttl item-ttl-4">イベント</span>
<span class="item-txt">ホームページをリニューアルしました。</span>
</div>
<div class="cta-btn-txt">すべて見る <i class="fa-solid fa-play"></i></div>
</div><!-- /.info-boxes -->
</div><!-- /.info-table -->
CSS
.info-table {
width: 1180px;
height: 390px;
background-color: #fff;
border-radius: 30px;
margin: 0 1px 113px 1px;
padding: 48px 66px 46px 66px;
}
@media screen and (max-width: 821px) {
.info-table {
width: 100%;
height: auto;
}
.item-ttl {
font-size: 80%;
height: auto;
}
}
.item {
display: flex;
margin: 18px 0;
border-bottom: 2px solid #E7E7E7;
width: 100%;
padding-bottom: 18px;
}
@media screen and (max-width: 821px) {
.item {
align-items: center;
}
}
.item:first-child {
margin-top: 0;
}
.item:last-child {
margin-bottom: 0;
}
.item-time .item-time-4 {
margin-right: 30px;
color: #21A937;
font-size: 16px;
font-weight: bold;
}
@media screen and (max-width: 821px) {
.item-time-4 {
margin-right: 15px;
}
}
.item-ttl {
margin-right: 30px;
background-color: #444444;
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
width: 80px;
height: 25px;
padding: 4px 16px;
display: inline;
flex: none;
}
@media screen and (max-width: 821px) {
.item-ttl-2 {
width: 80px;
height: 25px;
padding-right: 0;
margin-right: 0;
}
.item-ttl-3 {
}
.item-ttl-4 {
margin-left: 0;
}
}
.item-txt {
font-size: 16px;
font-weight: bold;
}
@media screen and (max-width: 821px) {
.item-txt-2 {
}
}
@media screen and (max-width: 821px) {
.item-txt {
font-size: 50%;
}
.item-txt-3 {
}
}
.item:last-child {
margin-bottom: 21px;
}
.item:first-child {
margin-top: 0;
}
.item-time {
font-size: 16px;
font-weight: bold;
color: #21A937;
margin-right: 30px;
}
.item-ttl {
width: 80px;
height: 25px;
background-color: #444444;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 4px 16px;
margin-right: 30px;
display: inline;
}
.item-txt {
font-size: 16px;
font-weight: bold;
color: #444444;
}
.cta-btn-txt {
font-size: 16px;
font-weight: bold;
float: right;
color: #444444;
質問文内に ``` で囲って 書いてください！コメント内に直接ソース書く場合、インデント等に問題があるので質問文等のスタイルの利く場所で書いてください！
https://teratail.com/help#about-markdown
わかりました、ありがとうございます。
回答でも書いていますが、 destyle.css と style.css のどちらが記載されていないのでしょうか？（css として書いていないのはどっちでしょうか？
juner さんはご存じの上であえて質問なさってそうですが、destyle.css はおそらくリセットCSSの一種ですね。結構尖ったリセットの仕方をするので初心者向けではないと思うのですが、なぜこれを選んでしまったのか。
https://nicolas-cusan.github.io/destyle.css/
回答3件
0
つまりこれが足りなかったっということですね。
flex は 全体のサイズによって 拡張/縮小するので は厳密には width の値は見ていない為
拡張:0 縮小:0 ベースサイズ の形式なので flex: 0 0 var(--size); の様な形式で書く必要があります。
下記のソースだと
.item-timeはテキストなので そのサイズ（min-content）に.item-ttlは ブロックなので サイズを指定して固定に
の様になります。これを元にそれぞれの セレクタの項目に追加してください。
css
1.item-time { 2 flex: 0 0 min-content; 3} 4.item-ttl { 5 flex: 0 0 80px; 6}
以上。
参考資料
投稿2024/11/07 07:45
編集2024/11/07 07:47総合スコア754
0
codepen を使う場合は タグが思った様に描画されているか確認してください。基本的に 相対パスで指定する css とかはあきらめて css 欄に書くや style 要素に書いてください。
多分ですけれど、 destyle.css 及び style.css が読み込めていない為それがそのcss に書いたものから外れている為にうまくいっていると思われます。
もしも head 内のタグを書きたいのであれば
右上の Setting から html の head 内の内容の記述項目があるのでこちらから書いてください（相対パスで style を読み込むのは無理なのでどっかから絶対パス等で読み込んでください
投稿2024/11/05 00:27
編集2024/11/05 00:46総合スコア754
解決方法としては、リセットCSSとCSSをもう一度読み直させるという認識で当たっていますでしょうか。
codepen で再現させるには そのcss を css 欄か style要素内に直接記述して、ローカルと同じ順番で適用されているか確認する……ですかね。 あと、 meta は html 欄に書けないので注意が必要です。（設定の方にある
設定方法は回答に追記しました。
https://codepen.io/Yg-K-the-typescripter/pen/mdNKdeK
コードペンのコードを絶対パスで書き直したのですがこれで当たっているでしょうか
file:// はローカルパスなので インターネット上からアクセスできません……。
F12 で ネットワーク から その destyle.css や style.css が読み込めているか確認してください。
それはもう 内容を css 欄に転記するなどした方が早いのでは……？
0
リンク先とスクリーンショットが異なるので、現状の状態がよくわからないですが、私が見た瞬間のCodePenに書かれたコードを前提として回答します。
こうするとどうですか？
css
1.item-ttl { 2 width: 80px; 3 height: 25px; 4 background-color: #444444; 5 color: #fff; 6 font-size: 12px; 7 font-weight: bold; 8 padding: 4px 16px; 9 margin-right: 30px; 10 display: inline; 11 flex: none; /* 追加 */ 12} 13 14@media screen and (max-width: 821px) { 15 .item-ttl-2 { 16 width: 80px; 17 height: 25px; 18 padding-right: 0; 19 margin-right: 0; 20 /* 削除 margin-left: 35px; */ 21 } 22 .item-ttl-3 { 23 /* 削除 margin-left: 35px; */ 24 } 25 .item-ttl-4 { 26 margin-left: 0; 27 } 28} 29 30@media screen and (max-width: 821px) { 31 .item-txt-2 { 32 /* 削除 margin-left: 10px; */ 33 } 34} 35@media screen and (max-width: 821px) { 36 .item-txt { 37 font-size: 50%; 38 } 39 .item-txt-3 { 40 /* 削除 margin-left: 10px; */ 41 } 42} 43
投稿2024/11/01 09:35
総合スコア37683
対応して頂きありがとうございました。
code.penではきれいに表示されていたのですが、vscodeでは表示が崩れたままでした。
vscodeからウェブページを表示した画像を掲載しました。
「リンク先の方をみて回答をお願いします」という話ではなかったですか？
どうみても相対パス指定している style のどちらかが読み込まれていない（css 欄に記載されていないスタイル）のせいでうまくいっている様に見受けられます。
あなたの回答
tips
プレビュー
