Skip to content

Instantly share code, notes, and snippets.

View kyaido's full-sized avatar

kyaido kyaido

0 followers · 1 following
View GitHub Profile
@kyaido
kyaido / mediaquery.md
Last active August 29, 2015 14:25

Sassを使う前提です。

ブレイクポイントは変数で管理する

以下の理由で、変数で管理しておくのをおすすめします。

  • サイト内で定義されているブレイクポイントが一目でわかる
  • 後からブレイクポイントを修正する場合も一か所の修正で反映させることができる

自分は下記のように変数定義しています。

@kyaido
kyaido / sourcemap-qiita.md
Created July 8, 2015 10:08

gulp-sass で sourcemap を出力する

gulp-sourcemaps を使います。

前提とするディレクトリ構成とパッケージはこんな感じです。

├── gulpfile.js
├── package.json
├── dist
@kyaido
kyaido / sourcemap.md
Last active August 29, 2015 14:23
sourcemap

sourcemap について調べた

sourcemapとは 仕様 gulp-sourcemapのオプションとかを理解する gulp-sourcemapを使う 多段souremapの問題、sass→autoprefixerもこれか？

試す

@kyaido
kyaido / bfcache.md
Last active May 11, 2020 09:27
@kyaido
kyaido / icomoon.md
Last active November 26, 2017 11:35

あるサイトで、アイコンフォントに Font Awesome を導入していました。

Font Awesome（現時点での最新バージョン 4.3.0）では 500 種類以上のアイコンが用意されていて、何も考えずに使用していると、woff ファイルで 70KB という結構な容量のフォントファイルを読み込むことになります。

実際にサイトで使用しているアイコンは数種類だけだったので、使っていないフォントを削ってフォントファイルの容量を軽くしてみることにしました。

IcoMoon か Fontello か

アイコンフォントのサブセット化のサービスでは IcoMoon と Fontello という2つのサービスが有名です。

@kyaido
kyaido / gooey
Created May 28, 2015 01:42
gooey
http://cow2design.com/js-blur-contrast-animation
http://codepen.io/Kanasansoft/details/KpMrrG
http://theorthodoxworks.com/study/css-filter-gooey-effect-and-svg/
https://css-tricks.com/shape-blobbing-css/
https://css-tricks.com/gooey-effect/
@kyaido
kyaido / yasuri.rb
Created May 18, 2015 14:55
Yasuri sample
require 'yasuri'
agent = Mechanize.new
page = agent.get('http://www.la-viephotohawaii.com/aloha_diary/page/1404475242.html')
init_page = Yasuri.pages_init '//*[@id="prev"]' do
text_author '//*[@id="loadarea"]/div/div[3]/p[1]', truncate:/Photo by (.+)/
end
require 'json'
@kyaido
kyaido / border-sample.html
Last active August 29, 2015 14:14
数が決まってないリストでなんか罫線をうまいこと処理するやつ
<html>
<head>
<title>sample</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.list {
@kyaido
kyaido / nokogiri-test.rb
Created November 17, 2014 10:36
require 'nokogiri'
require 'open-uri'
doc = Nokogiri::HTML(open("http://www.nedo.go.jp/library/fuuryoku/case/pref_01.html"))
data = doc.css(".basicSection div[id^='id']")
len = data.length
entries = Array.new
@kyaido
kyaido / hoge-comment-NG.html
Created November 12, 2014 03:48
HTMLで、コメントが含まれるかたまりを簡単にコメントアウトする方法 ref: http://qiita.com/kyaido/items/143b56c9150e0555a2e3
<body>
<!--
<div class="hoge">
hogehoge
<!-- comment comment -->
hogehoge
</div>
-->
</body>