鹿野壮

マネーフォワード / フロントエンドエンジニア / 九州大学卒 / ウェブ制作 / J…

鹿野壮

マネーフォワード / フロントエンドエンジニア / 九州大学卒 / ウェブ制作 / JavaScriptコードレシピ集の著者 / CSS Nite 2017〜2019ベストセッション / TechFeed公認エキスパート

すぐ使えるXD Tips vol.5 - テキストアニメーションをコーディング編

Adobe XD Advent Calendar 2020の24日目の記事です。 デザイナーの松下 絵梨さんが、Adobe XDを用いてテキストアニメーションをデザインしてくれました。 このデザインをHTML・CSSでコーディングしてみましょう。こういった表現をするには、CSSのbackground-clipプロパティを使うのが便利です。 HTMLコーディングHTMLのコーディングは次のとおりです。pタグにlogoクラスを指定して、CSSスタイルを当てられるようにしてお

鹿野壮

    • すぐ使えるXD Tips vol.2 - インタラクションをコーディング編

      Adobe XD Advent Calendar 2019の10日目の記事です。 Adobe XDが作れるのはあくまで「プロトタイプ」です。ウェブページとして完成させるには、XDで作ったプロトタイプをウェブ技術で動作させる必要があります。本エントリーでは、前日のアドベントカレンダーの記事「すぐ使えるXD Tips vol.1 - ホバーのインタラクションをデザイン編」で作られたインタラクションを、HTML・CSSでウェブページとして実現する方法を解説します。 デザインの確

      鹿野壮

      • ウェブ制作者におすすめしたい、反響が大きかった私のフロントエンド記事まとめ（2018年編）

        こんにちは、ICSの鹿野です。noteに初めて投稿します。 4年前にICSに入社し、ウェブ制作やアプリ開発（主にSPA、ゲーム）を業務で行いつつ、ICS MEDIA、Qiitaで技術発信をしたり、Lynda.comやSchoo、各勉強会でフロントエンドの技術発信を行ってきました。 今回はウェブデザイナー、フロントエンドエンジニア向けに、PV数・SNSのシェア数・将来性の観点からおすすめの技術記事やビデオ授業を紹介します。 CSSCSSの上下中央揃え方法はいくつもあります

        鹿野壮

      すぐ使えるXD Tips vol.5 - テキストアニメーションをコーディング編

      鹿野壮

      • すぐ使えるXD Tips vol.2 - インタラクションをコーディング編

        鹿野壮

      • ウェブ制作者におすすめしたい、反響が大きかった私のフロントエンド記事まとめ（2018年編）

        鹿野壮