Posted by NAGAYA on Jul 26th, 2018 Google Maps API（Javascript API）について書く記事、第4弾です。 今回はお待ちかねの（？）地図デザインのカスタマイズについてお届けします。 Google マップをWebサイトに掲載するときに気になるのがサイトデザインとの相性。デフォルトの見た目では浮いてしまう場合もありますよね。 Google Maps APIでは、地図上の要素それぞれに対して細かいカスタマイズが可能です。マスターすればかなりオリジナリティのあるデザインにすることができますよ。 カスタマイズのイメージを掴むには、Google マップのカスタマイズ例を集めたギャラリーサイト「Snazzy Maps」などを見るのがおすすめです。 色別や、「シンプル」「ダーク」などのイメージごとに多くのサンプルが載っています。 また、Snazzy

はい。 今回は、スマホサイトで使う動画のお話。 先日のブログテーマ更新時、ヒーローヘッダーを導入して、粗い画像対策にドット要素をレイヤーのように重ねておきましたが、時間が出来たら背景に動画でも使ってみようというつもりで作っておきました。 動画を埋め込むのであれば、YouTubeへ動画を投稿して記事に埋め込む。というのが、フォールバックの必要も無く、手っ取り早くて実用的な方法だと思います。ただ、これが面倒で…。自分としては、通常の画像と同じ感覚で動画を扱えるようにたい。 ブログのテーマは現在進行形で微調整を行っていますが、空いた時間があったので、そんな想いを実現すべく動画背景に手をつけてみたところ、見事にハマってしまいました。 今回は、動画を扱う際に行き詰まった部分と、注意点をまとめてみたいと思います。 スマホでは自動再生が出来ない？！テーマを作り始めた頃から動画背景の構想があったので、各記

カスタム投稿を作るためにはfunctions.phpに以下を記述します。 /* カスタム投稿タイプを追加する */ add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'testcustom', //カスタム投稿タイプ名 array( 'labels' => array( 'name' => __( 'テストカスタム' ), 'singular_name' => __( 'テストカスタム' ) ), 'public' => true, 'has_archive' => true, //アーカイブページを持つ 'menu_position' =>5, //管理画面のメニュー順位 'supports' => array( 'title', 'editor', 'a

@-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

A handpicked collection of beautiful color gradients for designers and developers

IE8がサポート外になり、喜んでいる制作者の人も多いと思います。 正式版がリリース予定のjQuery 3もBootstrap 4もIE8はサポート外です。 古いバージョンのIEをサポート外にすると、CSSで使えるテクニックも広がります。これからどんどん使っていきたいCSSのテクニックを紹介します。

Smart WebP, PNG and JPEG Compression for Faster WebsitesOptimize now

最近、よく見かける「１枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー（Hero Header）とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。 2014年頃から海外のウェブデザインにてトレンド的にかなり増えてきている手法です。 巨大な画像により、イメージを強く植えつけることができる反面、写真のクオリティ次第でウェブサイト全体の印象を悪くすることも有りますので、フラットデザイン同様簡単そうでデザインセンスの問われるデザイン要素となっています。 参考サイト http://racines-park.com/ ferret-plus.com こういったレイアウトを作る際の１番のポイントは、用意する画像の大きさです。 自分のPCでは綺麗にフルスクリー

Perl時代にWebプログラミングを志す。30歳でエンジニアに転職。 Perl、PHPを十数年書き続け独立。Webアプリケーション制作を生業としています。 現在はフリーランスWeb Developer兼専門学校講師。兵庫県神戸市在住。 専門分野はPHP(Laravel) 、Python（Django）、JavaScript(Vue.js)、Javaも少々。 近況はTwitterで公開中 Work こんな仕事をしています。 Webアプリケーション開発 データベース構築 広告・集客 インストラクター 個人向けカフェレッスン 息抜きのサイクリング

2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen

1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる アクセスアップ！ それだけが、ホームページからの売上をアップさせる方法じゃありませぬ。 アクセス数を増やさなくても、お問い合わせフォームに少し工夫を加えるだけで、売上が大きく改善することもあるのです。 今回の記事では、効果的な「お問い合わせフォームの作り方」を実例付きで解説します。 無料で使えるおすすめの「メールフォーム作成ツール」も紹介するので、乞うご期待！ 事例： お問い合わせフォームの改善で売上げアップ！ 下の図が何か、わかりますでしょうか？ Googleアナリティクスというサービスで、あるサイ

毎年、PANTONE社が発表する流行カラー「Color of the Year」を、個人的にいつも楽しみにしています。最近、2017年の色として爽やかなみどり色「Greenery」が発表されました。今回は、これまでに発表されたPANTONEのすべての色を見直してみましょう。 2000年に初めて導入されたPANTONEカラーは、毎年デザインやファッションなど多くの分野に広く影響を与えています。2000年の落ち着いたセルリアンブルーから、2016年の女性的なローズクォーツまで、ラインナップを見ると、いくつかの色が頻繁に選ばれているのに気付きます。たとえば、ターコイズブルーとレッド/ピンクの色合いは、ニュートラルなアースカラーよりも多く利用されています。 PANTONEの今年の色をチェックして、家や職場での色を利用する機会のヒントにしてみてはいかがでしょう。 2000年: Cerulean CM

色見本帳の作成で、世界的に知られているパントン（PANTONE）社が、2018年の流行カラー、すみれ色「ウルトラ・バイオレット」（Ultra Violet 18-3838）を発表しました。 2018年の流行カラーは、独創的で想像力豊かで、未来への道を切り開くカラーリングが特徴となっています。 PANTONE今年の色をまとめたカラー見本帳 2000〜2017年（CMYK・RBG・HEXコード収録） 2018年の流行カラー、すみれ色「Ultra Violet ウルトラ・バイオレット」 2018年の流行カラーに選ばれた「ウルトラ・バイオレット」は、日本でいうスミレ色で、ドラマチックでじっくり考えぬいた紫色の色合いで、独創性や創意工夫、先見性を伝えることができるカラーリングです。 これまでにも紫色は、芸術的な輝くを象徴するカラーリングとして、デヴィッド・ボウイやジミ・ヘンドリックスなどの音楽アーテ

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

今日も生まれる感動と笑顔 お客様の事業、戦略、Webサイトの現状などを把握し、最適な施策を立案・実行します。 more info Top Message インターネットテクノロジーの需要が高まり、その必要性と可能性を感じ2005年に創業して以来、現在に至るまでステークホルダーの皆さまに支えていただきながら成長を続けてまいりました。「ITとクリエイティブのチカラで、心沸き起こるプロダクトを生み出す」ことをミッションに掲げ、さらなる充実したチカラ溢れる未来の実現を目指します。私たちの強みは、企画戦略からシステム開発、Webアプリケーション開発、クリエイティブ、コンサルティングに渡るワンストップソリューション提供とオーナーシップマインドを両立することにより、より精度の高い、顧客満足度の高いアウトプットと課題解決を達成します。また、創造性の向上、生産性の向上、コストの削減といった意識、文化を育むた

可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。 Zeal Windows、Linux、MacOS用各種揃っている無料のオフラインドキュメント。 チートシート devhints.io JavaScript、CSS、Go、vim等のショートカット、書式などチートシート。字が薄くて見辛い。 SEOツール Key