カテゴリ 'Web'

Middlemanで作ったブログをGithubで公開する

Web

前回の続きです。
Middlemanで作ったブログをGithubで公開したときに参考にしたものをまとめました。
主に行ったのは以下の内容です。

  • 独自ドメインでGithubPagesを使用する...

MiddlemanでブログをはじめるときのTips

Web

年もあけて新たにブログをWordPressから、Middleman + GithubPagesを使用したものに変更しました。

MiddlemanとはRuby製の静的サイトジェネレーターです。
Middleman...

ビジュアルや動きをコードで作るProcessing

Web

THE GUILDの皆さんがやっているインタラクティブ・プログラミング勉強会の記事をみて触発されたので、最近Processingでちょこちょことスケッチを書いています。

インタラクティブ・プ...

SMACSSを利用したCSS設計について

Web

今までOOCSS、BEMの考えを取り入れたコーディングをしていたのですが、今回SMACSSのルールに従ってコーディングしてみたので考え方と、感想をメモします。

今回コーディングするにあたり、下...

わかりやすくて軽快なビルドシステム gulpのはじめ方

Web

gulpを触ってみたら使い勝手がかなりよかったので、gulpの使い方をメモ。

gulpとは

Node.jsを使用したビルドシステムです。

gulp.js - the streaming...

processingっぽくかけるp5.jsでフラクタル図形を書いてみた

Web

p5.jsを使ってみたのでメモ。
p5.jsはJavaScriptでProcessingっぽくビジュアルプログラミングができるライブラリです。

使い方

p5.jsのサイトからダウンロード、ま...

【JavaScript】配列で重複したものをはじく

Web

配列内で重複したものをはじくっていう処理を書いたのでメモ。

var array = ['A','A','B','B','C','A','C','D','B'];
var sort = [];
var...

jQuery.Deferredについてまとめてみた

Web

jQuery.Deferred()についてわからない部分もあったのでいろいろと調べてみました。

$.Deferred()について

・Deferrdオブジェクトは非同期処理を監視するためのオブ...

JavaScriptの関数の部分適用とカリー化を理解する

Web

「JavaScriptパターン」の中で出てきた部分適用とカリー化がちょっと混乱したので、いろいろと参考にまとめてみました。

部分適用とは?

関数の部分適用とは仮引数の一部の値を固定して、新た...

respond.jsとJavaScriptでのviewport取得について

Web

respond.jsを使用してIE8まで対応させたレスポンシブサイトを制作したときに困ったことがあったのでメモ

respond.jsとは

IE8以下では使用できないMedia queryによ...

変数巻き上げと単独varパターン

Web

今回はJavaScriptパターンの中で紹介されていた単独varパターンについてまとめます。

変数の巻き上げ

関数内では変数の巻き上げ(hoisting)が発生します。 巻き上げとは変数が関数の...

【JavaScript】スコープについてまとめ

Web

スコープとは

変数の有効範囲のこと。変数を取得できる範囲

グローバル変数とローカル変数

グローバル変数はコードのどこからでも取得が可能な変数です。 ローカル変数は有効範囲内でしか取得ができ...

function式・文と即時関数が(function(){})();の理由

Web

違いをしっかりと意識するためにメモ まずはfunction文とfunciton式の形式

//function文
function hoge(){

}

//function式
var hoge...

【JavaScript】parseInt()を使うときは第二引数まで指定した方がよい

Web

文字列を数値に変化するときにつかうparseInt()ですが、使用するときには第二引数まで指定した方がよさそうな感じだったのでメモ。

parseInt()は文字列の引数をパースし、指定された基...

自動に処理してくれるタスクランナーGruntを準備したときのメモ

Web

いろいろと便利な処理を自動で行ってくれるタスクランナーgruntをようやく使ってみたのでメモ。

手順は下の通り

  • Node.jsをインストール
  • grunt-cliをインストール

【Javascript】setIntervalとsetTimeoutを使ったループ処理の違い

Web

普段からよく使うsetIntervalとsetTimeoutについてメモ。

setIntervalのようなループ処理を、setTimeoutを使って書くことも可能です。

setInterval...

Processing.jsを使ってみた

Web

Processingとは?

Processingとは電子アートとビジュアルデザインのためのプログラミング言語です。

[caption id=“attachment_1642” align=“alignnone...

基礎から学ぶJavaScript.3-prototypeについて

Web

前回までの記事はこちらから

基礎から学ぶJavaScript1 - オブジェクトについて 基礎から学ぶJavaScript2 - コンストラクタについて

前回はコンストラクタについて勉強...

基礎から学ぶJavaScript.2-コンストラクタについて

Web

前回はオブジェクトについて基本的なところを学びました。

基礎から学ぶJavaScript.1-オブジェクトとは?

今回は前回出てきたコンストラクタについて

コンストラクタとは?

コン...

基礎から学ぶJavaScript.1-オブジェクトとは?

Web

いままでJavaScriptについては浅く理解している部分が多く 深いところまで行ってしまうと何も手が出ない状態でした。

なので4月に入り新年度ということで、改めてJavaScriptについて...

【JavaScript】クエリの情報を分解して使用する

Web

検索などでURLの後ろについてる「?」で始まるクエリ このクエリを取得してごにょごにょすることがあったのでメモ

こちらの記事を参考にしました。ありがとうございました。

JavaScriptのlocation...

【Android】2.3でtranslate3dを使用するとtransformが機能しくなるバグ

Web

transform:rotate()をつかってCSSで矢印を書いたのですが Android2.3でrotateが正常に機能しない状態に遭遇しました。

調べたところによるとtransform: translate3d...

【jQuery】画像のオリジナルサイズを取得する

Web

Retina対応のために自動でimg要素に画像の半分の長さを入れる処理を書こうと思い img要素の高さをjQueryで取得しようとしたのですが

 $('#hoge img').width();...

Sassのfor文の使い方と使いどころ

Web

Sassのfor文をうまく使うと楽になると気づいたので使い方をメモ

Sassでのfor文の使い方は以下の通りです。

@for $i from 【開始の数字】 through 【開始の数字】{...

はじめてのCanvas Animationを書いてみた

Web

canvasに興味があったのでチャレンジ。 今回は2Dのアニメーション。ボールが跳ねるアニメーションを書きました。

canvasでアニメーションする際の手順

  1. 画面に描画したもの...

Sassを知らない人のために、自分がSassを使う時に気をつけたこと

Web

Sassを使いたいけど、周りは使ってないのでなかなか使えなかったのですが、今回初めて業務でSassを使いました。 状況にもよりますが、今回はがっつりベースからすべてコーディングすることになってい...

CSS3で出来るアニメーション 2.CSS animation

Web

animationとは

  • キーフレームを設定したアニメーションが出来る
  • transitionと違い、きっかけなしでもアニメーションが出来きる
  • アニメーションをル...

sassを使う際のファイルの構成とconfig.rbについて

Web

最近お仕事でsassを使ってサイトを構築してます。 今まで個人で触る時はファイルの管理が煩雑だったので、改めて自分なりに整理してみました。 今回はその際のディレクトリ構成や設定などをメモ。

フ...

CSS3で出来るアニメーション 1.CSS transition

Web

今回ブログリニューアルで使用したプロパティtransitionについてまとめました。

transitionとは

  • :hoverなどで値が変化したときにスムーズに変化させることが出来る...

外部SVGファイルの使い方と、表示されないときの注意点

Web

今回ブログのリニューアルでtwittreやFacebookのアイコンなどはSVGを使用しました。 初めて外部のSVGファイルを使用したのでその際に学んだこと、困ったこととかをメモ。

SVGとは

ブログデザインをリニューアルしました

Web

今年中の目標だった、ブログのデザインの変更をしました。 今回は1カラムでレスポンシブなデザインにしました。

レスポンシブの部分に関してはコチラの本を参考にしながら制作しています。

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

SVGファイルがサーバー上で表示がうまく行かないときの対処法

Web

ブログのリニューアルの際にSVGを使用しました。

MIMEタイプの設定

ローカルでは表示されるのに、サーバー上では表示がうまく行かない場合は MIMEタイプの設定を変更する必要があるようです...

HTML5で書くときにIEのためにしておきたいこと

Web

HTML5を使用したいけど、IE6〜IE8までは対応していません。 かといってそのまま放置してしまうと、古いIEでは見れないことになってしまいます。

もちろん新しいブラウザで見てもらえればそれ...

HTML5を正しくマークアップするためのルール『コンテンツモデル』

Web

ここ最近HTML5をもう一度ちゃんと勉強し直そうと思いいろいろと調べていたのですが、 正しいマークアップをする際にはコンテンツモデルとカテゴリをしっかり理解する必要がありました。

今まで大まか...

jQueryの属性フィルタを使いこなす

Web

久々にjQueryを使って作業したのですが その時属性フィルタが便利だと改めて気づいたのでまとめます。

基本の形 $(’[属性]’)

基本は[]で囲む形です。 いままで先頭にタグを絶対付けな...

Emmetで格段に気持ちよくコーディングするために(HTML編)

Web

最近は会社ではwin、家ではmacなので、coda2からSublime Textを使うようになりました。 それと一緒にEmmetもつかうようになって便利だなーとか思いながらもいまいち使いこなせて...

jQueryでiframe間のDOM操作をする

Web

jQueryでiframe間のDOM操作をすることがあったので方法をまとめました。

iframe側の要素を取得するには

$('iframe').contents().find('hoge')...

知っておきたいoverflowの使い方いろいろ。

Web

コーディングするときによく使うoverflow。 お仕事でもちょっとつまづいたので、今回は改めていろいろと便利なverflowの使い方をまとめました。

overflowとは

overflow...

レスポンシブな設計をもっと楽になるbox-sizing

Web

最近はスマートフォン用にコーディングすることも多くなってきました。 レスポンシブなデザインの場合、borderやpaddingがあると計算とかが結構ややこしかったりします。

その時box-sizing...

jQuery load()で日本語URLを読み込む時IEでうまく取得出来なかったときのメモ

Web

ちょっとつまずいたのでメモ。

jQuery load()で日本語URLを読み込もうとするとIEでうまく表示されないようです。 エンコードする必要あります。

ユーザーエージェントでIEかどうか...

【習作] jQueryを使った黄金比計算ツールを作りました

Web

jQueryを使った黄金比計算ツールを作ってみました。

テキストエリアに数値を入れると自動的に計算し、四角が変形します。 左のメニューから黄金比、白銀比を選択出来るようにしてみました。 ちなみ...

CSSで出来る縦・横中央揃えをいろいろとまとめてみた

Web

自分でちょっと中央揃えの方法についていろいろ考えるところがあったので 現在CSSで出来る中央揃えの方法をまとめてみました。

1.position absolute + ネガティブマージン

こ...

【wordpress】カテゴリーごとにスタイルを変更する方法

Web

今回デザイン変更で、カテゴリーごとに色が変わるような仕様にしました。

変える方法は以下の通り。

カテゴリのIDを調べる

管理画面から 投稿>カテゴリー>IDを調べたいカテゴリをクリック URL...

Boilerplateを使ってはてなブログのテーマを作りました

Web

はてなブログで現在デザインテーマコンテストが行われているので、自分もテーマを作ってみました。

今回私が作ったのがこちら

はてなブログテーマ『button』を作りました
CSSだけで、装飾などを...

CSSを書くときSassとcompassを使い始めたら幸せになった話

Web

コーディングを勉強し始めて、HTML/CSSも書き慣れてきた頃、お友達からCSS書くならsassとcompassを使ったほうがいいよ!とアドバイスをもらいました。 ということで実際に使ってみたの...