#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を非対応としたプラグインもあります。 特に最近の制作環境の主流である

「地図にカーソルをのせると色がかわる」サイトを作ろうと思ったら、簡単なものから精密なものまであることがわかりました。 せっかくなので、動画で動きの違いの説明もしたいと思います。 作りが簡単なのを選ぶ？動きが綺麗なのを選ぶ？ 方法１：CSS、JavaScriptなどを使って単純なロールオーバーにする。 良い点：記述が簡単、画像を用意すればすぐ可能。悪い点：長方形以外の図形は綺麗に動かない。 デモ動画 都道府県の形に乗ったときに色が変わるのではなく、画像の端っこに乗ったときにもう色が変わってしまっています。これは地図など隣の図形が近いモノではやりにくいです。 どうしても使いたい場合は、そもそもの図形を抽象化して長方形にすれば楽です。 では次が本題。複雑な図形でも綺麗にロールオーバーしに行きましょう。 方法２：イメージマップを使って複雑な図形でも綺麗に切り替わるようにする。 良い点：複雑な図形で

2020.02.24 / tips 脱クリッカブルマップ！hoverやレスポンシブにも対応できるクリッカブルなSVG Warning: Trying to access array offset on value of type null in /home/sezaki/sezaki-design.com/public_html/wordpress/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16 Warning: Trying to access array offset on value of type null in /home/sezaki/sezaki-design.com/public_html/wordpress/wp-content/plugins/codepen-embedde

背景画像をズームアップしながらフェードで切り替えるスライダーを実装する Swiper自体にはズームアップしながらフェードする機能がありません。そこでCSSを使ってズームアップ機能を追加します。 Swiperのファイルを読み込む 今回はCDNを使ってSwiperに必要なファイルを読み込みます。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/> <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- 背景画像１ --> <di

2017.08.02 Photoshop: スライス卒業で高速コーディング！効率的な画像切り出し方法２選 初めましてこんにちわ、BPSデザインチームのスギムラです。 マーベルなら断然アイアンマン派。 スパイダーマンの新作が待ち遠しい今日この頃です。シビルウォーのラストでボコボコにされた記憶が新しいので早く活躍する社長が見たいです。 入社して一年以上たっていますが、このたび記事を書くためについにTechrachoアカウントをつくりました。 ことのはじまり 先日、社内でデザイナーとコーダーで打ち合わせをしていたところ、新卒コーダーへ手順説明をしていた先輩コーダーが一言。 「（PSDデータからは）スライスで画像を書き出せばいいよ」 BPSではコーダー側でスライス作業をしているのですが、スライスで書き出ししていたんですね（その時までどう書き出ししていたかは知りませんでした） 「スライス」機能、確か

最近、よく見かけるスクロールすると文字とかの背景が横からブワッと出てきて、そのままブワッと消えて文字が現れるみたいなエフェクト。 例えばこういうのです。 https://tympanus.net/Development/BlockRevealers/ シンプルなレイアウトでも動きをつけることで単調にならないってメリットもあり、こういうエフェクトは重宝します。 実装する場合、いくつか方法はあるのですが今回は二つほど紹介します。 プラグイン「Block Reveal Effects」を使う方法 先ほどリンクを貼った「Block Reveal Effects」はcodropsで公開されています。 まずは以下のページの「Download source」から一式ダウンロード可能です。 https://tympanus.net/codrops/2016/12/21/block-reveal-effec

Webサイト公開後、.htaccessを使って旧ページから新ページにリダイレクトをかけます。何度も同じようなことをしているのですが、やはり忘れっぽいので、よく使うリダイレクトの書き方をまとめておきます。 私と同じような誰かのお役に立てれば幸いです。 私がよく使うリダイレクトは301リダイレクトのため、この記事のコードは全て301リダイレクトとなっています。302リダイレクトを用いる場合は、適宜変更してください。 0. .htaccessとは？1.あるURLから別のURLへのリダイレクト2.ディレクトリまるごとリダイレクト3.類似したファイル名のURLをまとめてリダイレクト4.特定のディレクトリをリダイレクトから除外する5.特定のファイルをリダイレクトから除外する6.wwwなし / ありを統一する7.https(SSL)のURLへリダイレクトまた、上手く動作しない場合のパターンも挙げてみまし

こんにちは、koheiです。 最近スクロールしていくと動的に要素が表示されるWebサイトが増えていますよね。 WordPressを使用したWebサイトでもjQueryプラグイン「Waypoint」とアニメーション用CSS「Animate.css」を使えば簡単にスクロールアニメーションが実装できます。 それでは早速実装方法をご紹介しましょう。 Waypointの読み込み Waypointsとは、スクロールイベントが制御できるjQueryのプラグインです。 以下サイトからwaypointsをダウンロードしましょう。 Waypoints WordPressにWaypointsを読み込むには、ダウンロードしたファイル「jquery.waypoints.min.js」をjsファルダに格納し、functions.phpに以下を記載します。 ※4行目は、自分で作成したスクリプトファイルを読み込む処理です

MITライセンス | Wikipedia GPL（GNU GPL v3）ライセンス | Wikipedia ここで言う「スクロール連動」とは、閲覧者のページ上のでのスクロール（量）を検知し、特定の量やビューポート（ブラウザの表示領域）内に特定の要素が検知されたときに、特定のイベントや演出が展開されるコンテンツ。としています。 ScrollReveal ScrollReveal は、他の類似ライブラリに比べてスター数も多く、頻繁にアップデートも行われているようで、2018年12月現在のバージョンは4.0.5。非商用はGNU GPL v3。商用ライセンスも用意されています。 アニメーションなど演出処理もjsに含まれた演出一体型ライブラリで、別途cssを読み込む必要はないので、手軽に使用できるのがメリット。他のライブラリと同様に、スクロール・要素検知イベントが用意されているので、イベント発火時に

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="dist/css/swiper.css"> <title>Title</title> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/05/swiper01.png" alt="Swiper01"><

jQueryを使っていないのでフリクションしにくいのも利点。入れ子でスライダーが組めるところが便利です。 【使い方（Usage）】 GitHubから最新バージョンのSwiperをダウンロードする。 Swiper 下記をHTMLに記載 <head> .... <link rel="stylesheet" href="cssまでのパス/idangerous.swiper.css"> <script defer src="JAVASCRIPTまでのパス/idangerous.swiper-2.x.min.js"></script> .... </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <!--First Slide--> <div class="swiper-slide"> <!-- ここに

カルーセルスライダーとは？ 画像やコンテンツがスライドして別のコンテンツを切り替えて表示する方法 DEMO Download ライブラリとしては、良くslick.jsやbxslider.jsが使われる 個人的にはslick.jsが使いやすい。カスタマイズする際、bxsliderはハマりやすい。その代わり、高機能。 今回はslick.jsを使用する。 slick-theme.cssは必須ではないですが、公式のdemoみたいな見た目にしたいのであれば入れた方がいいです。一応jQueryも読み込んでいます。 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> <link rel="stylesheet" type="text/css" href="css/s

下の図を見ると、imageAははっきり表示されていますが、imageBはぼやけています。 高解像度のRetinaディスプレイを搭載したデバイスが広く普及し、Webデザインの現場では高解像度ディスプレイにも耐えられる画像の作成が必須となっています。 その対応策として、さまざまなスクリーンサイズへの対応に適したSVGが注目されるようになりました。 高解像度のRetinaディスプレイ※1※1Retinaディスプレイとは、Apple製品に搭載されているディスプレイの呼称のことをさす。を搭載したデバイスが広く普及し、Webデザインの現場では高解像度ディスプレイにも耐えられる画像の作成が必須となっています。 その対応策として、さまざまなスクリーンサイズへの対応に適したSVGが注目されるようになりました。 SVG自体は1998年頃に開発されていましたが、Internet Explorerで標準対応されて

FTPソフト Cyberduck（サイバーダック）でリモートサーバーに置いてあるファイルをダブルクリックしたときに、ATOMエディタで開く方法を解説します。 Cyberduckで外部エディタを設定する方法 Cyberduckに外部エディタの設定する方法を説明します。 この設定をしておくと、Cyberduck上のファイルをダブルクリックすると、指定したエディタですぐさまファイルを開くことができ便利です。 動作としては、「リモートからダウンロード」➔「エディタが開く」➔「保存するとアップロード」ですが、 ダウンロードやアップロードを意識することなく、直接リモート上のファイルを操作するような感覚で、編集ができます。 環境設定 Cyberduckの上部メニューの「Cyberduck」➔「環境設定」をクリックします。 （Macsショートカットキー；「command(⌘)+ ,」） ブラウザの設定 環

タッチデバイス向けのサイトを作っていると、どうしてもぶつかる一つの壁、それが:hoverの挙動。以前に僕もその問題に直面し、改善したことがあったので、その経験をメモ。 Ads タッチデバイスの:hoverの挙動がおかしい マウスカーソルを乗せたときのスタイルを設定できるのが:hoverです。 PC向けのサイトだと実に多種多様なホバーアニメーションが実装されており、それらで遊んでいるだけで一日を過ごせる程にそのバリエーションは豊かです。 しかし、この:hover、タッチデバイスにも同じように適用すると少々挙動がおかしいです。指が離れてから:hoverで指定したスタイルが適用され、そのまま元のスタイルに戻りません。 特に問題なのはリンク要素（aタグ）に:hoverを指定した時です。リンク要素をタップしてもリンク先に推移せず、もう一度タップしないといけない場合が見受けられました。 これではユーザ