質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

1回答

1092閲覧

CSS3 レイアウトの相談

t_suzuki1009

総合スコア28

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2019/06/05 05:30

実現したいこと

画像の横に情報を図のように配置する時、レスポンシブに対応したコーディングは、どのような形が望ましいのかご意見を頂戴したいと思っています。

イメージ説明

名前(年齢)部分はh3タグで、テーマファイルのcssの影響が出ないようにしたい。
スリーサイズ、出勤時間、ショートコメントはリストタグがいいのか、divでp囲みしたほうがいいのか、そのあたりもいろいろな考え方があると思うのでご意見を参考にしたいと考えています。サムネイルはデバイスによって大きくしたり小さくしたりが希望ですが、画像の幅を固定してflexboxで組むのがいいのかなと思っています。画像の幅はブレイクポイントでデバイス毎に振り分けるなどの方法もありなのでしょうか?仮にサムネイルの高さよりも情報がはみ出してしまうことがあっても、コンテンツの枠の高さはグリッドラインに沿って一定にしたいです。リンクは画像にリンクです。

実際にすぐにでも組み込める具体的なソースコードが希望です。

今までは何も考えずdivにクラス振って

どうかよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/06/05 05:33

>実際にすぐにでも組み込める具体的なソースコードが希望です。 これは質問ではなく作業依頼です。「実際にすぐにでも」をお求めでしたら業者に依頼してください。
t_suzuki1009

2019/06/05 05:42

お世話になっております。そうですね。そう受け取られるような書き方をしてしまいましたが、組み方はいろいろあると思いますし、私だったらこうするという考え方を知りたかったんです。 大変失礼致しました。
m.ts10806

2019/06/05 05:43

自身が組まれたコードをもとに自身で解決できないことをアドバイスもらうのが主なので。 そのように質問修正してください
miyabi_takatsuk

2019/06/05 05:48 編集

考え方の回答を求めているなら、具体的なソースコードが希望、って言葉になぜなるのでしょう。 言葉尻をとるとかではなく、その時点で、完全に要件がすげ変わってしまっています。 質問本文は修正可能なので、具体的なソースコードをお求めなら、まず、自身で調べて、ソースコード書いてみて、ここまでやったけど、ここからがどうしてもわからない、という質問にしましょう。
azuapricot

2019/06/05 06:22

実際のソースコードが希望です > このあたりに早くレスポンシブで動くコード書いてよこせやこらっていう思想がにじみ出てますね あなたが書いたコードも何もなしにまず回答者はコードを書けません。 そんなの実装と変わりませんし時間もかかります、めんどくさいです。 しかもレイアウトのアドバイスがほしいなら別にイラストでもいいわけですよね? 質問の書き方が質問をしているというより開発業者に依頼するような書き方なので 出直してきてはいかがでしょうか。
guest

回答1

0

自己解決

皆様のおっしゃる通りです。
自己解決します。
ご気分を悪くされるような記述大変申し訳ありませんでした。以後気を付けます。

投稿2019/06/05 06:27

t_suzuki1009

総合スコア28

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問