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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

受付中

検索アイコンを押したら検索欄が開くようにしたい

tyosu
tyosu

総合スコア24

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

0回答

0リアクション

0クリップ

171閲覧

投稿2022/06/08 09:02

編集2022/06/09 02:14

現状の状況を画像で説明

イメージ説明

上記の検索のアイコンを押したら

下記の画像のようになってしまう

おそらく検索欄がアイコンの幅しか開いていないです
イメージ説明

理想はこのような動きになります

下記の画像のように検索ボタンを押したら
イメージ説明

こちらのようになるのが理想な状態です
イメージ説明

Slimコード

= form_with url: companies_path, class: :search_form, method: :get, local: true do |f| = image_tag s3_common_url(file_name: 'temp_search.jpg'), id: :header_search_box_logo = f.text_field :free_word, value: @free_word, placeholder: '社名、所在地、キーワード', class: :search_text

CSS

.search_form { display: block; /* これがないと消える*/ position: relative; /* 画像の絶対パス*/ } .search_form:before, .search_text { position: absolute; /* 相対パス*/ top: 0; right: 0; /* 左に置きたい場合はleftにする*/ // width: 48px; /* 全体の丸の大きさ*/ height: 68px; margin: 0; border-radius: 24px; font-size: 16px; /* 虫眼鏡の大きさ*/ } .search_form:before { z-index: 100; line-height: 48px; /* 虫眼鏡マークの高さ*/ background: #65b1e4; color: #FFF; /* 虫眼鏡マークの色*/ text-align: center; /* 虫眼鏡マークがこれがないと左によってしまう*/ top: 9px;/*追加*/ right: 11px;/*追加*/ height: 48px;/*追加*/ } .search_text { opacity: 0; /* これが消えると青色が消える*/ z-index: 200; /* これがないと押せなくなる*/ cursor: pointer; /* カーソルみたいな*/ transition: 0.5s; /* 検索欄が広がるスピード*/ outline: 0; /* 検索欄のボックスの線*/ border: solid 1px #ccc; border-radius: 24px; padding-left: 16px; /* 検索欄のplaceholderの左の隙間*/ } .search_text:focus { opacity: 1; /* これは検索欄の表示の濃さになる*/ width: 30%; /* 検索欄の幅*/ cursor: text; z-index: 1; /* 追加*/ }

解決したいこと

理想の動きになるように実現したく思っています。

どなたか教えていただけますと幸いです。
よろしくお願いいたします。

問題を発見したこと

.header_right このクラスを追加 = form_with url: companies_path, class: :search_form, method: :get, local: true do |f| = image_tag s3_common_url(file_name: 'temp_search.jpg'), id: :header_search_box_logo = f.text_field :free_word, value: @free_word, placeholder: '社名、所在地、キーワード', class: :search_text

こちらの追加したクラスに

display:flex

が付与されていてアイコンの大きさしか開いていませんでした。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。