僕がプログラミングを始めてから2年8ヶ月が過ぎました。 今までは基本的にフロントエンドをメインに取り組んできましたが、勉強しているうちに興味が移り、今後はバックエンドに方針転換するつもりです。良いタイミングなので、今までの取り組みを振り返っておこうと思います。

今回は、cssのみで（コピペで）実装できるローディングアニメーションをまとめた記事になっています。 ローディングはかつてはgifアニメで作られることが多かったですが、現在は複雑なことができるcss3によって実装されるケースがほとんどです。 jsより学習コストも低く、ブラウザに負荷もかけないので良いことづくめと言えます。 ただ、普段から感じていたことですが、ローディングのようなちょっと特殊なcssを書くことって本職のコーダーでもあまりありませんよね？ 案件によって作ったり作らなかったり、それも案件ごとに基本1つしか作らないと思うので慣れていない人が多くても当然だと思います。 そんなwebデザイナー、コーダー、フロントエンドエンジニアの皆さまを対象に、コピペで実装できるローディングアニメーションをまとめました。 doneローディングアニメーション実装するメリットは大きい ローディングを実装する

See the Pen 9-1 GIFアニメーション by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の表示を確かめてね！ 動きを実現する仕組み 仕組み　⇒　1枚の動く画像 長所　⇒　古いブラウザにも対応。オンラインジェネレーターなどの制作ツールで比較的簡単に制作できる。 短所　⇒　最大256色しか使用できない。色の境界がギザギザする。画質が粗い。 オンラインサービス「Ezgif.com（https://ezgif.com）」を利用して制作。 パラパラ漫画のようにコマ送りで複数の画像を組み合わせてGIF形式のアニメーション画像をつくる。 作り方 ①　動かすコマを、画像制作ソフトを使ってコマ数分作る。 カンバスサイズは全てのコマで同じサイズにし、画像を少しずつ動かしてコマ数分を制作。 サンプル（※サンプルデータ：https://coco

こんにちは。クックパッドのデザイナーの三嶋です。 クックパッドでのローディングアニメの制作方法について今日は書きます。 もともと読み込みのときにはくるくると回るiOS標準のものを表示していました。クックパッドでは「毎日の料理を楽しみにする」ことの実現に注力しています。少しでもクックパッドのアプリに来てくれる時間にちょっとした楽しさを演出するために、オリジナルのローディングアニメを少し前から制作していました。 lottieやwebPなども検討したのですがアニメを作る際になかなか癖があることと、今回採用したのはiOSが動画として再生しやすいapngになります。LINEスタンプのアニメなどで使われている規格になります。拡張子が「.png」なので少し紛らわしいのが玉に瑕です。 ＜アニメの作り方＞１.Adobe Illustratorで必要なコマのパスを全部書く たとえば拡大すると下記のようなパスで

スタイリッシュなデザインのハンバーガーメニューのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。 ハンバーガーメニュー（三本線のメニュー）はメニュー表示の定番となっていて実装することも多いと思います。モバイルファーストの時代になり限られたスペースを有効活用するために生まれたデザインです。本記事ではフォームの中でも「ハンバーガーメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 ハンバーガーメニューアイコンの多彩なデザイン・動作がよく分かるCSSデザイン例。シンプルな三本線のハンバーガーメニュー。クリック時の多彩なアニメーション。See the Pen CSS Menu Icons by Naoya (@

Webサイトに動きを！グリッチエフェクトを実装する「CSS Glitch Effect」 2018年3月2日 こんにちは！ デザイナーの伊東です。 先日、「2017年のWebデザイントレンドを振り返る」といった趣旨のセミナーに参加してきました。 昨年多くのWebサイトから見られた傾向を振り返っていったのですが、その中でも印象に残っているのが”動きのあるWebサイトが増えている”というトピックスでした。 私自身、2017年はjs+cssでアニメーションを加えたWebサイトを多く作成したように思います。 ただ、ダイナミックな動きを実現しようとするとその分工数が増えてしまうのも事実です。 そこで今回は、凝った動きを簡単に実装できる「CSS Glitch Effect」というものを紹介しようと思います。 短時間で実装できますので、ぜひお試しください！ グリッチエフェクトとは 「グリッチ」とは、電子

かなり前に「jQueryでページ遷移時にアニメーション効果をつけてみる。」と題して、 jQueryでページ遷移時に画面をスライドさせるアニメーション効果をつけるSCRIPTを紹介しましたが、 どうやらブラウザによって、画面遷移後にブラウザの「戻る」ボタンで前画面に戻ると 遷移時にアニメーション用の動作として操作したCSSの指定が残ってしまって 画面が真っ白になることがあったので、その不具合対応版を作ってみました。 jQuery PAGE SLIDE MOVE まずはサンプルから 【改訂版】サンプルはこちら※「次へ」をクリックしていくとページ全体がスライドして遷移します。 画面内の「次へ」などをクリックして画面遷移した後、 ブラウザの「戻る」ボタンを押しても画面が真っ白にな現象は発生しないと思います。 ※以前の記事のサンプルはブラウザによって画面が真っ白になります。 以前の記事の内容から H

お洒落なサイトでよく実装されているのが、「ページ遷移時のアニメーション」ですね。 例えば、企業のアイコンを表示させたり、画面をスライドさせたり、フェードインさせたり、様々なアニメーションをつけてユーザーを飽きさせないようにしてます。 （あまりやりすぎてるサイトは離脱率が上がりそうですが） jQueryのプラグインで有名どころとしてはANIMSITIONですね。 今回は、プラグインを使用せず、ページ遷移時のアニメーションを実装してみます。 参考にしたサイト、は記事最下部にリンク貼っておきます。 ページ遷移時のアニメーションまずは、デモを御覧ください。 →　デモサイト こんな感じで、LINKをクリックした時にアニメーションが走るようになっています。 ページ読み込み時にも時間差でアニメーションを実行させると、見栄えが良さそうですね。 ざっくりこれからやることを説明しておくと、 bodyの擬似要素

サイト内の別ページへの切り替え時にフェードイン／フェードアウトなどのエフェクトを施してくれるJavascriptやjQueryプラグインはいくつかあります。 例えば、以下のようなもの。 また、「PJAX」というjQueryプラグインを利用すると、非同期通信でウェブページ内の更新が必要な特定の範囲だけリンク先の別ページの対象コンテンツに置き換えて表示することで、ヘッダーエリアやサイドバー、フッターなどの重複するコンテンツは表示したままにして通信量を減らし、ページ遷移を高速にすることもできます。 さらに、このPJAXを利用してページ遷移効果の実装をより扱いやすくした「Barba.js」という軽量なプラグインもあります。 これらの素敵なプラグインを活用して、新しいインタラクティブなWordPressテーマを作ろうと企画したのですが、開発中のテーマではあらゆる機能やエフェクトのためのスクリプトを読

CSS Paint APIとは、CSSの背景や枠線の描画をjavascriptでプログラム描画する機能です。 描画した図形画像をアニメーションさせたり、受け取るパラメータによって変更したりする事もできます。 JSで描画するのでプログラム知識が必要になりますが、高度な演出が可能になります。 CSS Paint APIとは 本記事ではCSSのスタイリングにjavascriptを使う方法をご紹介します。 それがCSS Houdini（フーディーニ）APIという機能です。 CSS HoudiniのCSS Paint API CSS HoudiniのAPIは、CSSの機能をJavaScirptによる描画処理を利用して拡張した機能です。 より高度で複雑なCSSスタイルをプログラミング感覚で実現する事ができます。 今回はCSS HoudiniのAPIの一部となる、現在Google ChromeやEdge

JS でブレークポイント毎に処理を分ける場合の方法を resize から matchMedia に移行したので、その際のメモ書きです。 昔ながらの方法 恥ずかしながら、最近まで JS でブレークポイント毎に JS 処理を切り替える場合、 以下のように昔ながらの resize イベントの監視を使っていました... /** * イベントリスナー */ const listener = () => { // リサイズ時に行う処理 if (window.innerWidth >= 768) { // 768px以上 console.log('PC用ブレークポイント用処理'); } else { // 768px未満 console.log('SP用ブレークポイント用処理'); } }; // リスナー登録 window.addEventListener('resize', listener); /

ウィンドウサイズにあわせてJavascriptを動作させたいページ場合、Jqueryでもレスポンシブのブレークポイントの指定が可能です。 忘れがちなコードなのでメモ。 サンプルコード if (window.matchMedia( "(max-width: 768px)" ).matches) { /* ウィンドウサイズが 768px以下の場合のコードをここに */ } else { /* ウィンドウサイズが 768px以上の場合のコードをここに */ } 応用 if (window.matchMedia( "(max-width: 768px) and (min-width: 480px)" ).matches) { /* ウィンドウサイズが 480px以上768px以下の場合のコードをここに */ } レスポンシブ時のみ動作させたいJavascriptを書きたい場合はこのようにするとうま

HOMEHTML&CSS【CSS】olタグのカスタマイズ！番号に装飾を加える方法 【CSS】olタグのカスタマイズ！番号に装飾を加える方法 HTML&CSS HTMLでolタグの番号に「色」や「装飾」を付けたい時ってありますよね。 デフォルトのolタグだと、テキストに指定した「色」しか反映されませんし「装飾」をすることもできません。 そこで今回はolタグのカスタマイズ方法についてご紹介していきます。 olタグの装飾サンプル まずはどのように装飾ができるのかサンプルを見てみましょう。 HTML <ol> <li>番号つきのリストが入ります。番号つきのリストが入ります。番号つきのリストが入ります。</li> <li>番号つきのリストが入ります。</li> <li>番号つきのリストが入ります。番号つきのリストが入ります。番号つきのリストが入ります。</li> </ol> HTMLは通常通りに記述

#loadingWrap { width: 100%; height: 100vh; background: #000; position: fixed; top: 0; left: 0; z-index: 10; } #loading { width: 5em; height: 5em; border-top: 1em solid rgba(255, 255, 255, 0.2); border-right: 1em solid rgba(255, 255, 255, 0.2); border-bottom: 1em solid rgba(255, 255, 255, 0.2); border-left: 1em solid rgba(255, 255, 255, 1); animation: loaderAnime 1s infinite linear; border-radius:

こんにちは、ちゃんけいです。 Webサイトのローディング画面は、ユーザーにページ読み込みが行われていることを伝えやすく、表示までのストレス軽減に役立つのでおすすめです。 今回はCSSアニメーションを利用した簡単なローディング画面を紹介したいと思います。 まずは完成イメージをご確認ください。こんなローディング画面をつくります。 See the Pen CSS Loading by Chankei (@Chankei) on CodePen.

コーポレートサイトとかでWEBサイトを開いた時にロゴマークが表示されてWEBサイトのファーストビューが表示されるオープニングアニメーション的なやつ。 最近は、最初にテキストを読ませたりとか、映像と融合したダイナミックな表現が増えてますが、簡単なロゴマークをアニメーションで出してから、WEBサイトを表現するならCSSのアニメーションだけでもそれっぽい感じで表現することは可能です。 今回の実装方法は以下の2段階に分けてローディングアニメーションを実装しています。 ・ロゴマークのアニメーションをCSSで実装 ・WEBサイトの上に被っているロゴマークの画面から外れる 使用するのは、CSSのanimationプロパティと@keyframesになります。 （1）ロゴマークを表示させる土台を用意 まず、土台になるHTMLを準備 <div id="logo_loader" class="open"> <d

See the Pen 4-1-4ロゴアニメーション by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね！↑ 動きを実現する仕組み CSS のアニメーションで天地中央に配置したアイコン（ロゴ）を動かす。 jQuery でローディング画面をフェードアウトする。 ［使用するライブラリ］ ＊ jQuery HTMLの書き方 head終了タグ直前に自作のCSSを読み込みます。

デザイン通りにコーディングできるようになってきてプログラムにもそこそこ強くなったけど、Awwwardsなどに掲載されているWebサイトを見ているとどうやって作られているかわからない…そんな経験はありませんか？ 今回はモダンなブラウザで良く見るWebサイトを少し豊かにする知識と技術を簡単にまとめました。 これらの技術はデザインに沿ってコーディングをする以上のものになります。 実務では工数が掛かるためあまり行われず、知っていても使う機会は少ないと思いますが、それでも抑えておくと自身のWeb制作への理解が深まると思いますので、興味のある方はご一読下さい。 それではいきます。 はじめに制作にあたり、複数のプラグインやライブラリを使用しています。 Webサイトで使われるプラグイン(ライブラリ)の多くが海外製となっており、最近ではIEを非対応としたプラグインもあります。 特に最近の制作環境の主流である