CDN <script nomodule src="https://cdn.jsdelivr.net/npm/ie-buster@2.0.2/dist/ie-buster.min.js"></script> <script nomodule>ieBuster.init()</script> <script> に nomodule を付与すると、ES Modules に対応しているモダンブラウザで JavaScript の読み込み自体をキャンセルできます。 npm $ npm install ie-buster import ieBuster from "ie-buster" // Use ieBuster.init() // OR (If window becomes undefined) process.browser && ieBuster.init() // OR (If proce

About クリエイター仲間に直接相談したい 実務に活かせる的確な情報を得たい Qranoko Community は、ネットワーク上のクリエイター向けコミュニティです。新しい Web サービスやアプリの情報共有、技術的な相談・試行錯誤だけではなく、「表立っては言えないけど、業務としては大切なテクニック」「炎上しそうだから言えないけど、モヤモヤしてる疑問」なども気軽に出し合える空間‬を目指しています。

腹が減ってはコードが書けぬ！ウェブ制作の腹ごなしに、CSSフレームワークMUSUBii（むすびー）をどうぞ。 MUSUBiiは、日本語サイトのデザイン・コーディングを元気づけます。 必要なものを食べておくウェブ制作は小技の積み重ねなので、毎回1から作っていたら辛いですよね。MUSUBiiにはボタン・フォーム・グリッドなど利用頻度の高い汎用スタイルが詰まっています。まずはMUSUBiiをほおばってウェブ制作を始めてみましょう。

和筆の繊細な線、面をつかった大胆な線、ぼかしの濃淡で明るさや暗さを表現できる、イラストレーター・絵師さん向けのIllustrator用ブラシ素材を紹介します。 今回もコリス限定ライセンスで、商用利用無料でダウンロードできます。すぐに使わなくても、今のうちにダウンロードしておくのがオススメです。 ※通常は個人利用のみ無料です。 商用無料の期間は終了しました、現在は個人利用のみ無料です。 Japan ProBrush™ Free プロ仕様の和筆ブラシ ブラシのダウンロードとインストール プロ仕様の和筆ブラシ Japan ProBrush™はコリスとのコラボを重ねて、日本人のユーザーのためのブラシをということで制作されたプロのイラストレーター・絵師さんの使用を意図した高品質なブラシセットです。

CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe

ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえておきたいCSSの各種リセット ressの特徴 ress: html, グローバルセレクタの定義 ress: 一般的な要素の定義 ress: フォーム要素の定義 ress: メディア要素の定義 ress: アクセシビリティ用の定義 ress: ::selectionの定義 ressの特徴 ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな

How to watch NASA's first Boeing Starliner crewed flight launch today (scrubbed)

How to watch Polaris Dawn astronauts attempt the first commercial spacewalk

Macで新規のファイルを保存するとき、いつもどこに保存していますか？私は大概の場合、デスクトップに保存してしまいます。 保存したファイルはとりあえず全てデスクトップに保存して、そこから各種フォルダに振り分ける。ファイルの整理はこんな感じ。 そして「Clean」というアプリを使って、デスクトップに残った無駄ファイルを一日一回、自動的に削除するように設定しています。

「Tweetbot」は、Twitter アプリの中でも人気のあるクライアントですが、記事執筆時点でiOS版とMac版の両方が定価1,200円→600円に値下げされています。 「Tweetbot」は、複数のリストを並べて表示させてタイムラインをチェックできるほか、アクティビティの表示、Twitter・Instagram・Vine動画の再生にも対応。 iOS版の最新バージョンでは、Twitterに導入されたタイムラインフィルタ機能や、YouTube動画をブラウザで再生する際に動画の隅に「www」を表示させる機能も追加されていますよ！ あとがき @torizoさんをフォロー僕は現在、Mac・iPhone・iPadのすべてのデバイスで「Tweetbot」を利用していますが、全デバイス間の同期もシームレスに利用でき、快適にTwitterを楽しむことができています。 現在、期間限定での半額セールとなっ

▼ちなみにブラウザの拡張機能からウェブページをキャプチャーするには、ツールバーのアイコンをクリックします。 ▼こんな感じの画面が出るので、左上にあるボタンをクリックするとウェブページキャプチャー、右上のボタンをクリックするとウェブページ内の画像を一括インポートすることができます。 ブラウザの拡張機能は「Safari「Chrome」に対応し、 Pixave の公式サイトのトップページ最下段にあるリンクからダウンロードできます。 余談ですが、Mac画像管理アプリとして有名だった「Ember」は今後の開発をほぼ断念しており、今後も安心して使えるアプリは「Pixave」ぐらいしかないと思っています。 以前、フリー素材で有名なマックスさんに、「Pixave」にはiCloud同期機能はないよーとツイートしたところ、「Pixave」の公式アカウントからすぐに「iCloud同期できるよー」とお返事がありま

WordPress4.4から実装された、画像に指定されている「srcset」属性を削除して無効にする方法 WordPress4.4から実装されたsrcset属性は、閲覧する端末(retinaなど)によって読み込む画像を変更する(レスポンシブイメージと呼ばれている)ための属性、という認識を私はしています。 ところで、srcset属性の是非についてはいろいろな意見があると思うので置いておくとして、この属性を削除して無効にする方法があります。 「何らかの理由で有効・無効の設定をしたいこともあるかも」と思ったので、メモっておくことにしました。コードは「functions.php」に追記すればOKです。 //画像に指定されているscrset属性を削除 add_filter( 'wp_calculate_image_srcset', '__return_false' ); 参考リンクwp_calcul

昔からよく見かける動きですが、下のように「複数の小さな画像（サムネイル）をクリック（タップ）すると、メインの大きな画像が切り替わる」という機能を実装する機会がありました。 小さな画像をクリック（タップ）するとメインの大きな画像が切り替わる この実装って、最近ではlabel,input要素を使って、JavaScriptを使わずに似たようなことができる方法もありますね。 私は通常はlabel,input要素を使って実装していますが、コードの書き方、見せ方によってはJavaScriptを使う必要もありました。 いろんなパターンで実装できることを覚えておくと、今後使える選択肢が増えるので、この機会にやりかたをメモ書きました。 クリック（タップ）で画像を切り替えるサンプルcodepenにサンプルを書きましたので「似たようなことがしたい」という場合は、ご参考ください。 html<div id="con

TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ

JQuery LinedTextAreaはtextareaに行数を自動付与するスクリプトです。jQueryに依存します。textareaに新たに書き込んでも行数は表示されます。用途は多くはなさそうですが個人的に必要になりそうなので備忘録。ライセンスはMIT。 JQuery LinedTextArea

Tocbotはページ内の見出しを元に、目次(table of contents)を自動作成するスクリプトです。Tocifyに触発されて作成したそうですが、1つの違いはjQueryに依存せず、バニラなスクリプトで動作する点だそう。1ページ内の文章が長いコンテンツや仕様書ページなんかに良さそうです。ライセンスはMITです。 Tocbot