Browse to find the images that fit your needs and click to download. Use the on-the-fly color image generation to match your brand identity.

この記事は食べログアドベントカレンダー2020の4日目の記事です。 この記事を執筆するのは、食べログでフロントエンドチームに所属する佐伯です。 皆さんマークアップはお好きでしょうか。僕は好きです。 HTML、CSSでWebサイトが作れるのはもちろんのこと、CSSやSVGを駆使すれば、JavaScriptが必要になりそうであろう複雑なUIなども簡潔に作成出来るからです。 JavaScriptはBabelなどのおかげでIE11も比較的対応しやすいですが、マークアップはそうはいきません。Polyfillが対応していないことや、対応していたとしてもReactなどのフレームワークとの共存出来るかなど問題点があるため、IE11に合わせるしかありませんでした。 しかしながら、IE11の情勢も変わってきました。 2020年3月よりIEでYoutubeを閲覧するとアラートが表示されるようになっています。 ま

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 初学者によくある共通点 Webデザインを学習中の方のレビュー（デザインのチェック）をしていて、いくつか共通のことがあることに気づいたのでまとめてみました。 フォントの種類を使いすぎてしまう最小フォントサイズは10pxフォントの規約についてワイヤーフレームがあるとデザインがワイヤーフレームに寄ってしまう余白はきちんとあるのに違和感があるドロップシャドウやぼかしが濃いめ写真素材の検索時のキーワードの

はじめに 皆さんは ZeroSSL を知っていますか？個人でウェブサイトを運営している皆さんであれば、多くの方は Let's Encrypt を利用されていると思います。 https://letsencrypt.org/ja/ もちろん僕も使っています。僕の様なエンジニアの方であれば SSL の仕組みもおおよそ理解もしているし、コマンドラインの実行方法も知っておられるのでウェブサイトの SSL 証明書を取得する事もそれほど難しい事ではないでしょう。 しかしそれほど詳しくない方が certbot の様なコマンドを使って SSL 証明書を発行するのは割と難しい事です。そこでご紹介したいのが ZeroSSL です。 https://zerossl.com/ ZeroSSL とは ZeroSSL もまだあまり名前が知られていないせいか、Google 検索で「ZeroSSL」を検索すると「ZeroS

こんにちは！Mercari Advent Calendar 2020 の3日目は、メルカリWebPlatformチーム/Software Engineerの@_mkazutaka がお送りします。普段はメルカリのウェブ周りの開発をしておりGoやPHPやTypeScriptを書いています。 メルカリでは半期に一度エンジニアのためのお祭りMercari Hack Weekを開催しています。この記事では、第2回Mercari Hack Weekから筆者が取り組んでいるRust/Wasmを使ったバーコードリーダについて紹介します。 こちらプロダクションには出してるものでありません。お願いすればプロダクションへのリリースを許してもらえたと思いますが、筆者自身が出さない選択肢を取ったのでそれも含めて紹介します。 (注釈: いくつかの画像処理の話が出てきますが、筆者は画像処理の専門家でもなければ大学院で

闇の魔術に対する防衛術 Advent Calendar 2020の三日目 はじめに データの可視化は非常に難しい。 まずデータの抽出が難しい ・データソースごとの整合性が取れているか ・取得したデータとソースデータに欠損が生じていないか ・SQL文を実行したサマリの結果が部分的に抜け落ちていないか。 その確認は時間的にも精神的にも苦痛。 しかし、苦労して抽出したデータも使い方で全くの無駄になる その例として「可視化や統計」部分に着目してお話をしようと考えた。 データの背景を知らない人には、データ可視化が歩み寄る手段になるし、伝えたい事をインパクトを伴って伝えられるなど非常にメリットである。 ※ただし 「可視化」の使い方によっては誤った理解をさせることも可能。 伝えたい事だけを正しいように見せる方法もあり、 可視化に詳しくない人に誤解を与えて自分の主張を通すこともできるかもしれない。 これは

リンク www.citybus.city.takatsuki.osaka.jp 高槻市営バス 大阪府高槻市の市営バス「高槻市営バス」は、高槻市内に路線網を広げる、近畿圏では数少ない公営バスです。時刻表、運賃、運行状況などをご覧いただけます。 2 users 5

Chrome・Safari・Firefoxで比較 クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（パフォーマンス編） この記事は『Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザの開発者機能』の後編になります。 前編ではブラウザーの開発者ツールがJavaScriptやCSSのコーディング・デバッグだけではなく、もっとクリエイティブな領域でも活用できることを示しました。アニメーションのリプレイやイージングの編集など、すぐに使える機能がたくさんあることをお伝えできたと思います。 後編ではもう一歩踏み込んで、アニメーションやインタラクションのパフォーマンス改善に使える開発者ツールの機能を紹介します。パフォーマンスについてはどのブラウザーもとても力を入れているので、開発者ツールも自ずと高機能です。 ブラウザーのレンダリングプ

今年から ZOZO テクノロジーズの Web エンジニアになりました。@takewell です。 もう年の瀬になりました。一年は早いですがブラウザの寿命は存外長いです。 来年はきっと Internet Explorer のサポートブラウザから外すことができるかもしれない。来年はわざわざツールを介さずとも ECMAScript 202X が動くブラウザが世界中のみなさんに使われるようになるかもしれない。そう願ってなりませんが、現実はそうではありません。 こうした課題を少しでもマシにするために webpack (シェア 76%)を代表とする ESNext (ECMAScript Next Generation) なコードをレガシーブラウザにビルドしたり、コードを単一ファイルにバンドルしたりするツールが数多く存在します。(以降、ビルド&バンドルなどの事前変換処理をプリプロセスと表記します。) こ

どうもC#erの@MeilCliです。仕事ではAndroidエンジニアをしていますがC#erなのでアドベントカレンダーではC#について書きます 今回参加しているアドベントカレンダーはこちらです。3日目の記事になります adventar.org あと、同様なカレンダーがもう一つあります adventar.org 問: どれが早いか int? n = 0; if (n.HasValue) {}// ① if (n is int) {}// ② if (n is int and int) {}// ③ if (n is not null) {}// ④ ※ Roslyn master(25 Nov 2020)時点 正解はこの記事の中盤に書いています n.HasValueとはなんぞや C#erではない人向けに解説すると、C#のnull許容型は2種類(null許容参照型・null許容値型)が存在しま

仕事をしていたら「ホームページを作りたいのですが…」とちょっと不安気な声の女性からお電話をいただきました。 最近、お電話でのお問い合わせが増えています。 メールではなくお電話でご相談いただく企業さまは「今すぐ作りたい企業」か「Webサイトにこれまで縁遠い企業」のどちらかのケースが多いです。またはその両方。 今日お電話いただいた長野市の工事業の企業様も両方のケースでした。 耳を傾けていると「ホームページを持っていないので、お見積もりがほしいのですが…」とのご相談。 制作会社あるあるですが、「どんな目的でWebサイトを必要とされていますか？」の質問から始まります。 以下、電話でのやり取りを再録します。 内容は下記の４項目になっています。 お客様の課題を聞く JBNの作り方をご説明する 制作会社の調べ方のコツをご説明する JBNも売り込む ホームページの見積もりをほしいとのお客様とのやり取り 0

ときどき1行に満たないテキストは中央寄せしたいが、1行以上になる場合は左寄せしたいことがある。これはCSSだけで簡単に実現できる。 こんなHTMLを用意してみる。短いテキストと長いテキスト、どちらも同じHTML構造になっている。

レスポンシブ対応のグリッド設計、レイアウトのバリエーション、デスクトップやスマホやタブレットの最近の状況に合わせたデザイン方法を紹介します。 グリッドの基礎知識をはじめ、最近主流のレイアウト、デザイナーがワークフローでグリッドをどのように適用させるかなど詳しく解説されています。 Responsive Grid Design: Ultimate Guide by Nitish Khagwal はじめに グリッドとは レスポンシブ対応グリッドを使用してUIをデザインするには？ カラム構造 ブレークポイント グリッドの振る舞い ツールでレイアウトのグリッドを設定するには？ デスクトップでの表示 スマホでの表示 タブレットでの表示 レイアウトのバリエーション グリッド開発のハンドオフ 終わりに はじめに 私は、グリッドを使った作業が便利だと感じています。グリッドはさまざまなレイアウト間の一貫性を維

個人開発・ポートフォリオ作成をする方に贈る いくらプロダクトが素晴らしいとしても、一見してダサいデザインだと、ユーザーは使う気がなくなってしまう。 でも、今からデザインの勉強をするのは面倒だし、そこまでこだわりがあるわけでもない。 Q. 簡単に及第点のデザインにできるサービスとかないんですか？ A. あります。 ということで、デザインのことはよくわからなくても、簡単にそれっぽくできるサービスをまとめました。 個人的には、「それっぽさ」の大部分はページレイアウトと画像、「こなれ感」は配色とフォントによって構成されていると思っています。 また、私はケチなのでここで紹介しているものは、すべて無料で使えるサービスです（課金プランはある）。 書かないこと 細かい使い方 大体有名なので、使い方はggれば出てきます。 ライセンスなどの情報 特に素材系は規約などを確認の上で使ってください。 あくまでも、こ

稲田エイジ｜BtoBのWebサイト制作／Web活用支援／コンテンツ支援／HubSpot @inada_h 「おたくでホームページ作るといくら！」と大阪弁のお爺さんから元気な電話。 ぼく「ど、どちら様ですか」 じじ「大阪の◯◯という会社ですわ。そんなんどっちゃでもいいんで、おたくでホームページ作るといくら！」 ぼく「何のWebサイトを作るご予定ですか？」 じじ「00ページだといくら！」 ↓ 2020-12-03 12:47:00 稲田エイジ｜BtoBのWebサイト制作／Web活用支援／コンテンツ支援／HubSpot @inada_h BtoBのWebサイト戦略策定、制作、Web活用支援とコンテンツ支援を担当／Web制作会社『JBN』に所属／https://t.co/jbW7xEhXPA／ミッション＝「伝わる」をふやす／HubSpot プラチナ パートナー／ユーザー・企業・社会の三方良しにWe