6756
【注意!soilは砂糖には使えません!!そしてsoilとkarariを比べてみた!】 : ココロのくらし
やはりお値段なりの差はありそうですね!

我が家ではsoilもkarariも両方使っていますが
やはりこの結果を見ると
今後はsoilを使っていきたいなぁと思いました。
23 hours ago
soil 類似品について
電子レンジにかけると珪藻土の微細な孔が発泡・結合してしまいます。製品として機能性が失われてしまうため、電子レンジは使用できません。
23 hours ago
illustratorからテキストのみを抽出する方法 | CREAMU
ちょっとメモ。illustrator(CS6)からテキストのみを抽出するには、以下のようにします。

「ファイル / 書き出し… / ファイル形式:テキスト形式(txt)」

「書き出し」ボタンをクリックすると、txtファイルに書き出されます。


プラグインとか使わなくてよかった。。
4 days ago
結露を防止する裏ワザに効果はあるか検証してみた!予想外の・・・・・ | 快適生活の 時間ですよ!
1.霧吹きの中に450ccの水をいれる。
2.水を入れた後、50ccの中性洗剤いれる
3.水と中性洗剤がなじむように、振って泡立ててから使用
5 days ago
HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ | コリス
HTML 5.2では、マークアップに複数の<main>要素を持つことができるようになりました。表示させない余分な<main>要素には、hidden属性で非表示にする必要があります。

HTML

1
2
3
<main>...</main>  
<main hidden>...</main>  
<main hidden>...</main>

既に知っている思いますが、CSSで要素を隠す方法はいくつかあります。しかし、この場合は余分な<main>要素はhidden属性を使用して隠さなくてはなりません。ちなみに、CSSで要素を隠す方法には「display: none;」「visibility: hidden;」がありますが、これらはvalidではありません。
6 days ago
レスポンシブデザインにおけるテキストのコントロール - テキストの折り返しを制御する | CodeGrid
折り返し位置を調節したい箇所に<br>を挟み、メディアクエリを使用して、特定のブレークポイントをきっかけに、その<br>のdisplayプロパティ値を切り替えることで文章の改行位置をコントロールすることもできます。ただ、この見出しの場合は、どの画面幅で折り返すかがわからなかったということと、メディアクエリを多用し過ぎるとメンテナンスコストがかかるため、display: inline-block;を使用し調節しました。
10 days ago
実務から学ぶFlexbox - 実例とバグ対策 | CodeGrid
次のデモでは、文章中に外部リンクが登場し、そのアイコン画像とテキストの垂直位置を揃えるために、display: inline-flex;を使用しています。
10 days ago
Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳
なるほど…いかにもiframeかと思ったらfixedで、きちんとレスポンシブね…
10 days ago
【CSS3】Transform(変形)関連のまとめ - Qiita
画像処理をするGPUという機器があります。
アニメーションをするときにCPUではなく、画像処理が得意なGPUに任せる方が効率的です。
transformプロパティにtranslateの3D関連の値を指定するとブラウザはGPUを利用して描画します。
そのため、translateの3D関連の値を指定する方が描画速度が速くなります。
例えば、headerにtranslateの3D関連の値を指定した場合、そのページ全てがGPUで処理するわけはなく、値が指定されているheaderのみGPUで処理するみたいです。
描画速度を速くするために、関係のない箇所にtranslateの3D関連の値を指定するという方法はしない方が良いみたいです。
GPUを使いすぎると逆にパフォーマンスが低下することがあるみたいですので、本当に必要な箇所のみ使うことをお勧めします。
11 days ago
Layouts – Pure.css
cssフレームワーク

Side Menuとかもあるー
13 days ago
細かすぎるけど伝わってほしい私的BEMプラクティス30(ぐらい) | ダーシマ・ヱンヂニヤリング
HTML構造上の入れ子関係があっても、常にブロック直下のエレメントであるように書く。
13 days ago
ホームーページにカルーセルを配置する利点と欠点、デザインに役立つ8つのガイドライン | Adobe Creative Station
ニールセン・ノーマン・グループの推奨は単語3つにつき1秒の自動スクロール
マウスオーバーの状態では自動スクロールを一時停止する。これにより、ユーザーが体験を制御する余地が増える
13 days ago
text-decoration-skip - CSS | MDN
「要素のどのような箇所で装飾をスキップするかを指定できます。テキスト要素への下線指定だけでなく、親要素によって引かれた下線にも適用されます」
13 days ago
illustratorでUIデザイン:基本編 - Two hats
illustratorのスポイトツールのデフォルトはコピー元のアピアランス(線・塗りの色・太さ、効果)等を全てコピーしてしまいます。そのため、ある部分の色だけコピーしたいということが出来なくて、いちいちカラーパレットから色調整を行っていたと思います。

スポイトツールを選択してからShiftを押しながらクリックすると任意の点の色をコピーできます。これは画像の任意の点でも使用できます。

***

ボタンの中の文字のように入れ子の要素を中央揃えしたいとき、illustratorで単純に中央揃えするとボタンの方まで移動してしまいます。こういうときボタンの位置は変えたくないですよね。

下記の手順をふむと揃える基準を決めることができます。

揃えたい要素を選択(shiftなどを使って)。
最後に基準にしたい要素を単純にクリック(太線で囲われます)。
揃えを実行する
このようにすると、基準の要素は動かずそれ以外の要素が移動します。
13 days ago
illustratorでUIデザイン:設定編 - Two hats
よく使うフォントをシンボルとしてあらかじめ登録しておくと、いちいちフォントの種類を選ぶという手間が省けるようになります。
13 days ago
IllustratorでWeb向け、ピクセルベースの作業を行う上での設定(完全版) - DTP Transit
IllustratorをWeb制作に使い、ビットマップ書き出しするときのアレコレについて、これまでいろいろと取り上げてきましたが、現在、下記の制作方針が最強だと思われます(ツッコミ歓迎ですので、何かあればお気軽に)。

ドキュメントプロファイルは「Web」。[プレビューモード]を「ピクセル」に変更、[新規オブジェクトをピクセルグリッドに整合]はオフ
[線の位置]を「内側」にして作業
[アピアランス]パネルメニューの[新規アートに基本アピアランスを適用]のチェックをはずしておく
[新規オブジェクトをピクセルグリッドに整合]はオフに
[プレビュー境界を使用]にチェックを入れる
キー入力を「1ピクセル」に
アートボードの座標に注意
sRGBを基準に
13 days ago
いただいた質問とその回答 2017(Illustrator) - DTP Transit
Illustrator CC 2018(2017年10月リリース)以降は、アートボードを複数選択し、[整列]パネルで整列を行えます。

Googleとアドビ(など)が共同開発したNotoというフォントがあります。正式には、Googleは「Noto Sans」、アドビは「Source Hans」、「源ノ角ゴシック」「源ノ明朝」と読んでいます。
13 days ago
HTML5のmainタグ IEのバグ | -Keiichi Kurokawa- webデザイナー 黒川 慶一
mainタグをブロック要素として認識しないIEの糞バグ。
デバッガーでborderを表示させてみたら高さをとってないのはわかって、heightを指定したりflexを切ったり、何を試しても駄目で、私も同様にmain…? まさかね…ってsectionに変えてみて発覚した。
25 days ago
これからのレイアウトはGrid Layoutで決まり?特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA
ページ全体のレイアウトでは、ページを大きなエリアに分割したレイアウトをするため Grid Layout
ナビゲーションでは、 列の中でアイテムを整列させ、アイテムの上下方向の位置を揃えるため Flexbox
セクション1では、画像にテキストが回り込むレイアウトをするため Float
セクション2では、格子状に並びアイテム間の余白をとったレイアウトをするため Grid Layout
27 days ago
【Trainer's Recipe】CSS3の疑似クラス「:not」についてのちょっと便利なTips - Qiita
「:not()」疑似クラスを使用すると、以下のようなCSSで同じように「一番最後のli要素だけborder-bottomをなしにする」ということを実現することができるんです!

test3.css
li:not(:last-child){
border-bottom:solid 1px #333;
}
4 weeks ago
画像  |  Web  |  Google Developers
image-set を使用して高解像度の画像を表示する
CSS の image-set() 関数を使用して background プロパティの動作を拡張することで、特性の異なる各デバイス向けに複数の画像ファイルを簡単に配信できます。これを利用して、ブラウザでデバイスの特性に応じて最適な画像を選択できます。たとえば、ディスプレイが 2x の場合は 2x の画像を使用する、デバイスが 2x でもネットワークが低速の場合は 1x の画像を使用する、といったことが可能です。

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

↑ いいけどIEとFx全滅
4 weeks ago
レスポンシブWebデザインのブレイクポイント、何ピクセルにすればいいの? | 株式会社グッドクロス
スマートフォンの解像度は736px(iPhone 6Plusを横持ちした時の横幅)以下におさまり、一方、一部の例外はあるものの、多くのタブレットは、 768px(iPadを縦持ちした時の横幅)以上であることが分かります。

つまり「ブレイクポイントを1つだけ設定するなら、736pxより大きく、768px未満のところに持って来れば良いのでは」というのが今回の結論です!
4 weeks ago
Google MapやYoutubeをレスポンシブ対応させる方法 - Qiita
この手法を使いたい場合、親要素にフレキシブルボックスが適応されていると、上手く表示しないです。
4 weeks ago
4864–170821「Jedit Ω」でPDFの文字化けも解消 – shiology
便利な機能がもり沢山。例えばUnicodeの正規化(合成・分解)がワンアクションでできます。PDFからコピペした日本語かな文字の濁点・半濁点が分離してしまう問題を一瞬で解決。素晴らしい!!
4 weeks ago
レスポンシブに便利なCSSのvh/vw/vmin/vmaxの基本と使い方とは - WPJ
jQueryプラグインFitTextについて聞いたり、使ったりした経験があることでしょう。このプラグインを使えば、見出しが親要素の幅いっぱいになるように調整できます。先に述べたようにViewport単位で設定された値はviewportのサイズに直結して変わるので、Viewport単位を使って見出しのfont-sizeを設定すると、画面に見出しをぴったり収められます。viewportの幅が変わるたびに、ブラウザーは見出しのテキストを適切に自動調整します。font-sizeの初期値をViewport単位できちんと設定しさえすれば良いのです。

この方法でfont-sizeを設定する際の主な課題は、テキストサイズがviewportによって異なってしまうことです。たとえば、font-sizeを8vwに設定すると、viewportの幅1200pxに対しては約96px、400pxに対しては33px、1920pxに対しては154pxになります。これでは読みやすさの点でフォントが大きすぎたり小さすぎたりということになりかねません。
4 weeks ago
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス
「vw」はビューポートの幅に基づいてそのサイズを決定します。このビューポートの幅というのは、ブラウザのスクロールバーを含んだサイズで計算されます。
4 weeks ago
今さら聞けない!Retinaディスプレイに対応したデザインをするために知っておきたい4つのこと|ferret [フェレット]
srcsetを使う一番のメリットは、対応している ブラウザであれば、必要のない画像は読み込まないという点です。
ほかに JavaScriptであとから高画質の画像に差し替えるような方法などがありますが、その場合は低解像度の画像をダウンロードしたあとに、高解像度の画像をダウンロードするという形になり、余分な通信が発生してしまいます。
しかし、srcsetを使えば、必要な画像だけ読み込むので、無駄な通信は行いません。
5 weeks ago
禁煙12ヶ月目 | 禁煙実践中の方々があつまる掲示板サイト
見ることなくなって(というか禁煙、を意識すると吸いたくなるので無意識になるように)いつの間にか12ヶ月目、遠いところと思っていたところに来た。

その投稿もなんとなく、わかるわかるなあって感じ。

「周りに喫煙者が多いため今でも、一本頂戴っていいそうになる自分がいます。やばい、やばい。一本おばけは、いつでもあなたのそばにいますよ。」
5 weeks ago
まだまだまだまだダイエット生活は続くよどこまでも|40kg痩せたけど、女子力磨くの忘れてた
長い…

長すぎるよ私のダイエット…

 

今日みたいに時々、先の事を考えて気が遠くなる事がある

1年11か月掛かって、41kg落としてもまだまだかぁ…

 

でもそれは2年前にスタートした、95.5kgの時からそうだったんだからね。

時々、先を見つめては気が遠くなっていたんだから

あまり遠くばかり見つめずに、目の前の事を頑張っていくしかないね笑い泣き

***

長いなあ…
もう二年超えた。

越えたけどマイナス30kgにも達していない…
当初は一年で戻すって言ってたんだけどなあ。

目標はちょうどあと10kgだよ…

いつ終わるんだろう…
5 weeks ago
ローカルに"Noto Sans CJK JP"がなければWebフォントの"Noto Sans JP"を利用するCSSの指定方法 - Qiita
現在ウェブフォントとして提供されている"Noto Sans"の日本語フォントは下記の2種類があります。
後発の"JP"ならばCSSで字詰めできます。

ウェブフォント 特徴
Noto Sans Japanese 字詰めできない
Noto Sans JP 字詰めできる
両者の詳しい違いは下記を。
5 weeks ago
悩ましい PDF まわりのアクセシビリティ — Website Usability Info
PDF コンテンツはあくまでも例外という建て付けにして、制作が楽だからという理由だけで安易にコンテンツを PDF 展開しないよう、組織内の共通認識を育むことが大切です。

JMAさんはあきらめました
5 weeks ago
Google が提供する日本語 Web フォント - Qiita
Noto シリーズはすべての言語に対応すべく、フォントが未対応だった場合に表示される四角(□)、通称"豆腐"が無くなるようにという思いを込めて Noto(no more tofu)と名付けられています。(参考:Wikipedia Noto)
5 weeks ago
[jQuery] jQueryのバージョンとタイプ – コピペで使える JavaScript逆引きリファレンス
当記事は、「jQueryをダウンロードしようとしたら、いろいろなのがあってどれをダウンロードしたらいいか分からない!」とお悩みの方の参考になればと思います。
5 weeks ago
アクセシビリティを意識した CSS の書き方 - Frasco
そのコンテンツが単に装飾のためだけに使われている場合、aria-hidden を使ってスクリーンリーダ等から隠すようにしてください。


私はリサーチを行い、様々なアプローチがあることを知りました。そのため、専門家に意見を尋ね、それらを完全に理解するために推奨される方法を明らかにしました。

.visually-hidden {
/* コンテンツの流れから切り離す */
position: absolute;
/* 誤ったコードに対処するための回避策 */
white-space: nowrap;
/* 可能な限り文字サイズを小さくするための処理
* (スクリーンリーダー中には height と width が 0 のものを無視するため)
*/
width: 1px;
height: 1px;
/* オーバーフローしているコンテンツを隠す */
overflow: hidden;
/* 要素サイズを変更しうるプロパティのリセット */
border: 0;
padding: 0;
/* 要素のどの部分が表示されるかを定義するもの */
/* 古いブラウザでは使用できない */
clip: rect(0 0 0 0);
/* 最近のブラウザ用
* コンテンツを非表示にする設定 */
clip-path: inset(50%);
/* 今現在なぜ-1pxがここで設定されるかは分かっていないそうです。
* それに加えていくつか問題もあるそうです
* (参考: https://github.com/h5bp/html5-boilerplate/issues/1985)
*/
margin: -1px;
}
5 weeks ago
Fancybox:HTML表示時に高さを自動調整する|JavaScript|グラビカ学習帳~ホームページ制作会社 gravity works(グラビティ・ワークス)の備忘録と知識の共有と蓄積
画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。

ただし表示完了時に関数を呼び出せるので、
それを利用してフレームサイズを変更する方法が紹介されていました。

jQuery and Fancybox: How to automatically set the height of an iframe lightbox

$("#sample").fancybox({
  'width' : 500,
  'type' : 'iframe',
});

上記のようにしてHTMLを表示させると思いますが、
それに下記の赤字部分を追加します。

$("#sample").fancybox({
  'width' : 500,
  'type' : 'iframe',
  'scrolling' : 'no',
  'onComplete' : function() {
    $('#fancybox-frame').load(function() {
      $('#fancybox-content').height($(this).contents().find('body').height());
      $('#fancybox-overlay').height($(document).height());
    });
  }
});
6 weeks ago
fancybox レスポンシブ対応のモーダル系プラグイン | らうんじ
ちなみにロードと同時に実行したい場合には以下。こうすると画面遷移してきたと同時にポップアップのように表示してくれる。


2
3
$(window).load(function(){
$.fancybox.open($('.fancybox'));
});
6 weeks ago
フリーランスエンジニアで準業務委託をやってみてわかった。働き方はバイトと同じだと感じる理由 - ニートが怖くて生きていけるか
出勤日調整をしないといけない月もある

僕は週3日勤務で契約すると、基本的には月12日勤務になる。
出勤日は曜日固定で決まっている。

でも、毎月毎月いい感じに12日勤務になるわけじゃない。
月によっては月曜日が多い月があったり、少ない月があったりするわけだ。
こうなると先方と勤務日調整をしないといけない。

今月は月曜日が少ないので、代わりに金曜日も来ていいですか?
とかの交渉をしないといけない。

***

そうそう。こういうの。
7 weeks ago
2018年のウェブフォントについて - Hail2u
鍵になるのはoptionalという値になる。この値にしておくと100msと少しの間ダウンロードしてみた結果、ユーザー・エージェントが回線が遅いと判断した場合はフォントをダウンロードしなくなるため、数十秒後に突然フォントが切り替わり、読んでいた位置がどっかにいってしまうなどということがなくなる。
7 weeks ago
ガスコンロが赤い炎になったときはどうすればいいの?3つの原因と対処法 | monostudio[モノスタジオ] - Part 4
ガスコンロがある部屋で加湿器を使用している場合は、加湿機が原因となっているかもしれません。

加湿用の水に水道水を使っていることがほとんどでしょうが、水道水に含まれているカルシウムやアルカリ金属がガスコンロの炎と反応し、赤い炎を発生させている可能性があります。


出典:s3-ap-northeast-1.amazonaws.com

炎色反応という言葉を聞いたことはありませんか?金属が炎と反応すると、金属の種類によってそれぞれ特有の色へ変化する反応のことをいいます。

特に、タンクに供給された水道水を直接霧状にして部屋に放出するタイプの超音波式加湿機を使っている場合に多く見られる現象です。

この場合は加湿器の使用を止めれば炎の色が元の正常な青色へ戻りますが、不完全燃焼とは違って危険性はないので、加湿器を引き続き使っても問題ありません。

ええー!
知らなかったー!
7 weeks ago
Sound Control – Macでアプリごと音量を変更する方法! サウンドボリュームを個別に調整しよう
本アプリでは他にも、Mac本体のメディア音量の出力 / 入力設定の切り替えができたり、ショートカットキーを設定することで音量変更をメニューバーからではなくキーボード上で完結できるようになる機能など、様々カスタマイズできる余地があります。
8 weeks ago
Macで複数のアプリを個別に音声出力できるツール「Audio Hijack」が便利すぎて手放せない | TEAM EX NOTES
Audio Hijackとは、Rogue Amoeba製のMac OS用シェアウェアで、販売価格は49ドル。10分までなら無料で使用可能なソフトだ。

「なんだシェアウェアか……」と回れ右しないでいただきたい。シェアウェアなだけあって、かゆいところに手が届く親切設計となっているのだ。

Audio Hijackでは、任意のアプリの出力先を変えることはもちろん、間にEQをインサートして使用したり、録音できるレコーダーを挟んだり出来る優れものだ。
8 weeks ago
【実例あり】2017年の横並びレイアウトCSSはこれで決まり!【決定版】 | 株式会社ギルモット
※モダンブラウザではほとんどcalc()をサポートしているため、width: calc(100% / 6)でももちろんOKです!
9 weeks ago
« earlier      
(*´∀`*)ハァァ adobe affiliate airplay alfred amazon android aperture apple appletv application bootstrap byword camera chrome cloud coda computer css d40 design dropbox emmet evernote facebook firefox flickr font food&drink generator goods google google+ grd greenclip health helloproject html5 html&xhtml hulu icon ifttt illustrator ime instagram ios ipad iphone ipod itunes javascript javascriptのお勉強 jquery kindle+本+電子書籍 mac macosx markdown motor movie music oocss pelargonium pentax photo photoshop php pinterest plug-in qiita rss safari sass seo smartphone snippet sns soundcloud sublimetext taberareloo template tips tumblr tutorials twitter ui/ux webサービス webライティング web制作 web漫画 widget wimax windows wordpress workflows youtube あとで読む いつか行く お店 お店・植物園・温室 ちょい欲し ぬこ はてな アクセシビリティ アップグレード アドオン アニメ アプリ インテリア エディタ オキザリス ガンダム ガーデニング コケ サボテン スミレ セダム ダイエット チランジア チートシート ツール テキストエディタ テクスチャ テーマ ネタ ハオルチア ハロプロ ハーブ フリーランス ブラウザ ブラシ ブログ ヘッドフォン ベランダ問題 マンガ ラン ラーメン レンズ 便利 写真 分類学 動物 動画 参考 園芸 多肉植物 学名 家電 山野草 後で観る 戦姫絶唱シンフォギア 料理上手の台所 映画 暮らし 果物 植物 球根植物 用土・改良材 画像 病気・虫 盆栽 着生植物 知識 糖質制限 素材 肥料・薬剤 自転車 葦サボ 観葉植物 資材 野菜

Copy this bookmark:



description:


tags: