Skip to content

Instantly share code, notes, and snippets.

View aloerina01's full-sized avatar
🐾
にゃ〜ん

あろえ aloerina01

🐾
にゃ〜ん
View GitHub Profile
@aloerina01
aloerina01 / follow-button.css
Created April 16, 2016 14:11
はてなブログのフォローボタン。コピペ用CSS。
.display-none {
display: none !important;
}
.follow-buttons {
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
width: 100%;
}
@aloerina01
aloerina01 / follow-button.html
Last active April 16, 2016 15:21
はてなブログのフォローボタン。コピペ用HTML。
<link rel="stylesheet" href="https://rawgit.com/aloerina01/follow-buttons/master/icomoon/style.css">
<div class="follow-buttons">
<div class="follow-button follow-button-blog">
<div class="follow-button-inner follow-button-inner-blog" onClick="blog();">
<i class="icon blogicon-hatenablog"></i>
<span class="tooltip tooltip-feedly">読者になる</span>
</div>
</div>
<div class="follow-button follow-button-twitter">
<div class="follow-button-inner follow-button-inner-twitter" onClick="twitter();">
@aloerina01
aloerina01 / css-pattern1.css
Last active May 4, 2016 13:48
CSSの設計 汎用パーツにはシンプルなclass命名を。
.button {
/* ボタンの共通デザインを定義する 以下サンプル */
margin: 8px;
padding: 8px;
border: 1px solid #ddd;
background-color: #f1f1f1;
color: #333;
}
@aloerina01
aloerina01 / css-pattern2.css
Created May 4, 2016 14:08
CSSの設計 基盤classとオプションclassの組み合わせ方
.label {
padding: 8px 16px;
font-size: 14px;
}
.label-success {
color: #1B5E20;
}
.label-warning {
color: #FF6F00;
@aloerina01
aloerina01 / css-pattern3.css
Created May 4, 2016 14:24
CSSの設計 親子関係のエレメント
.area {
position: relative;
width: 100%;
}
.area.content-area {
margin: 8px auto;
width: 860px;
border: 1px solid #ddd;
}
.area.content-area-inner {
@aloerina01
aloerina01 / css-pattern4.css
Last active May 4, 2016 15:35
CSSの設計 CSSをあてる単位を意識したclass設計
.row {
height: 20px;
}
.row-header {
background-color: #1A237E;
color: #fff;
}
.col-mail {
width: 120px;
}
.contents-top {
margin: 16px;
}
.contents-bottom {
margin: 8px;
}
@aloerina01
aloerina01 / web-component.html
Created June 16, 2016 16:33
WebComponent使ったらこんな感じになるような。理解しやすい。
<mail-form>
<mail-to placeholder="宛先"></mail-to>
<mail-cc placeholder="CC"></mail-cc>
<mail-bcc placeholder="BCC"></mail-bcc>
<mail-text></mail-text>
</mail-form>
@aloerina01
aloerina01 / gulpfile.js
Last active June 19, 2016 03:28
画像圧縮のためのタスク
var gulp = require('gulp'); // インストールしたgulpを呼び出す
var imagemin = require('gulp-imagemin'); // インストールした画像圧縮タスクを呼び出す
gulp.task('imageminTask', function() { // 「imageminTask」と名付けてタスクを登録する
gulp.src('images/*.png') // imagesフォルダ以下のpng画像を取得する
.pipe(imagemin()) // 画像の圧縮処理タスクを実行する
.pipe(gulp.dest('minified_images/')); // minified_imagesフォルダ以下に保存する
});
@aloerina01
aloerina01 / list-view.js
Created June 28, 2016 12:52
【失敗例】exports/requireの使い方
'use strict';
class ListView {
constructor() {
this.list = [];
};
add(item) {
this.list.push(item);
return this;