Q&A
cssとして提示されているのがscssのようですが、実際はコンパイル済みcssをリンクされてますか？
現状
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
何卒よろしくお願いいたします。
またお力添えいただきありがとうございます。
ファイル名を変えて両方で試しましたが、特に変わった様子はありませんでした。
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が完全に反映されていない状況です。
連投すみません。
sass => cssに変換？してみたところうまくいきましたが、jsに記述してある
feather.replace()
// https://twitter.com/One_div
が反映されず、アイコンの絵がない状態になりました。
これはそもそも記述すると上述の1.２のエラーにつながってしまうのですが何故なのでしょうか。。。
また、cssだと分量が桁違いに多くなりますが、sassではうまくいく方法はないのでしょうか。
お手元のコード全て提示されないと何とも言えません。
現状でできるのは
1,3はおそらく変数の参照の問題
2はおそらくcssのリンクのさせ方（URL）がおかしい
という「推測」のみです。
>ファイル名を変えて
いえ、scssは所定の手順でコンパイルしないとcssとしては使えません。
アイコンが表示されないのはfontawesomeなどそもそもアイコンをとりこめていないからかもしれません。
cssのリンクのさせ方とは
<link href="css/nav.css" rel="stylesheet" type="text/css" media="all" />
のことでしょうか？
vscodeではそこから対象のcssに飛べるようにはなっていました。
railsではコンパイルが必要ないとの記事を見たのですが、コマンド等必要ということでしょうか。
横からすみません。
CodePenの設定を開いて、「JS」＞「Add External Scripts/Pens」を見ると、JavaScriptのリソースが見れますよ。
または、Details View から Resources でもいいです。
https://unpkg.com/feather-iconsというリソースがありました。
リソースに関して少し調べてみたのですが、これはjsファイルで使えるということですか？
それとも読みこむHTMLファイルに追加などするのでしょうか？
そのURIに移動してみればわかると思いますが、試していないのですか？
大量の文字列のことでしょうか。
レイアウトに関して触れたことがなかったので正直わかりませんでした。
いいえ。
その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エンジニアにとって重要な能力だと思いますので、もう少し鍛えることをおすすめします。
ありがとうございました。
自分で調べてみます。
がんばってください！
ご解決されませんか？
なにかつまづいていることがあれば、コメントしてください。
大変申し訳ありません。解答済みにするのを失念しておりました。
ご解決されて何よりでした！
いつもありがとうございます！
回答1件
0
自己解決
ファイルのパスが間違ってcssファイルが読み込めていないようでした。
お騒がせいたしました。
投稿2021/11/13 03:27
総合スコア22
あなたの回答
tips
プレビュー
