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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

866閲覧

レシポンシブ化する際の該当CSSコード(疑似要素)の役割が不明です。

Kiyobun510

総合スコア12

レスポンシブWebデザイン

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/03/07 13:27

編集2020/03/07 13:32

現在このようなLPの模写コーディングをしております。
https://shptomoya.github.io/shiro/

こちらのLPのレスポンシブ化をしているのですがsectionタグの”work arrow_display”クラスに関して記述しているCSSコードの役割がわかりませんのでわかる方教えていただきたいです。
具体的には疑似要素 ::before ::after が絡んでいる部分すべてがわかりません。
プロパティの意味はわかるのですが何のためにこのような指定をするのかわからないです。

検証で実際のLPをみてみるとWorkの下にあるGiftやWeddingがあるスクロールバーの右下に  _\ のような文字が出るのですが、おそらくこの部分に関する記述だということはわかりました。
検証でプロパティの削除や追加などいろいろしているのですがいまいちどんな役割があるのかわからないです。
別にここのコードはなくてもいいんじゃないかとすら思います。
スクロールに関する役割を持っているのだとは思いますが謎です。
ご教授いただければと思います。

こちらが疑問点を含むCSSコードです。

CSS

1 .work { 2 position: relative; 3 padding: 40px 0 24px; 4 } 5 6 .work_contents_wrapper { 7 overflow-x: auto; 8 overflow-y: visible; 9 -webkit-overflow-scrolling: touch; 10 } 11 12 .work_contents_wrapper::-webkit-scrollbar { 13 width: 4px; 14 height: 4px; 15 border-radius: 8px; 16 } 17 18 .work_contents_wrapper::-webkit-scrollbar-thumb { 19 background: rgba(0,0,0,.15); 20 border-radius: 8px; 21 } 22 23 .work_contents_wrapper::-webkit-scrollbar-track { 24 background: rgba(0,0,0,.1); 25 border-radius: 8px; 26 } 27 28 .work_contents { 29 display: inline-flex; 30 flex-direction: row; 31 flex-wrap: nowrap; 32 height: auto; 33 } 34 35 .work_content { 36 width: 80vw; 37 padding-bottom: 40px; 38 } 39 40 .work_content:not(:last-of-type) { 41 margin-right: 24px; 42 } 43 .work::before, 44 .work::after { 45 content: ''; 46 position: absolute; 47 display: block; 48 width: 0; 49 height: 1px; 50 background: #333; 51 } 52 53 .work::before { 54 bottom: 26px; 55 left: 79%; 56 overflow: hidden; 57 transition: .3s ease-in-out; 58 } 59 60 .work::after { 61 bottom: 30px; 62 right: 5%; 63 transform: rotate(45deg); 64 transition: .9s ease-in-out; 65 } 66 67 .arrow_display.work::before { 68 width: 60px; 69 } 70 71 .arrow_display.work::after { 72 width: 10px; 73 } 74 75 .work_content:nth-of-type(2) { 76 margin-top: 0; 77 } 78 79 .work_content_image { 80 height: 200px; 81 margin-bottom: 0; 82 object-fit: cover; 83 } 84 85 .work_image_gift { 86 object-position: 0 75%; 87 } 88 89 .work_image_decoretion { 90 object-position: 0 65%; 91 } 92 93 .work_image_wedding { 94 object-position: 0 60%; 95 }

該当クラスのHTMLも念のため貼らせていただきます。

HTML

1<section class="work arrow_display" id="work"> 2 <div class="u-content-wrapper"> 3 <h2 class="u-heading"><a id="section-work">Work</a></h2> 4 <p id="work_desc" class="u-text">オーダーメイドでのブーケ・アレンジメントのデザインのほか、<br class="u-display_pc"> 5 ウェディングやイベントの装花なども行なっています。<br class="u-display_pc"> 6 一人一人にあったご提案をさせていただきます。</p> 7 <div class="work_contents_wrapper"> 8 <div class="work_contents"> 9 <div class="work_content"> 10 <img class="work_content_image work_image_gift" src="./work_gift/work_gift.png" alt="白い花束の写真"> 11 <h3 class="work_content_heading">Gift</h3> 12 <p class="work_content_text">花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。 13 花言葉などの豆知識もお伝えします。</p> 14 15 </div> 16 <div class="work_content"> 17 <img class="work_content_image work_image_decoretion" src="./work_decoretion/work_decoretion.png" alt="マカロンの写真"> 18 <h3 class="work_content_heading">Decoration</h3> 19 <p class="work_content_text">お写真を彩るお花を一輪から販売。 20 一定期間のご契約で定期的にご自宅へ配送させていただくことも可能です。</p> 21 </div> 22 <div class="work_content"> 23 <img class="work_content_image work_image_wedding" src="./work_wedding/work_wedding.png" alt="白い花束の写真"> 24 <h3 class="work_content_heading">Wedding</h3> 25 <p class="work_content_text">ウエディングドレスに合わせたブーケや式場の雰囲気に合う装花をご提案。 26 お打ち合わせの流れや回数、費用などにつきましてはお問い合わせください。</p> 27 </div> 28 <div class="work_content"> 29 <img class="work_content_image work_image_for_yourself" src="./work_for_yourself/work_for_yourself.png" alt="部屋に白い花が飾られた写真"> 30 <h3 class="work_content_heading">For yourself</h3> 31 <p class="work_content_text">お部屋の雰囲気やライフスタイルをお聞きしてご自宅用の花束をご提案し 32 、少しでも長く咲かせるコツもお教えします。花束に合った花瓶をご提案することも可能です。</p> 33 </div> 34 </div> 35 </div> 36 </div> 37 </section>

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

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

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

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

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

guest

回答1

0

ベストアンサー

スマホ時にスクロールすることを示すための装飾として、矢印を表示したい、という意図だと思われます。
ただし、上記URLだと表示崩れを起こしているようです。

::beforeや::afterは、HTMLのソースコード上に余計な<span><div>などを追加せずに装飾を置くことができるため、その用途でよく使用されます。

(::beforeや::afterといった疑似要素は、JavaScriptでclickやhoverなどのイベントは、確か取得できなかったはずなのでボタンではないと思います。)

投稿2020/03/07 13:49

new1ro

総合スコア4528

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

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

Kiyobun510

2020/03/07 14:59

なるほど!やっと意味が分かりました。つまり” → ”をCSSを使って表示したかったということですね。 表示崩れという発想が出てきませんでした。 大変助かりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問