1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
favicon.icoを設置｜Webサイトの高速化｜dot blog
favicon.icoの設置に関する解説。favicon.icoはブラウザのバックグラウンドで常に要求されます。設定せずNot Foundが返されるとウェブサイトの速度低下を招きますのでしっかりと設置設定を行いブラウザにキャッシュさせましょう。 フロントエンド開発 Web高速化 SEOこの記事は約 分で読めます。（文字） favicon.icoを設置してWebサイトの高速化ウェブサイトにファビコンが設置されておらずブラウザからのリクエストでファビコンが見つからない場合は繰り返しリクエストを送ります。サーバに不要な負荷をかけウェブサイト全体の動作速度低下を招きますので必ず設置しておきましょう。 必要なfaviconのサイズと種類基本的に必要となるファビコンのサイズと種類は下記の2種類です。 favicon.icoapple-touch-icon.png『favicon.ico』はブラウザのタ
源泉徴収税を手取額から逆算 - 高精度計算サイト
源泉徴収税 支払金額が100万円以下の金額の源泉徴収税 = 支払金額 × 10.21％ 支払金額が100万円超える金額の源泉徴収税 = (支払金額-100万) × 20.42％ 端数処理の関係で計算結果に１円程度の誤差が発生することがあります。 源泉徴収される対象 原稿料、講演料など（ただし懸賞応募作品の入選者などへの支払は５万以下はしなくてもよい) 弁護士、公認会計士、司法書士等へ払う報酬 社会保険診療報酬支払基金が支払う診療報酬 プロ野球選手、プロサッカー選手、プロテニスの選手，モデルや外交員等に支払う報酬 芸能人や芸能プロダクションを営む個人に支払う報酬 宴会等で接待を行うコンパニオンやホステスへ支払う報酬 プロ野球選手の契約金など、役務の提供契約をすることにより一時に支払う契約金 広告宣伝のための賞金や馬主に支払う競馬の賞金 ※計算結果や情報等に関して当サイトは一切責任を負いません
印刷通販の決定版/印刷会社【グラフィック】
多くのお客様にご利用、 ご満足をいただいております。2024年6月現在で、98万人の法人・個人会員登録、110万人の方にご利用を頂いております。
CSSで表現する圏点(IE対応)・蛍光マーカー・手書き風下線 [無料ホームページ作成クラウドサービス まめわざ]
まめわざでは、ブログの編集機能などと同じように、文字の一部のリンク化や強調ができます。 この強調表現で、圏点（傍点・脇点）・蛍光マーカー・手書き風下線が使えるようになりました。
![CSSで表現する圏点(IE対応)・蛍光マーカー・手書き風下線 [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8b1a6cf5d9422da0bead6a2a4ed59bac5c158a92/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1482198486274s.jpg)
動画コンテンツ（Video）の構造化データをマークアップする方法
動画コンテンツ（Video）の構造化データをマークアップする方法を紹介します。 動画コンテンツの構造化データをマークアップすると、Googleはその動画に関する情報をより正確に理解できるようになります。 Googleのマット・カッツは、YouTubeなどの動画配信サービスにアップロードした動画であっても、自分のサイトに埋め込む際には動画の構造化データをマークアップすることを推奨しています。構造化データをマークアップすることで、Googleがその動画コンテンツをより正確に理解することにつながるためです。 JSON-LDでマークアップする 動画コンテンツ（Video）をJSON-LDでマークアップする方法です。JSON-LDはページのどこに記述しても問題ありませんが、通常は<head>タグ内に記述します。 <script type="application/ld+json"> { "@cont
YoutubeサムネイルURL取得｜ちょっと便利なツール・ジェネレーター置き場
Youtubeの動画URLを貼り付けると自動的にサムネイルのURLを取得して表示します。 大きなサイズのサムネイルがあるかどうかは、概ね動画の解像度によります。 関連 : Youtube左右反転再生 動画のURLを貼り付けてください
今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 本サイト（ICS MEDIA）では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま
SublimeTextの教科書で紹介されてるプラグインまとめ - Qiita
via Impress Japan: Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ サンプルPDF4章の目次より ※説明は私の調べたものなのでかなり適当です。 SideBarEnhancements サイドバー右クリックのメニューを拡張 titoBouzout/SideBarEnhancements LineEndings 改行コードの変更。 SublimeText/LineEndings ※現状、SublimeText3で動かないです。143Pのコラムで動かし方について言及がある模様。 TrailingSpaces 行末の半角スペースを削除。 SublimeText/TrailingSpaces Focus Last Tab Sublime Text 2 では、Chrome などのタブブラウザーと同じように command + 1
職業別！SublimeText3の作業が超捗る便利プラグインとテクニック19選 | 侍エンジニアブログ
テキストエディタのSublimeText3ってとっても便利ですよね。特に「プラグイン（パッケージ）」で機能を自分好みにカスタマイズ出来る点が素晴らしいです。 ただ、いざSublimeText3のプラグインを使おうと思っても、プラグインが山ほどあってどれを選んで良いのかわからないですよね。さらにプラグインだけでなく、色々なWEBサービスやショートカットなどのテクニックも抑えると、よりSublimeText3を活用することができちゃうんです。 そこで今回は、様々な立場にあわせて作業がはかどるプラグインとテクニック、「計19種」をご紹介します！ ぜひどんどん活用して、快適なSublimeText3ライフをお送りください。SublimeText3の導入方法やプラグインの使い方がわからない方はこちらの記事もご覧ください。 まず絶対入れておくべきSublimeTextプラグイン11選 タグなどの開始/
ライターからエンジニアまでインストールしておくべき！高機能テキストエディタ「Sublime Text 3」の使い方
ブログ記事を書いたり、あるいはプログラミングを行なったりと、様々なシーンで活躍するテキストエディタ。 ライターやエンジニアの方であれば、何かしらのテキストエディタを利用されているのではないでしょうか。 Windowsには「メモ帳」、Macには「メモ」アプリが標準で使えるようになっていますが、コードを色分けして、テキスト編集以外の面での使いやすさを求めるのであれば、これら標準アプリだと少し物足りないと感じる方もいるでしょう。 そこでチェックしておきたいのが*「Sublime Text」*です。 このアプリを使えば入力補完ができたり、タブで編集するテキストを切り替えたり、プラグインによって機能を拡張したりすることもできます。 今回は、2013年からのβ版運用を経て2017年9月に正式にリリースされた*「Sublime Text 3」*の特徴や使い方を、初心者向けに解説します。 Sublime
CSSだけでも実装できる！ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS, JavaScriptのまとめ
ページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。 現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。 イラスト: Girls Design Materials CSSでページをアニメーションでスクロールさせる JavaScript単体でページをアニメーションでスクロールさせる プラグインでページをアニメーションでスクロールさせる CSSでページをアニメーションでスクロールさせる CSSのプロパティ「Scroll-behavior」を使用すると、アニメーションを使用してスムーズにスクロールさせることができます。 Scroll-behaviorのサポートブラウザ scroll-behavior -MDN web
意外と知らない!?高さを揃えるコーディング方法 | サイドスリーブログ
webデザイナーのむーみんです。 横並びしているボックスの文字数で高さが揃わないのは嫌だなあ・・・jsでやろうかなっと思ったりする方も多いと思いますが、HTMLとCSSでできちゃう簡単な方法を2つご紹介したいと思います。 HTML <ul> <li>文字数ばらばらのテキストが入ります。</li> <li>文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。</li> <li>文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。</li> <li>文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。</li> </ul>
WAI-ARIA の基礎知識 | Accessible & Usable
公開日 : 2014年4月15日 (2018年1月20日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) WAI-ARIA 1.0 が、2014年3月20日付で W3C の勧告 (Recommendation) になりました。 WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェース (UI) であっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cyberludens
FireFoxでWebサイトの表示がおかしくなる | Kiyolog
メンテナンスページ | BE YOURSELF - 移住して10年。ゼロからはじめたヨーロッパ生活奮闘記
ためしがき
http://www.okuni.me/entry/css-slide-animation-keyframes
[かぶ] Chromebookを新たに購入すると、とりあえず行う私にとっての幾つかのルーチンのようなもの。![[かぶ] Chromebookを新たに購入すると、とりあえず行う私にとっての幾つかのルーチンのようなもの。](https://cdn-ak-scissors.b.st-hatena.com/image/square/09267e64d08b90378a198ad15756173705932590/height=288;version=1;width=512/https%3A%2F%2Foffice-kabu.jp%2Fwp-content%2Fuploads%2F2017%2F11%2Fc101pa-life-01-02.jpg)
