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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

0回答

258閲覧

nuxt.js要素の位置の指定

TAIniko

総合スコア32

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2019/04/20 03:10

vue

1<template> 2 <div> 3 <div class="container"> 4 <div class="wrap"> 5 <nuxt-link to="#"> 6 <a href="#"> 7 <div class="triangle1" /> 8 <div class="text1"> 9 top 10 </div> 11 </a> 12 </nuxt-link> 13 </div> 14 15 <div class="wrap"> 16 <nuxt-link to="/about"> 17 <a href="#"> 18 <div class="triangle2" /> 19 <div class="text2"> 20 about 21 </div> 22 </a> 23 </nuxt-link> 24 </div> 25 26 <div class="wrap"> 27 <nuxt-link to="/languages"> 28 <a href="#"> 29 <div class="triangle1" /> 30 <div class="text1"> 31 languages 32 </div> 33 </a> 34 </nuxt-link> 35 </div> 36 37 <div class="wrap"> 38 <nuxt-link to="frameworks"> 39 <a href="#"> 40 <div class="triangle2" /> 41 <div class="text2"> 42 frameworks 43 </div> 44 </a> 45 </nuxt-link> 46 </div> 47 48 <div class="wrap"> 49 <nuxt-link to="works"> 50 <a href="#"> 51 <div class="triangle1" /> 52 <div class="text1"> 53 works 54 </div> 55 </a> 56 </nuxt-link> 57 </div> 58 59 <div class="wrap"> 60 <nuxt-link to="contacts"> 61 <a href="#"> 62 <div class="triangle2" /> 63 <div class="text2"> 64 contacts 65 </div> 66 </a> 67 </nuxt-link> 68 </div> 69 </div> 70 <div id="btn-wrapper"> 71 <a 72 href="#" 73 target="_blank" 74 rel="noopener noreferrer" 75 aria-label="Share on twitter" 76 > 77 <div class="twitter fa fa-twitter" /> 78 </a> 79 <a 80 href="#" 81 target="_blank" 82 rel="noopener noreferrer" 83 aria-label="Share on Facebook" 84 > 85 <div class="facebook fa fa-facebook" /></a> 86 </div> 87 </div> 88</template> 89 90<script> 91export default{ 92} 93 94</script> 95 96<style> 97@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); 98.container{ 99 display:flex; 100 width:100%; 101 justify-content: center; 102 position: absolute; 103 top: 50%; 104 left: 50%; 105 transform: translate(-50%, -50%); 106} 107 108.wrap { 109 -webkit-transform: translateY(-500%); 110 -ms-transform: translateY(-500%); 111 transform: translateY(-500%); 112} 113 114/*三角形1*/ 115.triangle1{ 116 border-top: 86.6025px solid rgb(230,0,18,0.6); 117 border-right: 50px solid transparent; 118 border-left: 50px solid transparent; 119 display: block; 120 transition-duration: 0.3s; 121} 122 123/*hover時アニメーション*/ 124a:hover .triangle1{ 125 transform: scale(1.2); 126 transition-duration: 0.3s; 127 display: block; 128} 129 130/*三角形2*/ 131.triangle2{ 132 border-right: 50px solid transparent; 133 border-bottom: 86.6025px solid rgb(76,175,80,0.6); 134 border-left: 50px solid transparent; 135} 136 137/*hover時アニメーション*/ 138a:hover .triangle2{ 139 transform: scale(1.2); 140 transition-duration: 0.3s; 141} 142 143/*三角形の中に表示する文字*/ 144.text1 { 145 position: absolute; 146 top: 0; 147 right: 0; 148 bottom: 0; 149 left: 0; 150 margin: auto; 151 text-align: center; 152 display: none; 153 height:80%; 154 color:black; 155 opacity: 0.7; 156 font-size:20px; 157} 158 159.text2{ 160 position: absolute; 161 top: 0; 162 right: 0; 163 bottom: 0; 164 left: 0; 165 margin: auto; 166 text-align: center; 167 display: none; 168 height:0%; 169 color:black; 170 opacity: 0.7; 171 font-size: 20px; 172} 173 174/*textに対するhoverアニメーション*/ 175a:hover .triangle1 ~ .text1,a:hover .triangle2 ~ .text1{ 176display:block; 177transition:0.3s; 178} 179 180a:hover .triangle1 ~ .text2,a:hover .triangle2 ~ .text2{ 181display:block; 182transition:0.3s; 183} 184 185/*アニメーション設定*/ 186.wrap:nth-child(1) { 187 -webkit-animation: example 1.0s ease 0.2s 1 forwards; 188 animation: example 1.0s ease 0.2s 1 forwards; } 189 190.wrap:nth-child(2) { 191 -webkit-animation: example 1.0s ease 0.5s 1 forwards; 192 animation: example 1.0s ease 0.5s 1 forwards; } 193 194.wrap:nth-child(3) { 195 -webkit-animation: example 1.0s ease 0.2s 1 forwards; 196 animation: example 1.0s ease 0.2s 1 forwards; } 197 198.wrap:nth-child(4) { 199 -webkit-animation: example 1.0s ease 0.5s 1 forwards; 200 animation: example 1.0s ease 0.5s 1 forwards; } 201 202.wrap:nth-child(5) { 203 -webkit-animation: example 1.0s ease 0.2s 1 forwards; 204 animation: example 1.0s ease 0.2s 1 forwards; } 205 206.wrap:nth-child(6) { 207 -webkit-animation: example 1.0s ease 0.5s 1 forwards; 208 animation: example 1.0s ease 0.5s 1 forwards; } 209 210@-webkit-keyframes example { 211 100% { 212 opacity: 1; 213 -webkit-transform: translateY(0); 214 -ms-transform: translateY(0); 215 transform: translateY(0); } } 216@keyframes example { 217 100% { 218 opacity: 1; 219 -webkit-transform: translateY(0); 220 -ms-transform: translateY(0); 221 transform: translateY(0); } 222 } 223 .facebook { 224 color: #3b5998; 225 margin-right: 10px; 226 font-size:50px; 227} 228.twitter{ 229 color: #55acee; 230 font-size:50px; 231} 232</style>

twitterとfacebookのアイコンを三角形のアニメーションの下に表示させたいのですが要素で区切ったらできると思ったのですができません。
ほかのやり方を教えてください。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問