常連

注目の的

社会貢献

質問力

自己紹介

【wordpress】ページ下部(フッター内)のトップページに戻るをクリックした時の動きについて

【問題】
パソコン(Windows)だと
下から上(トップ画面)まで移動するように動く。
しかし、iPadやAndroid(スマホ)では
動きが無く、ただトップ画面に
一瞬で変わるのをパソコンと同様の動きとなる様
改善したい。

【改善のため取り組んだ事】
キャッシュのクリアは試したが変化無し

【知りたい事】
①そもそもパソコンと同じ動きが出来るのか
②端末によって同じ動きをしない原因

【補足】
・元々テーマにあったものをそのまま使用しているのでコードやタグをカスタムはしていない
・当方はHTMLやCSS初心者且つ動きのあるものの知見もあまりない

●該当の所っぽいHTML
<a class="back-to-top" href="#page" title="ページトップへ戻る">
<i class="fa fa-angle-double-up wow flash" data-wow-duration="2s" style="/* visibility: visible; *//* animation-duration: 12s; *//* animation-name: flash; */"></i></a>
※ここだけではない可能性有


こちらにするような質問ではなかったら
申し訳ございません。
分かる方がいらしたら
お教え願えると助かります。
よろしくお願い致します。

PCで反映されるがスマホでは反映されない問題

### 以下のコードで h3要素の切り出しは出来ているようです
```ここに言語を入力
import requests
from bs4 import BeautifulSoup

url = 'http://yasumasa.jp/2020/08/21/post_4688.html'
r = requests.get(url)
soup = BeautifulSoup(r.text, 'html.parser')
haikus = soup.select('#center > div > h3')
for haiku in haikus:
    print(haiku)
    txt = haiku.text
    print(txt)
コード
```
### しかし、h3の中身は日本語として認識されていないようです
ターミナルの出力は以下の通りです
![ターミナルに出力は以下の通りです。](d7b6fc9113e236853d94c1da22e68ea1.jpeg)

### デバッグビューの変数txtの値は以下の通りです

txt: 'é°¯é\x9b²å\x80\x8bã\x80\x85ä¸\x80å\x88\x87äº\x8bå\x9c°ä¸\x8aã\x81«ã\x81\x82ã\x82\x8a'

### htmlの文字コードは utf-8と指定されています

### ここをどのようにしたら、h3の中身が正しい日本語として取得できるでしょうか
ご助力お願いいたします。

htmlのh3要素のテキストが日本語として認識されない

こんにちは。
### 実現したいこと
wordpressの投稿記事の本文を、タグを使用して２つに分割して、１ページ内に表示させたいです。

### 現状
本文と一緒にが表示されていて、分割できていません。

### 試したこと
投稿記事の編集画面内で、ブロックとテキストでを分割したいテキストの間に書きました。
signle.php内では下記のようなコードです。
```ここに言語を入力


<?php if(have_posts()):  while ( have_posts() ) : the_post();
  $stars = get_field('sterne');
  $categories = get_relevant_categories(get_the_ID());
  $post = get_post();
  ?>
<div class="post__content" id="hotel__post__desc">
  <?php
   echo get_extended( $post->post_content )['main'];　
  ?>
</div>

<div class="post__second__content">
  <?php
   echo get_extended( $post->post_content )['extended'];　
  ?>
  ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
```


投稿画面のスクリーンショット
![イメージ説明](4824c083037c09d5fa7642bffbd49ead.png)

タグの書き方が間違っているのでしょうか？
英語で調べても get_extendedを使うしか出て来ず、投稿画面内でのタグの書き方は一切ヒットしないので、この書き方で合ってるか判断がつきません。

修正依頼やアドバイスを頂けると幸いです。宜しくお願い致します。

使用しているテーマは => オリジナルテーマ

を使用して投稿の本文を２つに分割したいです。

HTML/CSS程度しか知識のない初心者です。


### 前提・実現したいこと
Googleフォームを自作のHTMLフォームに連携したところ、ファイルアップロードの項目だけ上手く連携ができません。

1.自作フォームで画像ファイルを選択→可能
2.送信クリック後の確認画面→ファイル未選択になっている。が、ここで再度ファイルのアップロードが可能

という状態です。
つまり、自作フォームからの画像アップロードは反映されず、Googleフォーム確認画面上のみでアップロード反映されます。

Googleアカウントでログインした状態での操作です。
テキスト入力など他項目はうまく連携できています。

ファイルのアップロードを自作フォームから直接連携する方法はないでしょうか
教えていただけると大変助かります…


### 該当のソースコード

```            
<input type="file" name="entry.11…省略" id="file">


```

Googleフォームを自作のHTMLフォームに連携した際のファイルアップロードができない

### 前提・実現したいこと

WordPressで固定ページでもヘッダーメニューを押下し他の固定ページへ遷移できるようにしたいです。
### 発生している問題・エラーメッセージ

```
wordpressのヘッダーメニューについて質問です。
プログラミング初心者です。現在wordpressでコーポレートサイトを作成しています。
心当たりが無いのですが(気付かぬうちに)、急にヘッダーメニューが、トップページからは問題無いのですが全固定ページで色がグレーになってしまい押下出来なくなってしまいました。
```

### 該当のソースコード

```ここに言語名を入力
header.phpです。
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package SimClick
*/

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<?php do_action( 'wp_body_open' ); ?>
	
	<div id="page" class="site">
		<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'simclick'  ); ?></a>

		<header id="masthead" class="site-header">
			<div class="wrapper">
				<div class="site-header-main">
					<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>

					<?php get_template_part( 'template-parts/header/site', 'navigation' ); ?>


				</div> 

				 

			</div> 
		</header>

		<div class="below-site-header">

			<div class="site-overlay"><span class="screen-reader-text"><?php esc_html_e( 'Site Overlay', 'simclick'  ); ?></span></div>

			<?php simclick_sections(); ?>

			<div id="content" class="site-content">
				<div class="wrapper">

```

```
site-navigation.phpです。

<?php
/**
 * Primary Menu Template
 *
 * @package SimClick
 */
?>
<div id="site-header-menu" class="site-header-menu">
	<div id="primary-menu-wrapper" class="menu-wrapper">

		<div class="header-overlay"></div>

		<div class="menu-toggle-wrapper">
			<button id="menu-toggle" class="menu-toggle" aria-controls="top-menu" aria-expanded="false">
				<div class="menu-bars">
					<div class="bars bar1"></div>
	  				<div class="bars bar2"></div>
	  				<div class="bars bar3"></div>
  				</div>
				<span class="menu-label"><?php echo esc_html_e( 'Menu', 'simclick'  ); ?></span>
			</button>
		</div>

		<div class="menu-inside-wrapper">
			<?php get_template_part( 'template-parts/header/header', 'navigation' ); ?>
			<div class="mobile-social-search">
				<div class="search-container">
					<?php get_search_form(); ?>
				</div>
				<?php if ( has_nav_menu( 'social' ) ) : ?>
					<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'simclick'  ); ?>">
						<?php
							wp_nav_menu( array(
								'theme_location' => 'social',
								'container'       => 'div',
								'container_class' => 'menu-social-container',
								'link_before'    => '<span class="screen-reader-text">',
								'link_after'     => '</span>',
								'depth'          => 1,
							) );
						?>
					</nav>
				<?php endif; ?>
			</div>
		</div>
	</div>
</div>


<div class="social-search-wrapper">

	<?php get_template_part( 'template-parts/header/social', 'header' ); ?>

	<div class="search-social-container">
		<div id="primary-search-wrapper" class="menu-wrapper">
			<div class="menu-toggle-wrapper">
				<button id="social-search-toggle" class="menu-toggle">
					<span class="menu-label screen-reader-text"><?php echo esc_html_e( 'Search', 'simclick'  ); ?></span>
				</button>
			</div>

			<div class="menu-inside-wrapper">
				<div class="search-container">
					<?php get_Search_form(); ?>
				</div>
			</div>
		</div>


	</div> 
</div>


```

### 補足情報（FW/ツールのバージョンなど）
テーマはsimclickです。
よろしくお願いします。

WordPressのヘッダーメニューの色がグレーになって押下できなくなりました。

よろしくお願いいたします。

WordPressで作ったサイトデザインを新しくしたのですが、
ブラウザのタブに表示される名前が先日までは固定ページ名になっていたのですが、
おそらくall in one seoを最新にしたタイミングで、全タブ同じ名前になってしまいました。

### 現在のタブ名
下記がすべてのサイトに表示されてしまう
> ううううう｜えええええ

この設定がどこでされているか見当たらず。


### やりたいこと
固定ページの投稿名とサイトのタイトルをタブに表示したい

> 固定ページ名｜サイトのタイトル

### 確認したこと
設定＞一般のサイトのタイトル・キャッチフレーズを設定

> サイトのタイトル：あいうえお
> キャッチフレーズ：かきくけこ


### htmlのtitleソースコード
当然ですが、タブと一致しているためすべて同じになっていました


### all in one seo

下記サイトを参考に設定
https://azuki-rinrin.com/wordpress-all-in-one-seo-pack/

恐れ入りますが不足ございましたら追加したいと思いますので、ご協力をいただけますと幸いです。

WordPress ブラウザタブに表示する名前

MW WP FORMを利用して、問い合わせフォームを作成しています。

実画面で、エラー表示確認のため、
わざと必須項目を無視して、「確認画面へ」ボタンをクリックしてみると、
エラーメッセージが表示されません。

バリデーションは機能しているのか、
確認画面へ進むことはないのですが、エラーメッセージが表示されていないため、
ただのバグのようにユーザーは受け取ってしまいそうです。

また、リロードするとエラーメッセージが表示されます。
この現象は、mac win iPhone Androidのデバイス全てで確認できます。

考えられる原因を教えて欲しいです。よろしくお願いします。

Word Press - MW WP FORMでエラーメッセージが出ない

はじめまして、２度目の投稿です。
システムエンジニアの皆様のお力をお貸しいただければと思いご質問させていただきます＊
どうぞよろしくお願いいたします。

❁困っていること
Worpressの投稿ページ（固定ページ）にブログ記事が一切表示されず白紙状態になってしまっています。
Wordpressでは勝手にブログ記事の固定ページに表示されるものだとばかり思っていたのですが、表示されず現状テーマで組み込んでいる形です。

現状は自分で投稿リストを組み込まなければ、真っ白な状態でブログ以外に何も表示されません、、、


❁自分で試してみたこと
・キャッシュを削除
┗何かキャッシュが関係しているのかと思い削除しましたが改善されませんでした
・ワードプレスの設定を確認
┗固定ページ「ブログ」を投稿ページとされていることを確認
・同じくワードプレスの使用しているテーマでも確認
┗固定ページ「ブログ」が投稿ページとして設定されていました
・阻害しているプラグインがないか確認
┗テーマとの相性が悪いプラグインやキャッシュ関係などあるかどうか調べましたがありませんでした...

調べて表示されていたことはすべて試したのですが改善されず、
みなさまの中でもし分かりますという方がいらっしゃいましたら
お伝えいただければ嬉しいです。

お忙しいところお手数おかけします。
よろしくお願いいたします。

Wordpressの投稿画面にブログ記事が一切表示されず困っております。

### 前提・実現したいこと
初めて質問させていただきます。
htmlとcssでヘッダーの作成をしているのですが、header2という大枠の中に4つの要素を入れ込み、うまく調整しようとしていたのですが、最後の4つ目の要素のところで検索マークのアイコンと文字が横並びになっているので、そこの中でもdivでくくったのですが、その時にhoverの効く範囲が右端まで到達しませ。そこで右端いっぱいにhoverが効くように実現したいと考えています。



### 発生している問題・エラーメッセージ

```
html
<div class="header2">
                <div class="header2_1">
                    <div class="header2_line1">
                        <a href="#">ロケーション<br><span>行き先はどちらですか？</span></a>
                    </div>
                </div>
                <div class="header2_2">
                    <div class="header2_line2">
                        <a href="#">チェックイン<br><span>日時を入力</span></a>
                    </div>
                </div>
                <div class="header2_3">
                    <div class="header2_line3">
                        <a href="#">チェックアウト<br><span>日時を入力</span></a>
                    </div>
                </div>
                <div class="header2_4">
                    <div class="header2_4_con">
                        <a href="#">人数<br><span>ゲスト数を入力</span><i class="fas fa-search"></i></a>  
                    </div>
                </div>
            </div>
```

### 該当のソースコード

```css
.header2{
    background-color: #fff;
    width: 850px;
    margin: 40px auto 0 auto;
    border-radius: 32px;
    height: 65px;
    display: flex;
}
.header2 a{
    color: black;
    display: block;
    font-size: 12px;
    font-weight: bolder;
    border-radius: 32px;
}
.header2 div p{
    color: #e8e8e8;
    font-weight: bolder;
}
.header2 span{
    font-size: 14px;
    color: #717171;
    font-weight: lighter;
}
.header2_1 a{
    padding: 14px 80px 14px 32px;
}
.header2_2 a{
    padding: 14px 70px 14px 32px;
}
.header2_3 a{
    padding: 14px 60px 14px 32px;
}
.header2_4 a{
    padding: 14px 91px 14px 32px;
}
.header2_line1{
    height: 32px;
    position: relative;
}
.header2_line1::after{
    content: "";
    border-right: 1px solid #ddd;
    height: 32px;
    margin-top: 14px;
    position: absolute;
    top: 0;
    right: 0;
}
.header2_line2{
    height: 32px;
    position: relative;
}
.header2_line2::after{
    content: "";
    border-right: 1px solid #ddd;
    height: 32px;
    margin-top: 14px;
    position: absolute;
    top: 0;
    right: 0;
}
.header2_line3{
    height: 32px;
    position: relative;
}
.header2_line3::after{
    content: "";
    border-right: 1px solid #ddd;
    height: 32px;
    margin-top: 14px;
    position: absolute;
    top: 0;
    right: 0;
}
.header2_4_con{
    display: flex;
    position: relative;
    align-items: center;
    padding-right: 10px;
}
.header2_4 i{
    color: white;
    padding: 15px;
    font-size: 18px;
    background-color: #FF385D;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}
.header2 a:hover{
    background-color: #ddd;
}
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。![イメージ説明](6c6632721a395a24b0f3db3e1ef5ec5b.png)

cssでhoverの範囲を横幅いっぱいにしたいです。

### 前提・実現したいこと



ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

・CSSのfloatをかけている文字を右上に持っていきたい。

### 発生している問題・エラーメッセージ

```
右にはいってるものの上に行かないでそのままの状態になってしまっている。
```

### 該当のソースコード

```ここに言語名を入力
HTML、CSS
```

### 試したこと

ここに問題に対して試したことを記載してください。![![イメージ説明]
![イメージ説明](1c2f5a8d81e2bf5adb8bcf3e45d677b5.png)

・上記のように右にはいくものの、上にはいってくれない
・今現在HTML li要素にかけているCSSは
list-style:none;
float:right;　のみ


### 補足情報（FW/ツールのバージョンなど）
初心者で、初歩的な質問かもしれませんが、分かる方いらっしゃいましたら
ご回答いただければ幸いです。


ここにより詳細な情報を記載してください。

cssのfloatがうまくいかない

スマホ幅で見た時にヘッダーを固定したいのですが、うまくできません。
position:fixed;やz-indexなどを使うことはわかるのですが、要素が消えてしまったりページトップのボーダー線が消えたりして、うまくいきません。
もし、ヘッダー固定の方法が分かりましたら教えていただけますと助かります。
よろしくお願いいたします。

```HTML
<header class="header" id="header">
    <div class="header_border"></div>
    <div class="container">
      <div class="header_logo">
        <a href="index.html"><img src="./img/header-logo.png" alt=""></a>
      </div>
    </div>
</header>
```

```SCSS
.header{
  .header_border{
    height: 8px;
    background-color: #d8d8d8;
    background-image:
    repeating-linear-gradient(-45deg,
    #efefef, #efefef 5px,
    transparent 0, transparent 10px);
  }
  .container{
    background: #fff;
    .header_logo{
      img{
        height: 35px;
        width: auto;
        padding: 22px 0 6px;
      }
    }
  }
}

/* メディアクエリ（スマホ） */
@media(max-width:768px){
  html{
    font-size: 14px;
  }

  body{
    line-height: 1.7;
  }

  .container{
    max-width: 768px;
    margin: 0 auto;
    padding: 0 4%;
  }

  /* header */
  .header{
    height: 60px;
    .header_logo{
      height: 52px;
      img{
        width: 130px;
        height: auto;
        position: absolute;
        top: 0;
      }
    }
  }
```

ヘッダーをうまく固定できません

### 前提・実現したいこと

htmlとcssでリストを作っているのですが、どうしても崩れてしまいます。対処方法を教えていただけると幸いです。初めての質問なのでうまくお伝えすることが出来ていないかもしれませんがお力添えをお願いします。
### 発生している問題・エラーメッセージ
リストが崩れる
```
エラーメッセージ
```
なし
### 該当のソースコード

```ここに言語名を入力
ソースコード![イメージ![イメージ説明](86afaa554eb2c757ccdd3e633bf13cae.png)説明]
```

### 試したこと

・line-heightで行間を揃えようとした

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

リストの崩れについて

レスポンシブした時に画像サイズを徐々に小さくしたいのですが、なりません。。
どこがおかしいのかわからないので、教えていただけると幸いです。

```HTML
<div class="popular">
  <div class="container">
    <img class="catch-icon" src="./img/title-popular.png" alt="">
    <div class="popular_contents">
      <div class="popular_content">
        <div class="popular_content_left">
          <img src="./img/popular-photo1.png" alt="" class="popular_content_left_img">
        </div>
        <div class="popular_content_right">
          <h3 class="popular_content_right_title">
            カフェめぐり3年間、まじめなコーヒーと素朴なスイーツに行き着いた
          </h3>
          <p class="popular_content_right_text">
            ほどよい苦味が心地よいコーヒーと、卵の味が濃いドーナッツ。素朴で実直な味で繰り返し立ち寄りたくなるこのお店は、カフェ巡りが趣味だった店主の哲学から生まれました。
          </p>
          <p class="popular_content_right_info">
            東京／Japan
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
```

```CSS
/* Popular */
.popular{
  .catch-icon{
    padding-top: 30px;
  }
  .popular_contents{
    padding-bottom: 120px;
    .popular_content{
      display: flex;
      align-items: center;
      border-top: 1px solid #d8d8d8;
      &:last-child{
        border-bottom: 1px solid #d8d8d8;
      }
      .popular_content_left{
        padding: 5px 15px 5px 0;
        .popular_content_left_img{
          flex: 0 0 30%;
          position: relative;
          vertical-align: bottom;
        }
      }
      .popular_content_right{
        .popular_content_right_title{
          font-size: 1.25rem;
          font-weight: normal;
        }
        .popular_content_right_text{
          font-size: 0.875rem;
          padding: 10px 0 13px;
        }
        .popular_content_right_info{
          font-size: 0.75rem;
          &::before{
            font-family: "Font Awesome 5 Free";
            font-weight: bold;
            content: "\f3c5";
            color: #73CBD6;
          }
        }
      }
    }
  }
} 

  /* レスポンシブ */
@media(max-width:768px){
  html{
    font-size: 14px;
  }

  body{
    line-height: 1.7;
  }

  .container{
    max-width: 768px;
    margin: 0 auto;
    padding: 0 4%;
  }

  .popular{
    .popular_content_right{
      .popular_content_right_text{
        display: none;
      }
    }
  } 
}
```

レスポンシブした時に画像の大きさが変わらないが、どこがおかしいのかわからない

### 前提・実現したいこと

Ruby on Railsでwebアプリを作っています。

ボタンを押下した時に跳ねるようなアニメーションを実装中に以下の問題が発生しました。

### 発生している問題

```
イベントが何も起こりません。
```

### 該当のソースコード

```view
<td class="sympathy-btn"><%= render "public/sympathies/sympathy-btn", post: post %><div class="shadow"></div></td>

部分テンプレート
<% if post.sympathied_by?(current_customer) %>
  <%= link_to post_sympathies_path(post), method: :delete, remote: true, class: "expand" do %>
    <%= image_tag("sympathy.jpeg", size:"20x20") %>
  <% end %>
  <%= post.sympathies.count %>
<% else %>
  <%= link_to post_sympathies_path(post), method: :post, remote: true, class: "expand" do %>
    <%= image_tag("sympathy.jpeg", size:"20x20") %>
  <% end %>
  <%= post.sympathies.count %>
<% end %>
```
```scss
.sympathy-btn .cheer-btn {
  font-family: Source Sans Pro;
  font-size: 1rem;
  line-height: 3.5em;
  padding: 0 1.5em;
  background: gold;
  box-shadow: inset 0 -.125rem rgba(0,0,0,.2);
  color: black;
  border-radius: 5em;
  cursor: pointer;
  user-select: none;
  transform-origin: 100% 100%;

  &:focus { outline: 0; }
}
.shadow {
  margin-top: -.325rem;
  width: 100%;
  height: .75rem;
  background: radial-gradient(closest-side, gainsboro, transparent);
  opacity: 0;
}
```
```js
$("sympathy-btn").mousedown(function(){
  console.log("test")
  // マウスのボタンが押されたときに発生するイベント
  // 同じようなイベントとしてマウスが押されて離されたときに発生する click イベントがある
  $(this).html("sympathy.jpeg").velocity({
    // velocity:jQueryのプラグイン。高機能で非常に軽快なアニメーションをする。
    backgroundColorRed : "0",
    translateY: "-1.5rem",
    rotateZ: "-10deg"
  }, 100, "easeOut").velocity({
    rotateZ: "8deg",
  }, 150).velocity({
    translateY: "0",
    rotateZ: "0"
  }, 600, "easeOutBounce");

  $("+ .shadow", this).velocity({
    scale: "1.3",
    opacity: "1"
  }, 150).velocity("reverse", 600, "easeOutBounce");

});

$("cheer-btn").mousedown(function(){
  $(this).html("Recommended").velocity({
    backgroundColorRed : "0",
    translateY: "-1.5rem",
    rotateZ: "-10deg"
  }, 100, "easeOut").velocity({
    rotateZ: "8deg",
  }, 150).velocity({
    translateY: "0",
    rotateZ: "0"
  }, 600, "easeOutBounce");

  $("+ .shadow", this).velocity({
    scale: "1.3",
    opacity: "1"
  }, 150).velocity("reverse", 600, "easeOutBounce");

});
```

### 試したこと

https://deshinon.com/2019/03/02/omosiro-sugoi-button-css/
上記のサイトのぴょこんとするボタンを参考にしました。
```html
<figure>
  <button>Recommend</button>
  <div class="shadow"></div>
</figure>
```
```scss
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);

* {
  box-sizing: border-box;
  margin: 0;
  border: 0;
}

html, body { height: 100%; }
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: whitesmoke;
}

button {
  font-family: Source Sans Pro;
  font-size: 1rem;
  line-height: 3.5em;
  padding: 0 1.5em;
  background: gold;
  box-shadow: inset 0 -.125rem rgba(0,0,0,.2);
  color: black;
  border-radius: 5em;
  cursor: pointer;
  user-select: none;
  transform-origin: 100% 100%;
  
  &:focus { outline: 0; }
}

.shadow {
  margin-top: -.325rem;
  width: 100%;
  height: .75rem;
  background: radial-gradient(closest-side, gainsboro, transparent);
  opacity: 0;
}
```
```js
$("button").mousedown(function(){
  $(this).html("Recommended").velocity({
    backgroundColorRed : "0",
    translateY: "-1.5rem",
    rotateZ: "-10deg"
  }, 100, "easeOut").velocity({
    rotateZ: "8deg",
  }, 150).velocity({
    translateY: "0",
    rotateZ: "0"
  }, 600, "easeOutBounce");
  
  $("+ .shadow", this).velocity({
    scale: "1.3",
    opacity: "1"
  }, 150).velocity("reverse", 600, "easeOutBounce");

});
```
html（）中に何を入れたらいいのかわからなかったので、imageををのまま入れても効果がありませんでした。
console.logをデベロッパーツールで確認してみましたが、来ていませんでした。

### 補足情報（FW/ツールのバージョンなど）
cloud9
rails version 5.2.6

ボタンのアニメーションが発火しません

#分からない事
下記の画像のように画像の右上に文字を重ねています。![](f28c9cf6a559fca9fa4cee2570090e3d.png)]

しかしレスポンシブ対応するとズレてしまいます。
固定する方法などはありますでしょうか。
ご教授頂けないでしょうか。
何卒よろしくお願い致します。


```erb
<div class="introduction">
  <img class="introduction-img" src="assets/photo1.jpg">
  <h1>一生の思い出を。忘れられない旅を。</h1>
</div>
```

```scss
.introduction {
    position: relative;
    .introduction-img {
      height: 70%;
      width: 70%;
    }
    h1 {
      position: absolute;
      top: 9%;
      left: 17%;
    }
  }

@media screen and (max-width: 559px) {

}
```

画像の上に文字を重ねてレスポンシブ対応しても崩れないようにしたいです

### 前提・実現したいこと


作成したWEBサイトがChromeで表示されるが、Safariでは表示されないので表示されるようにしたい
Safariでのみ表示がされない原因を推測でいいので教えていただけないでしょうか。


・VS codeを利用してWEBサイトを作成
・全７ページ
・それぞれPCサイズ用とスマホサイズ用のページを作成。そのため合計１４ページのWEBサイトです
・Chromeを使うと全ページ問題なく表示されます
・しかし、Safariの場合全７ページの内、１ページのスマホサイズ用のみ表示されず、「ページを開けません」と出ます

・cssやJavaScriptだけ反映されないのではなく、htmlも含めて反映されていません。
・Chromeでは１４ページ全てが問題なく表示されますが、Safariの場合１３ページは問題なく表示され、特定のページのスマホサイズ用ページのみ表示されません

・Mac OS バージョン１１.２１を使用しています



### 発生している問題・エラーメッセージ

```
エラーメッセージ　「ページを開けません」
```

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

画像のファイル名を日本語からローマ字表記に変えた

### 補足情報（FW/ツールのバージョンなど）

作成したWEBサイトがChromeで表示されるが、Safariでは表示されないので表示されるようにしたい

フォントオーサムのランディングページが開いても**HTML**のままでＣＳＳが活用されていません。

色々、触ったところ、アイコンをクリックしても反応しませんのでアイコンがコピーできません。

ですので、**bootstrapでのアイコンのコードをコピー**が出来ません。
[リンク内容](https://fontawesome.com/community/leaderboard/new)

とにかく最初は普通の画面に表示されるのですが数秒で文字だけのページに変わります。

表示したら何か設定をしないとダメなのでしょうか？

もし、この**HTML状態でも使えればその方法を教えてもらいたいです。**

```

さっぱり分かりません。

パソコンに問題があるのでしょうか、モデルとしては**１０年落ちぐらい**はしています。

フォントオーサムの使い方

### 前提・実現したいこと

JavaScriptでモーダルウィンドウを作成しました
下のコードで開くボタンを押すと閉じるのウィンドウが上から降りてくるのですが
閉じるを押したときにその位置からアニメーションを始めて欲しい

### 発生している問題
閉じるを押すと閉じるの位置ではなくその下の方からアニメーションが始まってしまう

### 該当のソースコード

```html
<style>
  div {
    cursor: pointer;
    background: #fff;
    width: 200px;
    border: 1px solid #000;
    border-radius: 4px;
    text-align: center;
    padding: 12px 0;
    margin:  50px auto;
  }

  #open {
  }
  
  #close {
    transition: transform 2s;
  }
  
  #open.hideO {
    display: none;
  }

  #close.hideC {
    transform: translateY(-300px);
  }
</style>

<div id="open">開く</div>

<div id="close" class="hideC">閉じる</div>

<script>
  'use strict';
  {
    const open = document.getElementById('open');
    const close = document.getElementById('close');

    open.addEventListener('click', () => {
      open.classList.add('hideO');
      close.classList.remove('hideC');
    });

    close.addEventListener('click', () => {
      open.classList.remove('hideO');
      close.classList.add('hideC');
    });
  }
</script>
```

CSSのアニメーション効果

ラジオボタンのチェックありなしでdiv要素の表示非表示を切り替える処理の作成がうまくできず、お力を貸していただけると幸いです。

[参考サイト](https://pisuke-code.com/css-show-elem-when-checked/)を元に、ラジオボタンのチェックで表示非表示を作成しましたが、
以下のコーディングの場合、チェックを入れてもHTML側の表示が非表示のままになってしまいます。

```HTML
※１で2つのラジオボタンを作り、ラジオ２がチェックされると※２のdiv要素を表示したい
※１
<div class="mn_box_03">
    <div>
        <input type="radio" id="01A" name="radio01">
        <label for="01A" class="radio01">ラジオ</label>
    </div>
    <div>
        <input type="radio" id="01B" name="radio01" class="chk">
        <label for="01B" class="radio01">ラジオ２</label>
    </div>
</div>

※２
<div class="disp">
    <div class="mn_box_03r">
        @foreach ($list as $item)
            <input type="checkbox" id="{{ $item->name}}" name="checkbox001" checked="checked">
            <label for="{{ $item->name}}" class="checkbox001">{{ $item->name}}</label>
        @endforeach
    </div>
</div>
```

```CSS
.disp{ 
  display: none;
}
input.chk:checked ~ .disp{
  display: block;
}
```

ラジオボタンのチェックで要素の表示非表示を切り替える

### 前提・実現したいこと

CSSでブロック要素にサイズ（height）を指定してデベロッパーツールで確認したところ、
親要素よりも子要素の方がサイズが大きくなるという現象が発生しました。
親要素にサイズ（height）の指定をすれば、
子要素は親のサイズに収まるように表示されると思っていたのですが、
なぜこのような現象が発生するのでしょうか？

### 該当のソースコード

```HTML
<div class="top-img">
  <figure>
    <img src="img/mainvisual.jpg" alt="トップ画像">
  </figure>
</div>
```

```CSS
*{
  box-sizing: border-box;
}
.top-img{
  height: 600px;
  width: auto;
}
```

### 試したこと
"img/mainvisual.jpg"の画像サイズは、1920x1280です。
このとき、各要素の高さは以下のとおりとなり、親より子のサイズが大きくなり、
その以降に記述している要素（上記ソースコードでは割愛）と重なり合うような表示となっていました。

div(top-img) : 600px
figure           : 1287.11px
img              : 1280px