ファビコンを簡単に作成できる無料ツール！テキスト・画像・絵文字から生成でき、各デバイスのサイズにも対応 -favicon.io数回 or 1クリックするだけで、デスクトップ・タブレット・スマホに適した複数サイズのファビコンを簡単に生成できる無料オンラインツールを紹介します。 ファビコンは、テキスト・画像・絵文字から簡単に生成でき、日本語や自分の画像からでも生成できます。また、複数の画像サイズ・フォーマット、それらの実装コードも生成してくれる優れものです。
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
プログレスバーの実装もこれなら簡単！複数ファイルにも対応した超軽量JavaScriptライブラリ -preload-it | コリス
動画ファイル、音楽ファイル、画像ファイルなど、大容量のファイルを使用したコンテンツでは、プログレスバーがあると非常に便利です。さまざまなタイプのファイルをプリロードするための超軽量（1kb）JavaScriptライブラリを紹介します。 異なるタイプの複数ファイルを平行にロードする際もサポートした優れ物です。
multi.js - 複数選択のドロップダウンをリッチに変身 MOONGIFT
WebのフォームはHTML5でリッチになっていますが、それでもまだまだ標準では使い勝手がよくありません。とは言え、それを改善するためのライブラリも出てきていますので、積極的に取り入れていきましょう。 今回紹介するのはmulti.js、複数選択できるselectタグを格好良くしてくれるライブラリです。 multi.jsの使い方 multi.jsを使っていない場合はこうなります。正直選びづらいし、キーボードを組み合わせるのは面倒です。 それがこうなります。 絞り込みできます。選択すると右側のリストに追加されます。 すでに選ばれているものは色が薄くなります。 multi.jsを使うと複数選択するドロップダウンが一気に便利になります。大きさも変わるので、それに合わせてデザインを考える必要がありますが、ぴったりと当てはまるケースもありそうです。 multi.jsはJavaScript製のオープンソー
複数行にも対応！CSS を使ってはみ出した文字を「･･･」で省略する方法 ｜ KLUTCHE
範囲内に収まらない文字を「･･･」で省略する方法です。 使うのは CSS のみで、各ブラウザにも対応しています。 長い文章の冒頭だけ表示したいときってあると思います。 実現する方法としては、 ・PHP 等を使ってサーバサイドで文字列を丸める ・text-overflow を使う なんかがあると思います。 PHP なんかでは文字列を指定の幅でトリミングすることを「丸める」と言います。 なんか専門用語的で格好良いので 「ちょっとこの文字列丸めといて」 的に使うことをおすすめします。 しかし、上記2点の欠点として、 ・PHP は文字数指定の省略なので、可変する幅に応じることができない ・text-overflow: ellipsis; は複数行に対応できない が挙げられます。 使う場面が限定されすぎです。 そんな時に使って欲しいが今回の方法です。 デモ デモページ ウインドウの狭くしてもらうとわ
[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes
スクリプトは外部ファイルを記述するだけ、レスポンシブ用画像の配置や設定はHTMLベースで記述できるスクリプトを紹介します。 超軽量（5.8KB）で、jQueryなど他のスクリプトは不要です。
![[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes](https://cdn-ak-scissors.b.st-hatena.com/image/square/135514efb4694efbd56028728da237fc700e16b1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016022202.png)
無料版は3分、だが便利！ブラウザのさまざまなバージョンで簡単に表示確認・レスポンシブの確認ができる -Browserling
IE, Chrome, Firefox, Opera, Safariなど、ブラウザのさまざまなバージョンでの表示確認、レスポンシブの確認などが、簡単にブラウザ上でできるオンラインサービスを紹介します。 有料版だと、ローカルでも確認できる優れものです。 Browserling Browserlingは無料版と有料版が提供されており、無料版はセッションは3分、IEは9/Vistaのみ（他は全バージョン可）、解像度は1024x768のみと使用条件は限られますが、なかなか便利だと思います。 セッションはインタラクティブ 単なるスクリーンショットではなく、ブラウザ上のさまざまなインタラクションを実行できます。 本物のブラウザを使用 サーバー上では本物のブラウザを動作させており、エミュレータなどの偽のブラウザではありません。 最新ブラウザへの対応 最新ブラウザがリリースされたら、すぐにインストールを行
[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack
デモページ: フィールドセット FormHackの使い方 FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。 カスタマイズは、Sassファイルの上部にまとめられています。 /* FormHack v1.0.0 (formhack.io) */ // Config ----------------------------- // Font $fh-font-family: 'Raleway', sans-serif $fh-font-size: 16px $fh-font-color: rgb(40, 40, 40) // Borders $fh-border-radius: 5px $fh-border-width: 1px $fh-border-style: solid $fh-border-co
![[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack](https://cdn-ak-scissors.b.st-hatena.com/image/square/db8b9840475a6890e8fd894a96d4d6cf1d2d7f90/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060801.png)
Firefox 38 が正式リリース、レスポンシブ・イメージ、ruby 要素のサポートなど
Firefox 38 が正式リリースされ、自動更新も提供開始されました。picture 要素がデフォルトで有効になり、srcset 属性が使えるようになったことで、レスポンシブ・イメージの利用が可能になりました。またルビへの対応が行われています。 Firefox の最新版、Firefox 38 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。自動更新が少し遅れて、38.0.1 として届いたので、リリース直後に少し問題があったみたいですね。 picture 要素がデフォルトで有効になり、srcset 属性が使えるようになったことで、所謂レスポンシブ・イメージ （Responsive images） の利用が可能になりました。また、ruby 要素、CSS Ruby への対応が行われ、ルビの使用が可能になっています。 Firefox 38.0 リリースノート An
picture 要素（レスポンシブ・イメージを実現する） - HTML （HTML Living Standard） タグリファレンス
picture 要素は、所謂レスポンシブ・イメージ （Responsive images） を実現するための要素です。 picture 要素内に内包された img 要素と source 要素に srcset 属性、media 属性、sizes 属性を組み合わせて指定することで、デバイスピクセル比、ビューポート、画面サイズなどに応じた、複数のイメージソースを出し分けることが可能になります。 複数イメージソースの指定は、picture 要素内に source 要素を記述する事で行います。詳しくは source 要素の項目をご確認ください。
公開前の記事を共有できるWordPressプラグイン「Public Post Preview」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ひろゆきです。 メディア運営などにWordPressを使われている方も多いのではないでしょうか？ ブログの記事作成に便利なWordPressですが、非公開状態の記事を外部の人に確認してもらいたいときってありますよね。 今日は、公開前の記事を外部の人に共有できるプラグイン「Public Post Preview」をご紹介します。 特徴 Public Post Previewの特徴は下記の通り。 下書き、予約投稿、レビュー待ちの記事に対して、ログインなしでも閲覧できるプレビュー用のリンクを生成できる プレビュー用リンクに有効期限を設定できる カスタム投稿タイプにも対応している 導入方法 プラグインの新規追加から「Public Post Preview」で検索するか、こちらからダウンロードして、プラグインフォルダにアップロードしましょう。 ファイルの設置が完了したら有効にしてください
無料で使い捨てメールアドレスをワンクリックでゲットでき無数のアドレス追加や独自ドメインにも対応する「myTemp.email」
アカウント作成時にメールアドレスでの認証が求められる場合は多いモノですが、サービス利用者にメールアドレスを収集されるのがイヤな場合など、一定時間だけ有効な「使い捨てメールアドレス(捨てアドレス)」は非常に便利です。そんな捨てメールを、たったワンクリックで取得でき、メールエイリアスの追加も自由自在で、自分の取得済みドメイン名での捨てアドレスの作成もでき、もちろんスマートフォンにも完全対応という強力なサービスが「myTemp.email」です。 myTemp.email - Temporary Disposable Email https://mytemp.email/ 24時間使える捨てアドレスをサクッとゲットするには上記サイトの「Create My Email」をクリックするだけ。 メールボックス画面が現れ、左上に捨てアドレスが表示されました。myTemp.emailで作成されるメールアド
WordPressの多言語化（マルチ言語化）検討 – Narratives From A Counselling Room
Diversity Counseling New Zealand（http://dcnz.net）において、カウンセリングサービスを複数の言語で提供することに伴い、このサイトを多言語化することを検討している。（調査時のメモ書き） ワードプレスのサイトにおいて、この件ついてまとめているので参考にさせてもらいながら、検討してみたい。しかし、たくさんあるので、検証には少し時間がかかりそう。 WordPress で多言語サイトを作成する 多言語化プラグインにはいくつか基本的なタイプがあります。 １．言語ごとに1つの投稿を管理する方法 (例: WPML【有料】、xili-language、Polylang、Bogo)。翻訳された投稿はお互いに関連付けられ、ある投稿の翻訳投稿がどれなのかが表示されます。 ２．すべての翻訳文をひとつの投稿内に含める方法（例: qTranslate）。 ３．投稿のコンテク
[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
複数ページにも対応とは！ページに分かりやすいプロダクトツアーを加えるフレームワーク -Hopscotch
ページに分かりやすく、プロダクトツアーを加えるフレームワークを紹介します。 似たようなスクリプトはたくさんありますが、これはツアー移動のアニメーション、ツアーを戻る、そして複数ページにも対応しています。 1ページ内でのツアーでけではなく、複数ページを横断するツアーも作成できます。 Hopscotch Hopscotch -GitHub Hopscotchの特徴 Hopscotchのデモ Hopscotchの使い方 Hopscotchの特徴 イベントのコールバック ツアー中のさまざまなイベントのコールバックを装備。 マルチページ対応 HTML5のストレージやクッキーを利用して、複数ページにまたがるツアーも可能。 i18n対応 さまざまな言語での実装をサポート。 快適なレスポンス 一つひとつは軽量なインスタンス。 Hopscotchのデモ ページ自体がデモになっています。 中央下の「Tale
YouTubeの動画を繰り返し再生する方法
YouTubeの動画を繰り返し再生する方法を紹介します。 １．1曲だけ繰り返す 1曲だけ繰り返すには「Listen On Repeat」を利用します。 方法は、YouTubeで視聴している動画のドメイン「youtube」の後方に「repeat」をつけるだけです（上のサイトに行く必要はありません）。 例えば見ている動画のURLが、 http://www.youtube.com/watch?v=yjz2TvC2TT4&list=FLZ7PCOZS64V_jPGH62fTmXA の場合、URLを http://www.youtuberepeat.com/watch?v=yjz2TvC2TT4&list=FLZ7PCOZS64V_jPGH62fTmXA とするだけです。 または、「Listen On Repeat」のサイトにある検索フィールドにYouTubeの動画URLまたは検索キーワードを入力し
CSS3 PIEでIEでも背景に複数の画像を使用する | ライラックミモザライラックミモザ
ホームページ制作（Webデザイン、HTMLコーディング、WordPressカスタマイズ、ライティング）の「ライラックミモザ」 仕事でHTML5／CSS3を本格的に使用しはじめました。 HTML5にしても、CSS3にしても、まず悩ましいのがIEへの対応。もちろん、IEを対応させないわけにはいかず、CSS3をIEで使用するために、コリスさんの「たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE」で紹介されていた「CSS3 PIE」というスクリプトを利用しました。 下記はCSS3 PIEの簡単な使用法と備忘録です。 CSS3 PIEでできること CSS3 PIEは、現在CSS3のすべての機能を実現できるわけではありませんが、下記の機能に対応しています。 ・border-radius（角丸） ・box-shadow（シャドウ） ・border-image（境界線に画像
[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Selector+の特徴 CSS Browser Selector+の使い方 CSS Browser Selector+の特徴 CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。 CSS Browser Selector+が判別するの
Bootstrap向けの汎用的なモーダルボックス実装スクリプト・Bootstrap Modal
よさ気だったのでメモ。Twitter Bootstrap向けのモーダルスクリ プト、Bootstrap Modalです。既存 のモーダルクラスの代替、または パッチとして利用出来る、との事 です。 Bootstrap向けのモーダルスクリプトです。レスポンシブ対応でスタックも可能との事です。デモを触って見ましたが結構使い勝手が良さそうでした。 こういうやつ。モーダルボックス内は自由にマークアップできます。Bootstrap用なので勿論レスポンシブにも対応しています。 このようにモーダルを表示したまま、別のモーダルボックスを呼び出すことも出来ます。 汎用性も高そうです。これは覚えておこう・・・時間が作れなかったのでコードやサンプルは割愛しました。貧乏暇無し。 Bootstrap Modal
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
521 Dimensions