Webデザインに欠かせない様々なエフェクトやアニメーション。使い方次第でWebサイトを魅力的なものに仕上げてくれますが、今回紹介するのは、クリエイティブなマウスオーバーアニメーション「Stack Motion Hover Effects」です。 全部で30種類の立体的なマウスオーバーアニメーションがサンプルとして上がっており、サイトの雰囲気や印象に併せて選択することが可能です。 詳しくは以下 定番のマウスに対して吸い付くように動く派手過ぎず比較的取り入れやすいアニメーションから、アイコンが回転したり跳ねたりするような立体的なアニメーションまで様々な種類のエフェクトが実現可能です。マウスオーバーアニメーションは、分かりやすく影響度合いも大きいため、Webデザインにアクセントを与えたいという方にはおすすめの表現だと思います。 アニメーションの反映は比較的シンプルでClassを利用して簡単に実装
予定の管理はGoogleカレンダーが便利。でも独自のインターフェイスを持ったカレンダーサービスが作りたい。そんなときはGoogle Calendar APIを使ってみるといいかもしれません。 この記事では、PHPでGoogle Calendar APIを扱う方法を紹介します。カレンダーアプリを構築し、ユーザーが新しいカレンダーを作成したり、イベントを追加したり、Googleカレンダーと同期したりできるようにします。この記事に沿って作業する場合は、Homesteadをセットアップするとアプリの実行環境を簡単に用意できるのでおすすめです。 Google Console Projectのセットアップ 最初にGoogle Developers Consoleで新たなプロジェクトを作成します。 プロジェクトを作成したら、ダッシュボードにある「enable and manage APIs（APIを有効
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
VISUALTHINKING とは？ インフォグラフィック専門のコンテンツレーベルです。インフォグラフィック・デザイナーの櫻田潤が運営しています。 プロフィールを見る Instagram Threads
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
サッポロクリエイティブキャンプ 2016 #3で使った資料を増補改訂したものです。HTML5 VideoとかHLSとかDASHとかのことについてです。Read less
ウェブサイトにレコードプレーヤーを置こう。 Codrops’s Record Player ディストリビューション 先日、 Codrops にて Interactive Record Player が公開されました。 このレコードプレーヤーは、mp3音源を読み込み、レコードプレーヤー型のUIを使って再生をするのですが、独特のノイズ、トーンアームの動きや再生位置の変更など、本物をリアルに再現しています。 この記事では、Codropsのライセンスのもとで、ソースコードをカスタマイズし、 簡単に曲やレコード情報を変更できるようにした、 ・ WEB用のテンプレート ・ WordPress用のテンプレート を作成・再配布しています。 目次 1. レコードプレーヤーを置いてみよう。 2. 動作環境 3. WEB用テンプレートの使い方 4. WordPress用テンプレートの使い方 5. 最後に
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
CSSでn番目の要素に適用したいときなどに利用する:nth-child疑似クラスや:nth-last-child疑似クラスですが、先頭または最後からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考えることがあると思います。 「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはSass(SCSS)を使っているのが条件にはなりますが、ちょっと複雑そうな指定もわかりやすく容易な記述で指定することができます。 使い方 まず、必要なSCSS (Family.scss) を配布サイト上部にある「DOWNLOAD」ボタン、またはGitHubからダウンロードするなどして読み込みます。 あとは、普段mixinを使うときと同様で@include mixin-name(n)という感じで記述すれば利用することができ、引数の部分は場合によっては空に
最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり
お客様と一緒にWEBを育てるということ StudioBRAINのWeb制作では、お客様とはまず最初にホームページを作ることから始まりますが、その後も集客に向けてのサイト運営をお手伝いしながら、継続的に時間をかけて、そのホームページを一緒に育てていける、ひとつのWeb制作チームとなれればと考えます。 お客様にも作業を手伝ってもらうというスタンス WEB制作と一口に言いましても、プランニング、デザイン、原稿、写真、システム構築、サーバー、保守、運営…といった様々なパートに分けることができます。もちろんすべてお任せいただければ光栄ですが、あくまで主役は事業主であるお客様ご自身です。お客様に事業のことを教えていただかなければ、私たちにできることは限られています。したがって私たちはお客様の手でできない部分をお手伝いさせて頂ければというスタンスで考えています。 ホームページを作ることは、最適な形に作り
The Ultimate Design Tool Bootstrap Studio comes with a large number of built-in components, which you can drag and drop to assemble responsive web pages. The app is built on top of the hugely popular Bootstrap framework, and exports clean and semantic HTML. Watch Video Thousands of Happy Users Bootstrap Studio is used and loved by thousands of designers, developers and students from across the wor
インプットにおすすめの5つの方法 1. トレンドのWebサイトを見る 私はWebサイトやWebサービスの制作を主に担当しているので、世の中のWebサイトをたくさん見なければなりません。最近は、休日の早朝に見るようにしています。とりあえず、下記のサイトをとにかく見るのです。 Awwwards FWA CSSREEL CSS Winner CSS Design Awards CSS Awards Siiimple 2. 技術に触れてみる もともとプログラマーだったので、最新の技術が気になることも。そんなときは本で学ぼうとするのではなく、まずはプログラムを書いてみることにチャレンジします。つまずくことも多々ありますが、とりあえず書くのです。 最近ですと、Pepperのアプリ開発をかじってみました。 Developers | Aldebaran Community https://communit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
