こんにちは、kz_moritaです。 最近はVue.js / Nuxt.js あたりで Web フロントを書いたりしています。 今回は、ページの最上部からある特定のDOMの位置座標を取得するのにちょっとつまづいたため、そのことについてまとめておきます。 試した方法 以下の二種類の方法を試しました。 HTMLElement.offsetTop Element.getBoundingClientRect().top + window.pageYOffset 結論から言うと、ページの最上部からの位置を取得する仕様は２つ目の方法で実現することができました。 HTMLElement.offetTop HTMLElement.offsetTopの仕様は以下のサイトに詳しく書いています。 https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetTop それでは、offsetTopを使ってページ上部からの位置座標を取得してみます。 以下のコードは各DOMの位置を offsetTop から取得して、各DOMの innerText として表示している例です。 dom1が一番上に配置されているので0 dom2-1は dom1の高さ + dom1,dom2間のmargin + dom2のpadding = 120 + 10 + 10 = 140 となっており、期待通りに正しく動いているように見えます。 offsetTopの問題点 offetTopを取得したい要素の親要素に、 position: relative が指定されていると画面上部からのOffsetを取ることができません。 以下は、 #dom2 { position: relative; } を指定した場合のソースコードです。 dom2-1, dom2-2, dom2-3 の offsetTop が親要素である dom2 からの位置座標になっていることが分かります。 これはdom2に position: relative を指定することで、dom2-1, dom2-2, dom2-3 の offsetParentがdom2になるためです。

こんにちは、@kz_morita です。 最近は、Nuxt.js でもっぱらフロントエンドエンジニアのようなことをしています。 Frontend を開発するにあたり、こちらも neovim で開発したいなぁと思ったため、いろいろと環境構築をしてみました。 前提と要件 開発に用いるのは以下のような技術です。 Nuxt.js Vue.js Stylus Pug Node.js (Express) 要件としては、上記で、シンタックスハイライトされる、ある程度の保管が聞く、保存時に Lint を走らせることができればとりあえずは OK とします。 成果物 先に成果物を。 補完や、シンタックスハイライト、保存時に Formatter もかかるようにしているので、満足しています。 やったこと Neovim と LSP の環境を準備 こちらの記事で解説しているので参考にしてみてください。 本記事での説明は割愛させていただきます。 neovim と LSP で Rust 開発環境をつくったら最高だった話 dein で plugin をインストール 今回入れた plugin は以下の通りです。 https://github.com/posva/vim-vue https://github.com/prettier/vim-prettier https://github.com/leafgarland/typescript-vim https://github.com/vim-syntastic/syntastic https://github.com/mtscout6/syntastic-local-eslint.vim https://github.com/digitaltoad/vim-pug https://github.com/dNitro/vim-pug-complete dein.

こんにちは、kz_moritaです。 普段は iOS エンジニアとして Swift を書いたり、Vue.js / Nuxt.js あたりで Web フロントを書いたりしているエンジニアです。 今回は、CSS の Flexbox を使って以下のような良く見る感じのリストを作ってみます。 先に結論 以下のように書くことで実現できました。 以下順番に説明をしていきます。 なおスタイルは SCSS で書いています。 HTML を用意する まず以下のような HTML を用意します。 <ul> <li> <img src="https://picsum.photos/80/80" class="thumbnail" width="80" height="80" /> <span class="text">テキスト1</span> </li> <li> <img src="https://picsum.photos/80/80" class="thumbnail" width="80" height="80" /> <span class="text" >テキスト2/テキスト2/テキスト2/テキスト2/テキスト2/テキスト2</span > </li> <li> <img src="https://picsum.photos/80/80" class="thumbnail" width="80" height="80" /> <span class="text" >テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/</span > </li> </ul> 表示するともちろん以下のように何も修飾されていない HTML が表示されます。 ここから CSS を当てていきます。

こんにちは、@kz_moritaです。 普段はiOSエンジニアとしてSwiftを書いていて、Swiftはだいたい半年くらいさわっています。 それ以前は、C# でサーバーサイド書いていたり、C++/Cocos2d-xでゲーム開発をしていたりしました。 このブログはレイアウトやデザインを一から実装しているのですが、その中でもリンクをhoverした時のアニメーションをこだわって作ったので今回はその話をしていこうと思います。 おもにCSSアニメーションの話になるかと思いますので興味がある方はぜひこの記事を読んで気軽に試してみてもらえたら嬉しいです。 作るもの https://google.com ↑ のリンクにhoverしてみてください。 ふわっとアンダーラインがアニメーションで表示されたかと思います。 GIFだとこんな感じ。 今回はこれを作っていきます。 成果物 いきなり成果物ですが簡単に実装したものをJSFiddleで公開しましたので参考にしてください。 以下実装の解説的なものをしていきます。 aタグを準備 まずはaタグを準備します。 <a href="https://google.com" class="link-hover">Google</a> のちのち、CSSを当てるためのクラスを link-hover として当てています。 aタグはinline-blockにする まずはaタグに基本となるスタイルを当てていきます。 下のようなCSSを当てます。 (必要最低限のCSSのみを載せています) .link-hover { text-decoration: none; display: inline-block; } 今回アニメーションで表示する下線ですが、 アニメーションさせる関係上、デフォルトの下線ではなくafter擬似要素を利用します。 そのため、text-decoration: none を設定します。 また、inline-block にしないと下線の範囲が正しく設定できないためこちらも必須です。 after擬似要素で下線を再現 以下のCSSでafter擬似要素のスタイリングをします。 線の高さなどを指定していきます。 .link-hover::after { display: block; content: ""; height: 2px; } CSSアニメーション 最後にCSSアニメーションを書いていきます。 今回は横方向に伸縮させるため、widthをアニメーションさせます。 hover前は width: 0% を指定し、hover後は width: 100%を指定します。 そして、CSSアニメーションの transition プロパティでwidthを指定してあげればOKです。 transition {target} {duration} {easing} という形で、秒数やイージングも指定できるのでお好みで指定するといろいろ試せるかと思います。