Use this code while checkout for 50% discount for any product or subscription
![Mesh Gradients](https://cdn-ak-scissors.b.st-hatena.com/image/square/f90977433c75325c391f91418fb5b7fd0ffff009/height=288;version=1;width=512/https%3A%2F%2Fcdn.prod.website-files.com%2F625816a3416990dd61391b9b%2F6443e2b976e5fe4294353ce7_6262993c73beba3aab9aa4a9_5fe3521ccbc76506f538a1d5_-2302-20Mesh.webp)
グラデーションはWebデザインに魅力的な雰囲気を生み出してくれる重要な要素の1つです。慣れてくると自分で思い通りに作れるようになりますが、最初はグラデーションの色使いに苦戦する人も多いのではないでしょうか。 今回は、CSSグラデーションがコピペで使える便利なジェネレーターサービスをご紹介したいと思います。 【2023】おしゃれな配色パターンが見つかる!カラーパレット人気ツール28個まとめ 配色はデザインにおいて重要な要素の1つですが、慣れている人でないとバランスの取れた配色を決めていくのは簡単ではありません。 そこで、今回は初心者の方でもおしゃれな配色ができるカラーパレットツール・配色... Web Design Trends コピペで作れる!おすすめのCSSジェネレーター・ツールまとめ CSSがコピペで実装できるおすすめのジェネレーターやツール、サンプルコードなどをまとめました。 CSS
皆様こんにちは。 キャスレーコンサルティング、CC(CSVクリエーション)部の細見です。 今回は、HTMLとCSSだけで作ることができる、レスポンシブに対応した シンプルなパララックスページの作り方を、ご紹介したいと思います。 「パララックスってなに?」と思われる方もいらっしゃると思いますので、 まずは、その言葉の意味から解説したいと思います。 1. パララックスとは パララックス(en. Parallax)とは、日本語で「視差」という意味です。 Webデザインの世界においては、「視差効果」とも呼ばれ、画面をスクロールするといった動作の際に 要素を異なる速度で動かしたりすることで、あたかも立体で奥行きがあるように見せる手法とのことです。 最近ではプラグインも増えつつあり、単に速度の変更だけでなく、様々な動きを持たせることが可能になってきました。 2. 実際に触ってみましょう まずは、こちら
こんにちは。フロントエンドエンジニアのほりでーです。 Webやアプリの開発ではデザイナーとエンジニアの連携が欠かせません。デザイナーとエンジニアが分業する場合、デザイナーがPhotoshopなどのグラフィックツールで完成図となるデザインカンプを作成し、それを元にフロントエンドエンジニアが実装してWebサイトを完成させることが多いでしょう。 しかし、最近のWebサイトで多用されているリキッドレイアウト(横幅の変化に追従するレイアウト)や、ユーザーの操作に反応するインタラクティブなアニメーション表現、CMSやJavaScriptと連動して動作する複雑なUIなどをカンプ上で表現するのは困難です。 そのため、デザイナーが「ここはこういう風に動かしたいな〜」と思っていても、それがエンジニアに伝わっていない、という見落しも発生してしまいます。 一般的に、ソフトウェアの開発では仕様が不安定(=必要な機能
2016年12月7日 Illustrator 昔からIllustratorラブ!な私ですが、いつの間にやらWebデザインをする上での便利な機能が増えてきて、ますます嬉しい次第です。その中で今回は画像アセットを使った書き出し方法を紹介します。昔はスライスツールを使っていましたが、そんな面倒なことをしなくてもオブジェクトをドラッグ&ドロップで簡単に書き出せちゃいますよ。 ↑私が10年以上利用している会計ソフト! アセットの書き出しって何? 2016年6月にアップデートされたIllustrator CCでは、従来のスライスとは違う、新感覚の画像書き出し方法である「アセットの書き出し」という機能が追加されました。オブジェクトをパネルにドラッグして追加すると、サイズや解像度、デバイスに合わせたフォーマットに書き出せます。Webやアプリ用のアイコンや、画面全体のデザインを行う上でも欠かせない、便利な機
Web屋ならチェックしておきたい!作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools(デベロッパーツール)について、「多分、周知されていないけど、使わないともったいない!」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう! みなさんはChrome Canaryを使っているんでしょうか?一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです!リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
CSSリセットと呼ぶべきか、もしくはフレームワークと呼ぶべきか、非常に迷うのですが、そのどちらにも利用できるスタイルシート「Marx」を紹介します。 単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれており、コードを一行ずつ勉強したいですね。 Marx Marx -GitHub Marxの特徴 Marxのデモ Marxの中身 Marxの特徴 JavaScriptやclass付けを使用しないraw CSS すべてのブラウザに一貫したレンダリングを提供 クリーンなタイポグラフィ ナビゲーションやボタン、フォームなど、カスタマイズ可能 レスポンシブ対応 シンプルでミニマルなデザイン ファイルサイズは、7.7kb CSSリセットとしてはスタイルが少し多く、ページ作成のフレームワークとしては足りない感じです。 Marxのデモ デモペー
◆Google Maps JavaScript API V3 ブログ目次 Google Maps API v3とは? 本ブログは判らないところをコツコツ積み重ねました。あくまでご参考にされて下さい。Google Maps APIを扱うことは決して難しいことではないと思います。Google Maps JavaScript API V3のページからスタートするといいと思います。 ※V2は、2013年11月以降は使用できなくなります。 いきなりサンプル集(example)地図を見るならコチラ Google Maps API Google Maps APIサービスがサポートする国・都市の一覧表 初期設定 Google Maps API V3の地図(マップ)をPC、スマートフォンで見れるように表示させるscriptとメタタグの設定 地図に表示する。 ナビゲーションコントロール、マップタイプコントロー
Updated 2015.04.27 / Published 2015.04.27 「ファーストビューが全て」のようなファーストビューについては盲信的な記事も多く、ファーストビュー云々のことで煙が立ち始めて、火がついてしまうと、上手く説得を試みようにも聞く耳をもってもらえず、困り果てるディレクター・デザイナーの方も多いのではないかと思います。ファーストビューはもちろん大事ですが、盲信的に傾倒することには疑問を感ぜざるを得ず、ファーストビュー問題はいつになっても考えものです。 ファーストビューのボヤは気付き難い ディレクターやデザイナーの方ならプロジェクトが進行していく中で、ファーストビューが問題になったことが一度や二度はありませんか。「いやいや、ファーストビューはちゃんとガチガチに予防線を張っているよ!」というディレクターの方も、きっと過去に苦い経験があるのではないでしょうか。 個人的にフ
Googleマップの横に地点のリストを並べて、リストをクリックするとマップ上ではマーカー地点にヒュッと移動して、パッと説明窓を表示する方法です。 Google maps APIを使って作ります。 デモページ デモページ HTML Google maps APIを使うので、まずGoogleから直接APIを呼び出します。 バージョン3を使用しています。 その下に今回のJavascriptを呼び出します。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="map.js"></script> 地図とリストの呼び出し部分です。 <div id="map_canvas" style="widt
(注意!)この記事は、旧APIであるGoogle Maps API version 2を解説したものです。version 2の利用は推奨されていないので、意図的に旧バージョンの情報を探していない場合は、新しいバージョンの解説をご覧下さい。 ここではマーカーのクリックイベントを処理する方法を説明したいと思います。 サンプル 以下のサンプルはGoogle MAPS APIを使ったページのソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Google Maps JavaScript API Examp
Google Maps APIでマーカをクリックしたときに、個別の内容のInfoWindowを表示したい。JavaScriptGoogleMapsAPI クロージャを利用する事で目的の動作を行えるみたい。 まずクロージャが何者かを知る必要があり、以下のサイトがすごいわかりやすかった。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Closures Googleのドキュメントを読み解く。 Googleのデベロッパーサイトに、ソースコード付きで記載があった。これも、読んでいてすごいわかりやすかった。 https://developers.google.com/maps/documentation/javascript/events?hl=ja#EventClosures せっかくなので 自作のサンプルコード(抜粋 & 簡略
今回は初めてGoogleマップのカスタマイズに挑戦したので、備忘録としてやり方をまとめました。 カスタマイズできると知ってはいるけど難しそうで試したことない人も多いはず…そんな方は是非チェックしてみてください! それではどうぞ! Googleマップのカスタマイズをする意味 実店舗があるお店のサイトにとって、そのお店の行き方や場所が分かるマップは重要なコンテンツだと思います。初めてお店に行きたい時に、サイトにマップがあるととても分かりやすいですよね! そんな時よく使われるのがGoogleマップです。ただサイトによってはマップとサイトデザインがあっておらず違和感を感じる場合もあります。 デザインをあわせるためにオリジナルの地図画像を作るという手もありますが、道が変更されたり、目印のお店が無くなったりするたびに変更しないといけないので正直あまり実用的ではありません。そこでオススメしたいのが、Go
Google Maps API Styled Map Wizardでできること 店舗の場所などを掲載するときに Google Map APIを利用されることもあると思います Google Maps(グーグルマップ)はとても便利なんですが サイトのデザインとGoogle Mapが合わないんだよね って思う人も多いでしょう そこで「Google Maps API Styled Map Wizard」を利用して 簡単にGoogle Mapのデザインを変更する方法を紹介します ご紹介ありがとうございます バシャログ。さま アクセスが急に増えてびっくりしてます! 目次 Google Maps API Styled Map Wizardでできること Google Maps API Styled Map Wizardの使い方 Google Maps API Styled Map Wizard設定項目一覧
こんにちは。ディレクターのエリカです。 Google マップがカスタマイズできることはよく知られていると思いますが、難しそうでなかなか手が出せない・・・と思っていませんか? Google 公式が提供している「Styled Maps Wizard」を使えば、驚くほど簡単に Google マップをカスタマイズできるのでご紹介いたします。 ※このページは、Styling Wizard: Google Maps APIsの旧サービス:Styled Maps Wizardの紹介記事です。 Styling WizardでGoogleマップをカスタマイズ! Styling Wizardはこちらから利用できます https://mapstyle.withgoogle.com/ ※現在はStyling Wizardにリニューアルしています。 STEP1. 全体の色を変えてみよう 画面左の Selectors
Private content!This content has been marked as private by the uploader.
6/30にCSS Nite LP, Disk 23「表示速度最適化」 に行って来ました。 気になっているテーマでしたので超早割で申し込みました。自分も表示速度最適化に関しては興味があった(勉強会でお話させていただく機会もあった)のでかなり期待してお話を聞きました。 実際に濃い話が多く、4時間あっという間でした。 以下に自分用のメモとして書きます。 1. Measuring Web Performance – 自己満足で終わらないためのパフォーマンス計測 - ~石本 光司さん(サイバーエージェント)~ 改善をどこから行うか このテーマについては自分も悩んでいましたが、石本さんの定義方法は理解しやすかったです。 改善箇所は Yahoo Developer NetworkのExceptional Performance や Web Performance Best Practices – Ma
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く