Yukimi Sato のアーカイブ

SVG Spriteを作成する

2016年11月11日

SVGでアイコンやらイラストやら作成した時に、 * CSSでスタイルを変更できるようにしたい! * でもファイルをベタで読み込むのはちょっと… * それに1つのファイルに纏めたい! という場合にどうぞ! ちなみに、サイズがバラバラでも全く問題ないです。 参考:[IllustratorとIcoMoonでSVGスプライトのラクラク設定!](http://www.webcreatorbox.com/tech/illustrato
続きを読む

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

2016年10月24日

参考:[【jQuery】ナビゲーションをアニメーションで表示しページ上部に固定する方法 - North-Geek](http://www.north-geek.com/entry/js-nav-fixed) 参考サイトだと、ヘッダーはトップイメージの下にあり、そこが基準になっていますが、今回は下記のようにしました。 1. 一番上にある 2. 最初はabsolute 3. 一定の位置までスクロールするとfixedに 4. そ
続きを読む

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

2016年10月20日

10系(最新)ではanimationで全部纏めて記述できるのですが、〜9系は `-webkit` 接頭語とそれぞれを指定してあげる必要があります。 ``` -webkit-animation-name: topBtn; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 0s; -webkit-animation-it
続きを読む

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

2016年10月13日

PageSpeedさんに「読み込むリソース多いよ!」と怒られた?ので、CSSを雑に1つにまとめてみました。 ### 纏めたCSS 1. bootstrap.min.css 2. bootstrap-responsive.min.css 3. odometer-theme-default.css 4. jquery-ui.min.css 5. animate.css 6. style.css ### 方
続きを読む

Odometerを実装してみる

2016年9月9日

[Odometer](https://github.com/HubSpot/odometer) というカッチョイイJSを実装してみました。 ## 仕様 * クリックしたら数値変わる * クリック用のナビゲーションつけよう ## 実装 ### HTML ``` 月額 年額 420円 840円 ``` ### JS ``` $(document).ready(f
続きを読む

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

2016年8月18日

参考:[3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる](http://weboook.blog22.fc2.com/blog-entry-406.html) ### HTML ``` ``` ### CSS ``` #panel-btn{ display: inline-block; position: relative; width: 40px; height: 40px; margin:
続きを読む

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

2016年8月17日

レスポンシブデザインでつきまとうナビメニューの形と幅の悩みですが、Bootstrapはデフォルトではタブレットの表示がスマホと同じようにたたまれたメニューにはならないので、それを解決するCSSです。 **iPadでBootstrapのnavbarをcollapseさせる** [http://qiita.com/yn01/items/2ff25dfeb0bc51257f87](http://qiita.com/yn01/items/2ff25dfeb0bc5
続きを読む

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

2016年8月15日

レスポンシブで作っている時に、他の要素に幅指定が入っていて、尚且つ横幅を突き抜けている時、`overflow-x` を指定していても、 `position:fixed` を指定してあるheaderがヌルヌルとスクロールする度に上にちょっとずつ動きます… 謎が解けるまで時間がかかったので、メモ。。
続きを読む

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

2016年7月27日

SCSSでの記述になります。liの擬似クラスを利用してborderを表示させています。 ``` ul { margin: 0; padding: 0; li { position: relative; margin: 0 0.5em; // border設定 &::after, &::before { background-color: rgba(255, 255, 255, 0.5);
続きを読む

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

2016年7月21日

ターミナルを使って作成します。 ``` cd Desktop/ ``` →デスクトップに移動。(zipにしたいファイルがデスクトップにある場合)  ちなみに、`De` まで打って `tab` を押すと補完してくれます。便利。 ``` zip -e zipファイルにした時の希望ファイル名.zip zipファイル化したいファイル名.拡張子 ``` →(ファイル名ももちろん補完可能)入力すると ``` Enter password: ```
続きを読む

jQueryでpreloadする

2016年7月15日

`/head` 付近に記載しましょう。`/body` 付近に書いたらなんにもならないですw ``` $(function(){ jQuery.preloadImages = function(){ for(var i = 0; i
続きを読む

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

2016年6月21日

知らなかったんですが、MTSubCategoriesタグで``って使えなかったんですね… [リストを一定件数ずつ区切って出力する](http://www.h-fj.com/blog/archives/2012/02/23-105159.php)を参考にしました。(そのままともいう) ### やりたいこと 1. 特定のカテゴリのサブカテゴリを表示したい 2. 6個ずつ並べたい 3. エントリが1件もないカテゴリは非表示にしたい
続きを読む

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

2016年6月16日

久しぶりにMT触ったら「なんで再構築されない??」と悩んだのでメモ。 [まさにこれ](http://hacknote.jp/archives/6405/)なのですが、使ってるMTは5.2.3!おうのう… アップデートもできない状況なので、諦めて対処するとします。。
続きを読む

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

2016年6月10日

メールって送信を取り消したくなる時ってありますよね。(固有名詞の確認や漏れがないかなど) そんな時、Gmailなら設定1つで最大30秒間送信を待っててくれます。 ※でもその間に他の操作(画面の更新やタグの削除)を行うとダイヤログ消えてできなくなりますので注意 以下、送信取消設定方法です。 1. Gmailを開く 2. 右上の歯車ボタンクリック 3. 「設定」をクリック 4. 「全般」の送
続きを読む

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

2016年6月10日

仕事柄、GoogleDriveのスプレッドシートは毎日使っているのですが、改行を入れる方法だけずっとわからず、不便だったのでメモ。 ``` command + Enter ``` わざわざ調べるほどではないけど、地味に面倒くさい改行。 エクセルとかはShift  + Enterなんですが、Shiftじゃできなくて「実装されてないんじゃ?」とずっと思っていました。
続きを読む

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

2016年5月27日

[【印刷】中身が無いのに余分なページが出てしまう時【CSS】](http://hacknote.jp/archives/19299/) だけではChromeとIE11で改善できていなかったので続編です(震え声) ``` html, body { height: auto; } ``` heightに100%と指定が入っている場合は必ずautoに変更しましょう…
続きを読む

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

2016年5月19日

はみ出る要素が全く見当たらないのに、余分な真っ白ページが出来てしまうううううううう と、なった時に確認しておきたい箇所。 ## コンテンツ用のCSS 面倒だなって思ってコンテンツ用のCSS読み込んでいませんか? 印刷には印刷専用のCSSだけを読み込むようにしましょう。 ## 印刷用のCSS 「見栄え少しは良くしたい!」なんて要望やエゴで装飾したりしていませんか? paddingやmarginは一切不要です。0指定し
続きを読む

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

2016年4月6日

はい、わたしのことですね。 ふとした時に1分ほどズレていることに気が付き、気になって気になって落ち着かなかったので調べてみました。 下記が原因だったようです。 ### [Macの時刻表示がずれる場合の解決法](http://timetoenjoy.info/archives/871) ``` Macはインターネット上で公開されているタイムサーバから自動的に現在時刻を取得して、時計を補正する機能を備えています。 この機能は、上
続きを読む

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

2016年4月6日

[Twitterの画像を原寸で取得する](http://hacknote.jp/archives/5729/) ですが、 PCブラウザで見るよりもスマホで見ることが多かったりする人にはどうやればいいんだー!となると思いましたので、iPhone操作版もメモ。 ※ 公式アプリを使っての操作方法です。他アプリは適宜置き換えて操作してください。 ## 1、原寸で見たい画像のあるツイートをSafariで開く まず、アプリ上では無理なので(どう頑張
続きを読む

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

2015年9月14日

### JS ``` function Click_Sub() { if (document.all.searchHideForm.style.display == "none") { document.all.searchHideForm.style.display = "block" } else { document.all.searchHideForm.style.display = "none" } } ``` ### HTML
続きを読む