Wikimedia Commons
Browsing? Please use the search box at the top of this page or the links to the right. Feel free to subscribe to our syndicated feeds. Using? To fulfill the free license requirements, please read our Reuse guide. You can also request a file. Identifying? Have a browse through Category:Unidentified subjects. If you find something you can identify, write a note on the item's talk page. Creating? Che
画像と吹き出しテキストで会話風にするHTMLとCSS。 | Fantastech（ファンタステック）
カスタマイズのゴール 今回のカスタマイズのゴールはこちらです。 LINEのような色にすることもできます。 もちろん、レスポンシブに対応するようにしました。では、コードをご紹介します。 HTMLコード まずはHTMLのコード。下記のコードの日本語の部分を変更するだけで「左からの吹き出し」が作れます。 <div class="balloon"> <figure class="balloon-image-left"> <img src="画像のパス（URL）" alt="画像名"> <figcaption class="balloon-image-description"> 人の名前や画像の説明 </figcaption> </figure> <div class="balloon-text-right"> <p> 吹き出しの中のテキスト </p> </div> </div> 「右からの吹き出し
rel=preload - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
LetsEnhance: Image quality AI - make photos HD/4k & more online
Get product photos that do the selling for you. Crystal-clear, perfectly staged, and ready to shine online.
サイト高速化に必須の link rel=preload とは？（使い方とサンプルHTML・CSS） | 株式会社ウェブ企画パートナーズ
サイト高速化にあたり Google の PageSpeed Insights と睨めっこをしている際、「キー リクエストのプリロード」という項目が出現しました。 キー リクエストのプリロード <link rel="preload"> を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。 ↓こんな感じのです この改善がサイト高速化に効く使える技術であることがわかったのですが、なかなか理解しにくかったので、今回は <link rel="preload"> についてわかりやすく説明していきます。 これまでスルーしてしまっていた方は、これを機会に覚え、使いこなせるようにしてみましょう。 preload＝プリロードと読むそうです。 その名の通り、プリ＝先行、ロード＝読み込み、で先行読み込みをブラウザに指示する機能になります。 link 要素なの
hrの使いやすそうなスタイリングいろいろ | かちびと.net
Result いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にした的な感じになっています css .hr_b {/*シャドウ付き*/ height: 8px; border: 0; box-shadow: 0 8px 8px -8px #666 inset; } .hr_c {/*フルワイド*/ position: relative; width: 100vw; margin: 10px 0 10px -50vw; left: 50%; } .hr_d {/*両端フェードアウト*/ border: 0; height: 1px; background-image: -webkit-linear-gradient(left, #f0f0f0, #666, #f0f0f0); background-image: linear-gradient(left, #
Squoosh
SmallSmaller images mean faster load times. Squoosh can reduce file size and maintain high quality. SimpleOpen your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. SecureWorried about privacy? Images never leave your device since Squoosh does all the work locally.
NASA - Image of the the Day - Gallery
Vivid Portrait of Interacting Galaxies Marks Webb’s Second Anniversary
ChromeでSVGが表示されない現象 - Qiita
特定のSVGファイルがChrome（少なくともv51.0.2704.84 から、2017年12月26日現在の最新バージョンである v63.0.3239.108まで）で表示されない現象があるようです。 特定のSVGファイルとは、image要素のxlink：href 属性が xlink：href = "data：img/png; と記述されているものです。 IE, Edge, FireFox, Safariのそれぞれ最新版ではこの現象は確認できませんでした。 解決法 テキストエディタでSVGファイルを開き、xlink：href = "data：img/png; (画像赤罫線で囲った箇所) をxlink：href = "data：image/png;と書き換えてやると正しく表示されます。 Photoshop, Illustratorの現行バージョンで書き出しを行うと、Chromeで表示されないx
Responsive Breakpoints Generator
Easily generate the optimal responsive image dimensions One image for all screen resolutions and different devices is not enough. An image per pixel is too much - so how can someone automatically choose the optimal responsive image sizes? Learn more... Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They com
[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe
サポートするタッチジェスチャーの一覧 PhotoSwipeの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <!-- Core CSS file --> <link rel="stylesheet" href="path/to/photoswipe.css"> <!-- Skin CSS file (optional) --> <link rel="stylesheet" href="path/to/default-skin/default-skin.css"> <!-- Core JS file --> <script src="path/to/photoswipe.min.js"></script> <!-- UI JS file --> <script src="path/to/photoswipe-ui-default.min.j
![[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe](https://cdn-ak-scissors.b.st-hatena.com/image/square/d65d654192b6c35de8b5e9ca6ebde66452cbfe56/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014121601.png)
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
CSS3で「ストライプ」を作るならrepeating-linear-gradient関数が便利
以前『8ステップで完成！CSS3で「斜めのストライプ」を作る方法』という記事を書きましたが、CSS3の仕様書を見ると、繰り返し機能を持つ「repeating-linear-gradient()関数」を使うともっと簡単に「ストライプ」を実装できることがわかりました。今回はこの「repeating-linear-gradient()関数」と、同じく放射線状のグラデーションを作るradial-gradient()関数の繰り返し機能を持った「repeating-radial-gradient()関数」を使って「ストライプ」を作る方法を紹介します。 repeating-linear-gradient()関数とrepeating-radial-gradient()関数は、それぞれlinear-gradient()関数、radial-gradient()関数と同じ引数を取り、同じような動作をしますが、指
画像圧縮サイト／TinyPNG
Smart WebP, PNG and JPEG Compression for Faster WebsitesOptimize now
これで一撃！簡単にOGP画像をつくれる2つの秘密道具！
こんにちは！デザイナーのわりえもんです！ ドラえもんみたいな見た目の、のび太みたいななにかです。 デザイン制作に役立つ秘密道具を紹介します！ さて今回はサイト・アプリ制作に必需品な Facebook OGP画像つくりに役立つ2つの秘密道具をお教えします！ 2014年1月現在、OGP画像の表示には大きくわけて2種類あります。 一つの画像で、どっちの表示でもきれいにつくるのは結構悩みますよね。 のび太くんには到底つくれなさそうです。 でも、たった2つのの秘密道具で、OGPつくりは劇的に楽になります！ 秘密道具その1 : ただ画像をいれるだけ！秘密のpsd！ 今回のために用意した秘密のpsd を用意しました！ こちらからダウンロードしてみてください！ PSD DOWNLOAD 「見せたい要素が横長」の場合 これは横長いロゴです。ロゴの部分がどんな表示でも切れないようにしたいですね。 これを全ての
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Picrew｜つくってあそべる画像メーカー
Illustrations | unDraw
Remove Background from Image – remove.bg
PageWeight by imgix
Loading...
