回答受付が終了しました

HTML5とCSSで 添付のようなものを作成したいのです。 作れるのでしょうか。 作れるけれど図を貼り付ける方が主流なのでしょうか

画像

HTML、CSS | ホームページ作成86閲覧xmlns="http://www.w3.org/2000/svg">25

回答(3件)

0

改造して正常に表示できなくなっても そちら様の責任であり、当方は一切 関知しません。 CSSデモ/Nav_Item_Arrow http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+000001EC&tsn+000001EC&bts+2021/09/25%2014%3A42%3A26&

もし フロントエンドをガッツリやりたいなら下記を参考に実際に「実用的なWebページ」を作ってみると良いでしょう。 実用的なWebページ:ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000037&tsn+00000037&bts+2021/03/21%2013%3A55%3A19& (各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。

0

こうゆうのどうやって作るのが正解なんですかね カテゴリーマスターさん達の実装方法を教えてもらいたいところです。 横幅変更に弱い失敗作ですがどうぞ ↓ _html <ul> <li>手順1</li> <li>手順2</li> <li>手順3手順3手順3手順3手順3手順3</li> <li>手順4</li> </ul> _css ul { margin: 1em; display: flex; overflow: hidden; font-size: 16px; } li:nth-child(1) { border-left: 1px solid #878db0; } li { background: #f5e7db; border-top: 1px solid #878db0; border-bottom: 1px solid #878db0; padding: 0.5em 1em 0.5em 2em; position: relative; } li::after { content: " "; position: absolute; right: -0.72em; top: 0; bottom: 0; z-index: 1; margin: auto; width: 1.43em; height: 1.43em; border-top: 1px solid #878db0; border-right: 1px solid #878db0; transform: rotate(45deg); background: #f5e7db; }

0

はい。ドローソフトで画像つくって貼り付けるほうが、遥かに簡単です。

なるほど。 この設定で作成している場合、 ドローソフトでどれくらいの幅でつくればいいんでしょうか body { font-size: 10.3pt; margin: 0 auto 0 auto; max-width: 898px; min-height: 940px; padding: .5em 1.5em 1.5em 1.5em; background-color: #fff; overflow-y: scroll; } @media (max-width: 767px) { body { padding: .5em .5em;