Vimeoで背景動画を実装できるかどうかを調べる機会があったのでメモ。 サンプルコード APIを使用するためにjsファイルを読み込ませます。 <script src="https://player.vimeo.com/api/player.js"></script> Vimeoを埋め込むエリアを用意します。 HTML <div id="background"></div> <div id="background-front"></div> backgroundにVimeoを埋め込み、background-frontをプレーヤーの前面に配置してクリックできないようにする想定です。 CSSで背面に固定配置します。 CSS #background, #background-front { position: fixed; right: 0; bottom: 0; width: 100%; hei
どうもこんにちは塚本です。 気付いたらInstagram Graph APIのバージョンが13.0までアップデートされていました。 以前、トークン等を自動取得するツールをさくっと作ったのですが、 若干アップデートをしてみました。 ※2022.6.22 追記 自動ではなく、手動でトークンの取得を手助けするツールも作ってみました。 Instagram Graph APIのトークンの手動取得を少しだけ簡素化する 変更点 Instagram Graph Api Automatic Token Acquisition Tool トークン等を正常に取得できると、投稿のプレビューができるようになりました。 ツールの使用方法 大まかな手順 1. インスタグラムをプロアカウントに切り替える 2. Facebookページとインスタグラムをリンク 3. Facebook for Developers にアクセス
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。 そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。 今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。 Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非
Googleカスタム検索とはGoogleでサイト内検索ができる小窓を自分のウェブサイトに設置できるサービスです。 Googleアカウントにログインして下記ページから登録を行います https://cse.google.com/cse/all そして取得したJavascriptコードを、自サイトのHTMLソースの検索ボックスを設置したい位置に貼りつけます。 こちらが張り付けた例ペタリいまいちだ 一応テーマとかあったり、各パーツの色だけ変更できるんですが、もうそんな問題じゃないです。 Googleカスタム検索を好きなデザインに変更する！この検索ボックスはテーブル組（！）なのでCSSを上書きしても限界があります。 頑張ってCSSを駆使して何とかしているブログなどもありましたが、やだ、もっと素敵にしたいんです。 なんとやりかたは超簡単でした。 普通に好きにinputなどを設置して、パラメーターでカ
パンくずリストとは？ パンくずリストは、ページの上部や下部に設置されている事が多い、Webサイトの中で現在のページの位置を示すナビゲーションです。 検索エンジン経由でWebサイトの下層ページからアクセスを始めるユーザーが多いため、そのページの上位階層に容易にアクセスできるパンくずナビゲーションは、Webサイトに必須の機能と言えます。 アクセスしたページのコンテンツに興味があれば、パンくずリストを使って他のページに移動してくれるかもしれません。 また、パンくずリストの内容は検索結果画面のURL部分に表示される事もあるため、検索結果でのクリック率に影響がある可能性もあります。
「Webページを作ったのに、全然上位に表示されない…。」というのは、Webページを作ったことのある方なら誰もが経験したことがあると思います。 頑張って作ったWebサイトであれば、検索結果の上位に表示されたいですよね。そこで登場するのが「SEO対策」です。 SEO対策は、小手先の技術から、Webサイトの根本から考える必要があるものまで、本当に幅広く、奥もかなり深いため、簡単にマスターすることはできません。 また、毎年新たなSEO対策の手法やテクニックが登場するため「これで完璧！」と思えるサイトを完成させても、またすぐに手を加える必要が出てくるため、SEO対策は常に最新の情報を収集し、最適な方法で行う必要があります。 今回は2019年現在の最新情報を踏まえ、改めてSEO対策に有効な21の方法をご説明していきたいと思います。 【2024年】SEOに強いおすすめWordPressテーマまとめ Wo
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 PWAをテーマにしたコミュニティ「PWA Night」を運営する菅家大地さんが、既存のWebアプリをPWA化する簡単な実装方法を解説します。 はじめまして、菅家（@kan_dai）といいます。普段は株式会社TAMという会社でフロントエンドをメインに、クライアントのWebサイト制作やWebサービスの開発をしています。PWA（Progressive Web Apps）をテーマにしたコミュニティ「PWA Night」の運営もしています。 さて、2018年ごろからPWAという言葉を聞く機会が多くなってきました。2019年現在、毎月コンスタントにPWAに関する仕事の相談を受けるようになっており、PWAへの関心の高まりを感じます。日本経済新聞やスマートフォン版Yahoo! Japanといった有名サービスでの
お知らせ用例文サイトHOMETENは、企業やお店・店舗、工場からネットショップにおいて、ホームページやSNS、メールでお知らせ文書を掲載する時に使用する、お知らせ用例文・告知用例文、挨拶文、案内用例文、紹介用例文を無料で掲載しています。 掲載しているお知らせ用例文は使いやすくカテゴリに分かれており、ビジネス・店舗、一般・季節に分類しています。 季節や状況に合わせ、謝罪から告知まで、様々な用途に合わせたお知らせ例文を紹介。 例文・フォーマット・雛形・テンプレートで使う文章以外に、メール用例文、編集可能なWord文書、印刷で使用するPDF、画像ソフトで編集可能なPOP用AIデータはチラシでも使用できます。
編集や校正の基本として、疑問符（？）や感嘆符（！）の後に空白をいれる（スペースを空ける）という慣習があります。この慣習の意図とは何か、またスペースがあいていれば全角アキでも半角アキでもどちらでもいいのかを解説していきます。ブログや小説など表記する媒体によって使い方こそ変われど、大事なのは「読者さんにとって、わかりやすいか・読みやすいか・理解しやすいか」であることに変わりはありません。 今日は、編集者っぽく「日本語の文章の書き方」について。あなたは、疑問符（？）や感嘆符（！）の後に空き（スペース）を入れてますか？ なぜアキを入れるのでしょうか？ それは……。 疑問符（？）や感嘆符（！）のあとにはアキをいれるのがオススメ編集の基本として、疑問符（？）や感嘆符（！）のあとにはアキをいれる（スペースをいれる）という慣習があります。 編集者としては納得して受け入れている、ある意味ルールなのです。しか
2018年になってここまで、ウェブデザインにとって驚くべき年を迎えています。これまで何年もかけて進化してきたデザインが、デザインシステムやタクタイルデザインのような新しいトレンド、また楽しく元気なレトロスタイルの復活などにつながっています。これまで以上に、ウェブデザインの現状と今後の流れを考えることが重要になってきます。 この記事では、2018年にもっとも影響を及ぼしている、6つの最新ウェブデザインのトレンドをまとめてご紹介します。 01. コンポーネントを元にした「デザインシステム」 まだデザインシステム（英: Design System）を導入していないなら、きっと今後数年以内に利用することになるでしょう。最新版となる 2017-18 Enterprise UX Industry Report によると、デザインシステムを利用していない企業の67%が、現在作成中と答えています。 デザイ
最も人気が高くパワフルなWeb開発ツール。 Firebugはこれまでに驚異的な成功を収めており、その12年の歴史において、オープンソースのツールとして、Web開発者の間でカルト的な人気を築き上げてきました。登場したのは2005年、Firefoxブラウザでコードの検査、編集、デバッグをできるようにした最初のツールです。また、どのようなWebページにおいても、CSS、HTML、JavaScriptの調査を可能にしています。これは大きな前進でした。 Firebugは多くの人の注目を集め、現在でも100万人以上の熱心なファンがそれを使用しています。 そのような中、来月リリースされるFirefox Quantum (バージョン57) で、Firebugが終焉を迎えるのは残念でなりません。ただし、現在のFirefox Developer ToolsにFirebugの全ての機能が盛り込まれている点につい
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
トレンドの変化やCSSの進化によって、最近は大量のツールや便利なリソースが公開されるようになりました。 この記事では、2017年これまでにリリースされた便利CSSツールやリソースをカテゴリごとにまとめてご紹介します。 制作時間の節約にもなるCSSライブラリとツールは、より手軽に利用できるだけでなく、Flexbox や CSS Grid といったまだ完全に理解していないCSSプロパティを習得するのにも最適といえるでしょう。 【2016年版】ウェブ制作を快適にする、知っておきたい無料オンラインツール50選 デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度 コンテンツ目次 1. CSS Flexbox ツール＆ライブラリ 2. CSS Grid ツール＆ライブラリ 3. CSSコンポーネント 4. CSS アニメーションツール＆ライブラリ 5. CSSリファレンス、ガイド＆
Zoltánはウェブアプリケーションやインターネットを愛してやまない、Mito（ブダペストの広告代理店）のUXデザイナーです。 新しいデザインを考える際に、ありきたりな既存のUIパターンをそのまま使うよりも、すべてを一から作り直したいと思うデザイナーは珍しくありません。 しかし、そういったデザインのセオリーは、既に導入されてテストが済んでおり、うまく機能しているものだということを覚えておかなければなりません。ユーザーがよく知っているものなので、説明もマニュアルも必要ありません。ユーザーが目新しさよりもユーザビリティを求めることを考えれば、スタンダードなパターンは結局はユーザーに恩恵を与えるものなのです。 ユーザーの目的を阻む「フリクション」を取り除いてUXを改善しよう 新しいアプローチが必要だということもあるでしょうが、その場合は新しいソリューションが現在のものよりも100％良いという確証
webengineeer.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
