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

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

新規登録して質問してみよう
ただいま回答率
85.51%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

Q&A

解決済

1回答

802閲覧

codepenを引用する際にレイアウトが崩れる

tomomomo

総合スコア22

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

0グッド

0クリップ

投稿2021/09/28 02:35

現状

codepenを用いてnavvarのレイアウトを整えようと思い、まずはVSCodeでHTML,CSS,JavaScriptを全て貼り付けて動作確認を行いました。

しかし、HTMLにはおそらくbody部分のみが記述されており、headタグが省かれていたためmetaタグなどがわからない状況です。

CSSは読み込んでみても見た目にかなりの差があり、どこに問題があるのかわからない状況です。

検証➡️コンソールを確認しましたが特に不具合は見られませんでした。

該当コード

HTML

1<nav class="navbar"> 2 <ul class="navbar__menu"> 3 <li class="navbar__item"> 4 <a href="#" class="navbar__link"><i data-feather="home"></i><span>Home</span></a> 5 </li> 6 <li class="navbar__item"> 7 <a href="#" class="navbar__link"><i data-feather="message-square"></i><span>Messages</span></a> 8 </li> 9 <li class="navbar__item"> 10 <a href="#" class="navbar__link"><i data-feather="users"></i><span>Customers</span></a> 11 </li> 12 <li class="navbar__item"> 13 <a href="#" class="navbar__link"><i data-feather="folder"></i><span>Projects</span></a> 14 </li> 15 <li class="navbar__item"> 16 <a href="#" class="navbar__link"><i data-feather="archive"></i><span>Resources</span></a> 17 </li> 18 <li class="navbar__item"> 19 <a href="#" class="navbar__link"><i data-feather="help-circle"></i><span>Help</span></a> 20 </li> 21 <li class="navbar__item"> 22 <a href="#" class="navbar__link"><i data-feather="settings"></i><span>Settings</span></a> 23 </li> 24 </ul> 25 </nav>

CSS

1$borderRadius: 10px; 2$spacer: 1rem; 3$primary: #406ff3; 4$text: #6a778e; 5$linkHeight: $spacer * 3.5; 6$timing: 250ms; 7$transition: $timing ease all; 8 9@mixin gooeyEffect($i) { 10 @keyframes gooeyEffect-#{$i} { 11 0% { 12 transform: scale(1, 1); 13 } 14 50% { 15 transform: scale(0.5, 1.5); 16 } 17 100% { 18 transform: scale(1, 1); 19 } 20 } 21} 22@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap'); 23body{ 24 background: #eaeef6; 25 font-family: 'Open Sans', sans-serif; 26} 27.navbar{ 28 $ref: &; 29 position: fixed; 30 top: $spacer; 31 left: $spacer; 32 background: #fff; 33 border-radius: $borderRadius; 34 padding: $spacer 0; 35 box-shadow: 0 0 40px rgba(0,0,0,0.03); 36 height: calc(100vh - #{$spacer*4}); 37 &__link{ 38 position:relative; 39 display: flex; 40 align-items: center; 41 justify-content: center; 42 height: $linkHeight; 43 width: $spacer * 5.5; 44 color: $text; 45 transition: $transition; 46 span{ 47 position: absolute; 48 left: 100%; 49 transform: translate(-($spacer*3)); 50 opacity: 0; 51 color: $primary; 52 background: #fff; 53 padding: $spacer *0.75; 54 transition: $transition; 55 border-radius: $borderRadius * 1.75; 56 } 57 &:hover{ 58 color: #fff; 59 span{ 60 opacity: 1; 61 transform: translate(0); 62 } 63 } 64 } 65 &__menu{ 66 position: relative; 67 } 68 &__item{ 69 &:last-child{ 70 &:before{ 71 content: ''; 72 position: absolute; 73 opacity: 0; 74 z-index: -1; 75 top: 0; 76 left: $spacer; 77 width: $linkHeight; 78 height: $linkHeight; 79 background: $primary; 80 border-radius: $borderRadius * 1.75; 81 transition: $timing cubic-bezier(1, 0.2, 0.1, 1.2) all; 82 83 } 84 } 85 86 @for $i from 1 to 12 { 87 &:first-child:nth-last-child(#{$i}), 88 &:first-child:nth-last-child(#{$i}) ~ li { 89 &:hover { 90 ~ li:last-child:before { 91 opacity: 1; 92 } 93 } 94 &:last-child:hover:before { 95 opacity: 1; 96 } 97 @for $j from 1 to $i { 98 &:nth-child(#{$j}):hover, 99 &:nth-child(#{$j}):focus, 100 &:nth-child(#{$j}):focus-within { 101 ~ li:last-child:before { 102 @include gooeyEffect($j); 103 top: (100% / $i) * ($j - 1); 104 animation: gooeyEffect-#{$j} $timing 1; 105 } 106 } 107 } 108 &:last-child:hover:before, 109 &:last-child:focus:before, 110 &:last-child:focus-within:before { 111 @include gooeyEffect($i); 112 top: (100% / $i) * ($i - 1); 113 animation: gooeyEffect-#{$i} $timing 1; 114 } 115 } 116 } 117 118 } 119 120}

js

1feather.replace() 2//https://twitter.com/One_div

最後に

それぞれのファイル名を
HTML => nav.html
CSS =>nav.css(cssフォルダ直下に作成)
js =>nav.js
としています。
HTMLのheadタグの中に下記の項目のみ追加してみましたが期待通りのレイアウトになりませんでした。

<meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="nav.js"></script> <link href="css/nav.css" rel="stylesheet" type="text/css" media="all" />

実際に実装できた場合のリンクを貼り付けますのでそちらもご確認いただけると助かります。
参考にさせていただいているnavvar

何卒よろしくお願いいたします。

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

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

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

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

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

m.ts10806

2021/09/28 02:39

cssとして提示されているのがscssのようですが、実際はコンパイル済みcssをリンクされてますか?
tomomomo

2021/09/28 08:01

またお力添えいただきありがとうございます。 ファイル名を変えて両方で試しましたが、特に変わった様子はありませんでした。
tomomomo

2021/09/28 08:12

sassに変更してコンソールを確認したところ、以下3つのエラーが確認できました。 1. VM94 nav.js:1 Uncaught ReferenceError: feather is not defined at VM94 nav.js:1 (anonymous) @ VM94 nav.js:1 2. nav.html:1 [Deprecation] CSS cannot be loaded from `file:` URLs unless they end in a `.css` file extension. 3. nav.js:1 Uncaught ReferenceError: feather is not defined at VM94 nav.js:1 (anonymous) @ nav.js:1 jsのことが書かれていますが、動きどうこうの前に見た目が完全に乖離しているのが気になります。 今の状態だとCSSが完全に反映されていない状況です。
tomomomo

2021/09/28 08:34

連投すみません。 sass => cssに変換?してみたところうまくいきましたが、jsに記述してある feather.replace() // https://twitter.com/One_div が反映されず、アイコンの絵がない状態になりました。 これはそもそも記述すると上述の1.2のエラーにつながってしまうのですが何故なのでしょうか。。。 また、cssだと分量が桁違いに多くなりますが、sassではうまくいく方法はないのでしょうか。
m.ts10806

2021/09/28 09:51

お手元のコード全て提示されないと何とも言えません。
m.ts10806

2021/09/28 09:52 編集

現状でできるのは 1,3はおそらく変数の参照の問題 2はおそらくcssのリンクのさせ方(URL)がおかしい という「推測」のみです。
m.ts10806

2021/09/28 09:53 編集

>ファイル名を変えて いえ、scssは所定の手順でコンパイルしないとcssとしては使えません。
tomomomo

2021/09/28 13:55

アイコンが表示されないのはfontawesomeなどそもそもアイコンをとりこめていないからかもしれません。 cssのリンクのさせ方とは <link href="css/nav.css" rel="stylesheet" type="text/css" media="all" /> のことでしょうか? vscodeではそこから対象のcssに飛べるようにはなっていました。
tomomomo

2021/09/28 13:57

railsではコンパイルが必要ないとの記事を見たのですが、コマンド等必要ということでしょうか。
Lhankor_Mhy

2021/09/29 04:24

横からすみません。 CodePenの設定を開いて、「JS」>「Add External Scripts/Pens」を見ると、JavaScriptのリソースが見れますよ。 または、Details View から Resources でもいいです。
Lhankor_Mhy

2021/09/29 05:23

そのURIに移動してみればわかると思いますが、試していないのですか?
tomomomo

2021/09/29 06:17

大量の文字列のことでしょうか。 レイアウトに関して触れたことがなかったので正直わかりませんでした。
Lhankor_Mhy

2021/09/29 06:29

いいえ。 そのURIにアクセスすると、以下のURIにリダイレクトされます。 https://unpkg.com/feather-icons@4.28.0/dist/feather.min.js この、.js とはJavaScriptの拡張子ですので、JavaScriptであることがわかります。 また、このドメインのホーム https://unpkg.com/ に行ってみるとCDNであることがわかると思います。 CDNの使い方がわからないようであれば、ググりましょう。 また、このライブラリの名称がわかったのですから、その名称でググるのもいいと思います。 「feather-icons」でググると以下のページが見つかります。 https://feathericons.com/ 使い方はここに書いてあります。 私も素人なので偉そうなことは言えないですが、「ググり力」はITエンジニアにとって重要な能力だと思いますので、もう少し鍛えることをおすすめします。
tomomomo

2021/09/29 06:33

ありがとうございました。 自分で調べてみます。
Lhankor_Mhy

2021/09/29 07:01

がんばってください!
Lhankor_Mhy

2021/11/13 02:15

ご解決されませんか? なにかつまづいていることがあれば、コメントしてください。
tomomomo

2021/11/13 03:26

大変申し訳ありません。解答済みにするのを失念しておりました。
Lhankor_Mhy

2021/11/13 03:33

ご解決されて何よりでした!
tomomomo

2021/11/13 05:27

いつもありがとうございます!
guest

回答1

0

自己解決

ファイルのパスが間違ってcssファイルが読み込めていないようでした。
お騒がせいたしました。

投稿2021/11/13 03:27

tomomomo

総合スコア22

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問