🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

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

HTML5

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

HTML

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

CSS

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

Q&A

解決済

1回答

1474閲覧

再読み込みするたびに項目が動きます

hanakos

総合スコア0

CSS3

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

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/02/27 22:21

編集2021/02/28 02:34

前提・実現したいこと

イメージ説明
はじめまして。検索してもわからなかったため利用させていただきます。
添付した動画を見ていただいたほうがわかりやすいのですが、再読み込みするたびに消しているリストや虫眼鏡がちらついてしまいます。
また、ホバーした時の動作をもっとゆっくりにしたいのですがアニメーションをつける動作がわかりません。

実現したいこととしましては、
・ページの再読み込みをする度にナビバーの項目が動かないようにしてほしい。
・フォームの虫眼鏡が動かないようにしてほしいが、クリックしたときに動画のようにゆっくり伸びるようにしてほしい。
ホバーした時に0.5秒遅らせて表示が出るようにしたい。

これらをすべてHTMLとCSSで作りたいのですが可能でしょうか。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ind2</title> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/custom.css"> 9</head> 10<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous"> 11<body> 12 <header> 13 <div class="container"> 14 <div class="header__title"> 15 <h1><a href="">Write</a></h1> 16 <p class="name">書くためのテーマ</p> 17 </div> 18 <nav class="header__nav"> 19 <ul class="menu"> 20 <li><a href="" class="after">ホーム</a> 21 <ul> 22 <li><a href="">→カスタマイズ</a></li> 23 </ul> 24 </li> 25 <li><a href="" class="after">ページ</span></a> 26 <ul> 27 <li><a href="">アイキャッチ画像なしのページ</a></li> 28 <li><a href="">ページ(全幅テンプレート)</a></li> 29 </ul> 30 </li> 31 <li><a href="">タイポグラフィー</a></li> 32 <li><a href="">お問い合わせ</a></li> 33 </ul> 34 </nav> 35 <div class="search-list"> 36 <form action=""> 37 <input class="search" name="" type="text" placeholder="検索&hellip;"> 38 </form> 39 </div> 40 </div> 41 </header> 42 <img src="img/cropped-nicole-honeywill-730102-unsplash.jpg"> 43</body> 44</html> 45 46

CSS

1*{box-sizing: border-box} 2 3body{ 4 max-width:1040px; 5 margin: 0 auto; 6 font-family: Georgia, '游明朝', YuMincho, 'Hiragino Mincho ProN', Meiryo, serif; 7 line-height: 1.8; 8} 9 10h1 a{ 11 font-weight: 700; 12 font-size: 36px; 13 line-height: 1.3; 14} 15 16p{font-size: 18px;} 17 18.container{ 19 height: 100px; 20 width: 1040px; 21 margin-top: 50px; 22 margin-bottom: 60px; 23 display: flex; 24 justify-content: space-between; 25} 26 27.header__title{ 28 vertical-align: middle; 29 margin-top: 10px; 30} 31 32 33a{ 34 color: #111111; 35 font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;; 36 text-decoration: none; 37 display: block; 38 line-height: 52px; 39 font-size: 17px; 40 text-align: left; 41 cursor: pointer; 42} 43 44a:hover{ 45color: #c49029; 46} 47 48nav{ 49 padding-top: 40px; 50 margin-left: 156px; 51} 52 53 54ul{ 55 display: flex; 56 list-style: none; 57 padding: 0; 58 margin: 0; 59} 60 61ul.menu li{ 62 padding-right:30px; 63 display: inline-block; 64 list-style-type: none; 65 position:relative; 66} 67 68.after::after{ 69 display: inline-block; 70 font: normal 14px Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif; 71 -webkit-font-smoothing: antialiased; 72 font-family: "Font Awesome 5 Free"; 73 font-weight: 900; 74 content: "\f107"; 75 position: relative; 76 right: -8px; 77 bottom: 1px; 78} 79 80ul.menu ul{ 81 display: none; 82 margin: 0; 83 padding: 0; 84 position:absolute; 85} 86 87ul.menu ul li{ 88 padding: 10px 20px 0px 20px; 89 width: 188px; 90 background-color: #fff; 91 border: solid 1px gray; 92} 93 94ul.menu li:hover ul{ 95 display: block; 96} 97 98.search:focus{ 99 width:200px; 100 height: 34px; 101 border:1px solid #e0e0e0; 102 background-color: white; 103 cursor: text; 104} 105 106.search{ 107 height: 34px; 108 width: 0; 109 background: url(../img/search.jpeg) no-repeat left center ; 110 background-size: 26px; 111 padding-left: 36px; 112 font-size: 16px; 113 border:1px solid #e0e0e0; 114 z-index:5; 115 position: absolute; 116 right:0; 117 top: -5px; 118 outline: none; 119 border: none; 120 cursor: pointer; 121 transition: all 0.5s; 122} 123 124.search-list{ 125 height: 40px; 126 display: inline; 127 float:right; 128 position:relative; 129}

試したこと

初心者なのでどれを試せばいいのかわかりませんでした。

補足情報(FW/ツールのバージョンなど)

Visual Studio Codeのバージョン: 1.52.1を使用しています。
Chromeで動作確認をしています。
[追記]サーバーには繋いでおらず、ローカルのみで動作確認をしていますが関係があるのでしょうか。

以上、よろしくお願いします。

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

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

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

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

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

hanakos

2021/02/28 00:07

修正方法まで丁寧にありがとうございます。 上記の通りにやってみたのですが、CSSの部分だけがプレビューでは入っていたはずなのに質問画面ではそのままの状態になってしまいます。 みづらいですが何卒よろしくお願いします。
m.ts10806

2021/02/28 00:10 編集

質問は編集できます。 今はこうなってませんか? ```html ``````css position:relative; }``` これを改行入れて離してみては。 ```html ``` ```css position:relative; } ```
hanakos

2021/02/28 00:15

まさにその通りでした。ありがとうございます。
meg_

2021/02/28 02:21

> ホバーした時に0.5秒遅らせて表示が出るようにしたい。 上記については検索すればやり方が見つかるかと思いますが見つかりませんでしたか?
hanakos

2021/02/28 02:30

visibilityとopacityとtransitionを使ったやり方でしょうか? 試してみたのですが、虫眼鏡ツールのように更新するたびちらつく現象が起きてしまいます。
meg_

2021/02/28 04:28

transitionで出来るかと思ったのですがダメでしたでしょうか?
hanakos

2021/02/28 04:30

そうですね。出来ませんでした。
meg_

2021/02/28 04:33

> そうですね。出来ませんでした。 「試したこと」に試したコードとその結果を追記されると回答者が回答しやすくなるかと思います。
guest

回答1

0

自己解決

<head>のところに<script src="js/jquery-3.5.1.min.js"></script>を入力することによって、transitionなどで指定した指定した項目のちらつきをなくすことが出来ました。 fontawesomeを入れたところは模写したサイトを確認してみたところどうしても動いてしまうようです。 お騒がせして大変申し訳ありませんでした。

投稿2021/02/28 05:42

hanakos

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問