コーディング10件
-
Lottieでグラデーションを使ってアニメーションを作る裏技2つ
みなさんこんにちは。しゅん（@shun_webdesign）です。 皆さんはLottieをご存知でしょうか？なめらかなアニメーションをサイトに実装でき、手軽にリッチな表現を取り入れることができます。 LottieはAft …
-
Next.jsとReact Three Fiberのポートフォリオを公開するまでの裏側
みなさんこんにちは。しゅん（@shun_webdesign）です。 先日、作成したポートフォリオサイトをSNSで公開しました。 今回は僕が公開したポートフォリオについて紹介していきたいと思います。 ※コードなどの内容の説 …
-
Lottieの作成からコーディングまで実装方法をまるっと解説
こんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 軽量のWebアニメーションが作れる「Lottie」をご存知でしょうか？ 近年、Adobe XDでも使用できるようになりリッチなアニメーションを …
-
【Swiper】簡単！ドラッグ操作できるカード型スライダーを作る方法
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 Web制作ではスライダーという画像などのコンテンツをスライド形式で流す表現方法があります。 トップページのメインビジュアルをフェードさ …
-
【Adobe XD】コーディングが捗る！ZeplinとXDを連携する活用方法
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 XDを使ってデザインを作る方も多いと思いますが、XDのデータからコーディングする際はどのようにしていますか？ Macを使ってる人は⌥キ …
-
【最新版】Firebaseを使って無料でセキュアなサイトを5分で公開する方法
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 フリーランスや転職活動の際に必要になるポートフォリオサイト。どのようにして公開しますか？ レンタルサーバーを借りてサイトを公開したり、 …
-
ヌルヌル動く！Adobe AnimateCCを使ってアニメーションをHTML5 Canvasに変換する
みなさんこんにちは。Webデザイナーのしゅん（@shun_webdesign）です。 近年Webサイトで使われることがアニメーション。動きをつけることでサイトを閲覧するユーザーの目を引きつけやすく、静止画の画像に比べての …
-
【超初心者向け】人に例えるHTML/CSS、Javascriptの役割とは？イラストで解説
Webデザイナーのしゅん(@shun_webdesign)です。こんにちは。 Webサイトを作るとき欠かさせない「コーディング」。プログラミングの言語などを駆使してコードを書いていく工程です。 ですがWeb制作の勉強始め …
-
【超入門編】まずはコレ！VSCodeのインストール方法と使い方を徹底解説
皆さんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。 Web制作おいてソースコードを書くとき欠かせないツール「エディター」。 エディターとはパソコン上でHTML,CSS,Javascript …
-
【簡単】無料でポートフォリオを公開できるサービス5選
皆さんこんにちは。 今回はポートフォリオサイトが手軽に作れるサービスの紹介をさせていただきます。 作品やスキルを載せるのにとても便利なのでご覧ください。 関連記事 Webデザインを学べる超オススメの学習サイト『chot. …