Yukimi Sato さんのアバター 38views

IE11とWindowsEdge用CSSハック

IE11 @media all and (-ms-high-contrast:none){ *::-ms-backdrop, .クラス名 {     セレクタ } } Windows Edge @supports (-ms-accelera 2017年2月21日
Yukimi Sato さんのアバター 105views

SVG Spriteを作成する

SVGでアイコンやらイラストやら作成した時に、 CSSでスタイルを変更できるようにしたい! でもファイルをベタで読み込むのはちょっと… それに1つのファイルに纏めたい! という場合にどうぞ! ちなみに、サイズがバラバラでも全く問題ないです。 2016年11月11日
Yukimi Sato さんのアバター 394views

jQueryでスクロールしたら上からヌルっと出て来るヘッダーを実装する

参考:【jQuery】ナビゲーションをアニメーションで表示しページ上部に固定する方法 – North-Geek 参考サイトだと、ヘッダーはトップイメージの下にあり、そこが基準になっていますが、今回は下記のようにしました。 一番上 2016年10月24日
Yukimi Sato さんのアバター 49views

Safari(〜9系)でのcssアニメーション指定

10系(最新)ではanimationで全部纏めて記述できるのですが、〜9系は -webkit 接頭語とそれぞれを指定してあげる必要があります。 -webkit-animation-name: topBtn; -webkit-animatio 2016年10月20日
Yukimi Sato さんのアバター 129views

【CSS】複数読み込んでいたCSSを1つにまとめる

PageSpeedさんに「読み込むリソース多いよ!」と怒られた?ので、CSSを雑に1つにまとめてみました。 纏めたCSS bootstrap.min.css bootstrap-responsive.min.css odometer-the 2016年10月13日
Yukimi Sato さんのアバター 231views

Odometerを実装してみる

Odometer というカッチョイイJSを実装してみました。 仕様 クリックしたら数値変わる クリック用のナビゲーションつけよう 実装 HTML <ul> <li id="month" class="select"> 2016年9月9日
Yukimi Sato さんのアバター 287views

【jQuery】ハンバーガーアイコンを開閉時に変化させる【Bootstrap】

参考:3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる HTML <a href="#" id="panel-btn"><span id="panel-btn-icon"></span> 2016年8月18日
Yukimi Sato さんのアバター 648views

【CSS】Bootstrapで組んだナビメニューをタブレットでもスマホ表示にする

レスポンシブデザインでつきまとうナビメニューの形と幅の悩みですが、Bootstrapはデフォルトではタブレットの表示がスマホと同じようにたたまれたメニューにはならないので、それを解決するCSSです。 iPadでBootstrapのnavba 2016年8月17日
Yukimi Sato さんのアバター 108views

iOSでposition:fixedを指定した時に、他の要素が突き抜けているとヌルヌル動く

レスポンシブで作っている時に、他の要素に幅指定が入っていて、尚且つ横幅を突き抜けている時、overflow-x を指定していても、 position:fixed を指定してあるheaderがヌルヌルとスクロールする度に上にちょっとずつ動きま 2016年8月15日
Yukimi Sato さんのアバター 51views

マウスオンすると中央から線が伸びてくるCSS

SCSSでの記述になります。liの擬似クラスを利用してborderを表示させています。 ul { margin: 0; padding: 0; li { position: relative; margin: 0 0.5em; // bor 2016年7月27日
Yukimi Sato さんのアバター 46views

Macでパスワード付きZipを作成する

ターミナルを使って作成します。 cd Desktop/ →デスクトップに移動。(zipにしたいファイルがデスクトップにある場合)  ちなみに、De まで打って tab を押すと補完してくれます。便利。 zip -e zipファイルにした時の 2016年7月21日
Yukimi Sato さんのアバター 17views

jQueryでpreloadする

/head 付近に記載しましょう。/body 付近に書いたらなんにもならないですw $(function(){ jQuery.preloadImages = function(){ for(var i = 0; i<arguments 2016年7月15日
Yukimi Sato さんのアバター 47views

【Movable Type】サブカテゴリを6個ずつ並べる

知らなかったんですが、MTSubCategoriesタグで<$mt:Var name="__counter__"$>って使えなかったんですね… リストを一定件数ずつ区切って出力するを参考にしました。(そのままともいう) やりたい 2016年6月21日
Yukimi Sato さんのアバター 18views

【Movable Type 5】カテゴリに公開エントリが1件も所属していないと再構築されない

久しぶりにMT触ったら「なんで再構築されない??」と悩んだのでメモ。 まさにこれなのですが、使ってるMTは5.2.3!おうのう… アップデートもできない状況なので、諦めて対処するとします。。 2016年6月16日
Yukimi Sato さんのアバター 17views

Gmailで送信を取り消せるようにする(最大30秒)

メールって送信を取り消したくなる時ってありますよね。(固有名詞の確認や漏れがないかなど) そんな時、Gmailなら設定1つで最大30秒間送信を待っててくれます。 ※でもその間に他の操作(画面の更新やタグの削除)を行うとダイヤログ消えてできな 2016年6月10日
Yukimi Sato さんのアバター 32views

GoogleDriveのスプレッドシートで改行を入れる方法

仕事柄、GoogleDriveのスプレッドシートは毎日使っているのですが、改行を入れる方法だけずっとわからず、不便だったのでメモ。 command + Enter わざわざ調べるほどではないけど、地味に面倒くさい改行。 エクセルとかはShi 2016年6月10日
Yukimi Sato さんのアバター 30views

【印刷】続・中身が無いのに余分なページが出てしまう時【CSS】

【印刷】中身が無いのに余分なページが出てしまう時【CSS】 だけではChromeとIE11で改善できていなかったので続編です(震え声) html, body { height: auto; } heightに100%と指定が入っている場合は 2016年5月27日
Yukimi Sato さんのアバター 47views

【印刷】中身が無いのに余分なページが出てしまう時【CSS】

はみ出る要素が全く見当たらないのに、余分な真っ白ページが出来てしまうううううううう と、なった時に確認しておきたい箇所。 コンテンツ用のCSS 面倒だなって思ってコンテンツ用のCSS読み込んでいませんか? 印刷には印刷専用のCSSだけを読み 2016年5月19日
Yukimi Sato さんのアバター 253views

Macの時計が1分ぐらいズレて気になっちゃう人へ

はい、わたしのことですね。 ふとした時に1分ほどズレていることに気が付き、気になって気になって落ち着かなかったので調べてみました。 下記が原因だったようです。 Macの時刻表示がずれる場合の解決法 Macはインターネット上で公開されているタ 2016年4月6日
Yukimi Sato さんのアバター 604views

Twitterの画像を原寸で取得する(iPhoneでの操作版)

Twitterの画像を原寸で取得する ですが、 PCブラウザで見るよりもスマホで見ることが多かったりする人にはどうやればいいんだー!となると思いましたので、iPhone操作版もメモ。 ※ 公式アプリを使っての操作方法です。他アプリは適宜置き 2016年4月6日
Yukimi Sato さんのアバター 189views

JQueryを使わずにクリックで表示非表示する

JS <script language="Javascript"> function Click_Sub() { if (document.all.searchHideForm.style.display == "none") 2015年9月14日
Yukimi Sato さんのアバター 39views

【GitHub】–ours と –theirs

現在、master を見ていて、features/new-thumbnail というブランチをマージする時にコンフリクトしてしまった場合、手動マージをせずにどちらかの状態にまるっと差し替えたい時に使います。 その時に --ours か -- 2015年8月18日
Yukimi Sato さんのアバター 1,923views

【GitHub】間違って行ったマージを取り消す

ぼんやりマージしたらテスト用に試していたブランチをもマージしてしまったので、その取消方法をメモ。 コマンドでやればすぐですが、参照場所を変更するのがめんd以下略だったので、GitHubのwebサイト上での操作メモです。 (該当ブランチを削除 2015年8月14日
Yukimi Sato さんのアバター 1,399views

【Bootstrap】Bootstrap3でアコーディオン

BootstrapCDNとFont−AwesomeCDNを使って実装します。 Bootstrap3でアイコン付アコーディオン(Collapse)を使用するを参考にさせていただきました。 HTML <!DOCTYPE html> 2015年8月13日
Yukimi Sato さんのアバター 144views

【IE8】「overflow-x: auto;」は互換モードを変更すると縦スクロールが出る

以前の対応の残りだったのですが、 overflow-x: auto; この指定だと普通は横スクロールの制御に関してなんですが、何故か互換モードを変更したIE8だと縦スクロールが表示されます。 元々IE専用指定なので、使わない場合はサクっと削 2015年8月12日
Yukimi Sato さんのアバター 58views

【CSS】基本的な命名規則【落とし穴】

すごく基本的なことなのですが、今日ド忘れしてやらかしたのでメモ… 4カラムの時〜という指定でclassを指定しようとした時に、素直に 4column と付与してしまったんですが、CSSは数字から始まるクラスは認識されません…! 正しくは、 2015年8月10日
Yukimi Sato さんのアバター 58views

【CSS】box-shadowで外側に罫線を付ける

border-boxを付けない限りは幅、高さにborderは干渉しますが、完全に外側に付けるにはbox-shadowで以下のように指定すれば可能なようです。 div { box-shadow : 0 0 0 10px #000; } 10p 2015年8月7日
Yukimi Sato さんのアバター 4,481views

Chromeのデスクトップ通知でGmailだけポップアップが出ない時

デスクトップ通知は使っているのに、なぜかGmailだけポップアップ通知が来なくて困っている人向け。 1,設定画面を開く chrome://settings/browser をブラウザのアドレスバーに入れて設定画面を開く。 2,詳細設定を開く 2015年8月5日
Yukimi Sato さんのアバター 78views

【CSS】[class*="XXX"]でXXXが名前に入っているclass全てに指定する

bootstrapのCSSを見ていたら見慣れない指定が。 .controls-row [class*="XXX"] { margin-left: 0; } なんだろうと調べてみると、 どうやらclass名にXXXが含まれている ということの 2015年8月4日
Yukimi Sato さんのアバター 84views

Gmailのラベルはサブラベルも作成できるのでうまく活用しよう

複数人で同じアカウントを見れるようにしていると、誰がどのメールなのかわからなくなりますよね。 そんな時はラベルをつけると思いますが、更にサブラベルまで作成できます。 サブラベルは「ラベル名/サブラベル名」という表示になるので、親ラベルがわか 2015年7月31日