Web制作あるある「画像ない問題」を解決！ダミー画像の生成サービス15選
「準備はまだできていないけど、仮のダミー画像を入れておきたい」ウェブ制作中にそんな場面に遭遇することもあるでしょう。 この記事では、ダミー画像を手軽に生成できるジェネレーター、オンラインツールをまとめてご紹介します。 そもそもダミー画像とは？ ウェブ制作中に、「画像の準備はできていないけど、とりあえずレイアウトの確認だけでもしたい」、というときに利用する仮の画像、これが「ダミー画像」です。 画像のサイズはもちろん、スタイルなどもimgタグに直接記述するだけで、ダミー画像を表示できます。 試しに以下のようにimgタグを記述してみると、 <img src="https://placehold.jp/272343/ffd803/640x400.png"> ほんの少しの指定を行うだけで、サイトの雰囲気にあった色合いのダミー画像を用意することができます。サイズ指定も手軽なので、お気に入りのダミー画像
CSSの実装方法を少し改善するだけで、Webページの読み込み・表示を最適化するテクニックのまとめ
CSSの記述方法やレイアウトの構築方法で、ページの表示速度、読み込み時に発生するレイアウトのずれ、Webフォントの表示、CSSアニメーション、アクションを起こした時の反応の速度など、ウェブバイタルに大きな影響を与えます。 ウェブバイタル（Web Vitals）を最適化するためのCSSのテクニックを紹介します。 CSS for Web Vitals by Katie Hempenius, Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レイアウトのCSSを改善 画像のCSSを改善 画像によるレイアウトシフトのCSSを改善 WebフォントのCSSを改善 アニメーションのCSSを改善 クリティカルCSS 終わりに はじめに CSSの記述方法やレイアウトの構築方法で、コアウェブバイタル（Core
便利で爆速！ウェブ制作向け最新オンラインツール、無料素材37個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピード、生産性がアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用すれば、面倒な作業をラクにこなし、作業の効率化をアップできるでしょう。「なぜ今まで使っていなかったのか」、そんな気持ちにさせる便利ツールが揃いました。 各ツールはカテゴリごとに整理しています、以下のリストを参考にどうぞ。 コンテンツ目次 1. Web制作便利ツール 2. イラスト系ライブラリ 3. 配色ツール 4. デザインコレクション 5. プロトタイプツール 6. コラボレーションツール 7. 面白、クリエイティブツール Web制作フローが変わる！便利な最新オンラインツールまとめ Web制作便利ツール BrowserFrame 各種ブラウザ付きでスクリーンショットを撮影できるオンラインツール。目的の
グーグルが発表した新ウェブ技術「Portals」とは--「Google Chrome」向けのウェブナビゲーションシステム
Googleは米国時間5月7日、年次開発者会議「Google I/O 2019」で、ウェブページのローディングやナビゲーションに新風を吹き込む「Portals」と呼ばれる新たなテクノロジーを発表した。 GoogleによるとPortalsは<portal>という新たなHTMLタグを使って動作するという。このタグの動作は、従来からある<iframe>タグとよく似ている。ウェブ開発者は<portal>タグを指定することで、自らのページ内にリモートコンテンツを埋め込めるようになる。 <portal>タグと<iframe>タグの違いは何かと言えば、Googleの新たなPortalsテクノロジーが<iframe>タグの制約を取り去ったものだというところにある。 Portalsを使用することでユーザーは、埋め込んだコンテンツへのナビゲーションが可能になるとGoogleは述べている。<iframe>タグで
Googleが公開していない古いウェブサイトを見つける方法（追記・修正あり） | ライフハッカー・ジャパン
「場」としてのインターネットは、絶えず拡大しています。毎日、新しいウェブページが次々につくられています。その数があまりにも多いので、その一部は時とともに消えていっているような気がします。 でも実のところ、それらはGoogleから消えているだけなのかもしれません。 10年前のサイトはGoogleに表示されなくなった？ウェブデベロッパー／ブロガーのTim Bray氏やMarco Fioretti氏が2018年に投稿した記事によれば、どうやらGoogleはインターネット全体をインデックスするのをやめ、そのせいで一部の古いサイト（10年よりも前のもの）はGoogle検索に表示されなくなったようなのです。 Googleは、ユーザーが聞いてくる妙な質問に逐一答える情報コンシェルジュという大変な仕事をさせられているので、彼らの決定も理解できるところはあります。 とはいえ、その記憶力が過去10年に制限され
260種類以上のアイコンが無料で商用利用OK、CSSツールキットも付属したアイコンフォント「Fontisto」
TwitterやInstagramのロゴやピクトグラムなど、ウェブサイトでは多種多様なアイコンが使われますが、そういったアイコンをウェブフォントにした「Fontisto」が無料で公開されています。商用利用もOKで、さらにCSSツールキットも付属。コードライセンスは「MIT License」、文書ライセンスが「Creative Commons BY3.0」、フォントライセンスは「SIL Open Font License 1.1」となっています。 Fontisto - the iconic font and css toolkit http://www.fontisto.com/ GitHub - kenangundogan/fontisto: The iconic font and CSS toolkit. Fontisto gives you scalable vector icons
外部提供インタフェース（API）| 国立国会図書館サーチについて
17. APIのご利用について国立国会図書館サーチの外部提供インタフェース（API）をご利用いただくにあたっては、事前に以下の点をお読みいただいたうえで、条件を守ってご利用ください。 また、「著作権・リンクについて」も併せてご覧ください。 17-1. 国立国会図書館サーチで提供するAPI国立国会図書館サーチ（NDLサーチ）では、次のAPIを提供しています。 検索用APINDLサーチの検索ができます。SRU、OpenSearch、OpenURLに対応しています。ハーベスト用APINDLサーチに格納されたメタデータのダウンロードができます。OAI-PMHで提供しています。 ※機能の一部でキャッシュ機能を用いているため、リクエスト条件やタイミングによって応答性能が大きく変わる場合があります。書影APINDLサーチに保存・公開されている書影を検索・表示できます。※各APIの詳細についてお知りになり
デザインを学びたい全ての方へ - 海外のデザイン学習リソース200選
「デザインに興味があるのですが、どうやってデザインを学べばいいのでしょう？」という質問は、以前に書かせて頂いた「米国のデザイン教育から学んだこと」という記事に対して一番多かった反響の1つでした。これはデザインの分野があまりに多様なためにどこから手を付けていいのか分かりづらいというのが原因のように思います。 そこで今回は情報全体を俯瞰出来るようにするべく、下記のそれぞれのカテゴリー別に、それぞれ有益なリソースをまとめました。このリストが皆さんのデザイン学習リソースとしてお役立てば幸いです。 海外のデザイン学習リソース 23のカテゴリーOnline Learning（オンライン学習）UI/Web:（ユーザインターフェイス／ウェブ）General（一般）Product（プロダクト）Branding:（ブランディング）Book Cover Design:（ブックカバーデザイン）Design Por
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
