更新するのが面倒！サイトの共通部分を簡単に作る様々な方法｜WEB Drawer

2014/08/26 113 users 共通部分 テンプレー 方法 Dreamweaver フッター

サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。 この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあっと言う間なのですが、それ以外の場合の共通部分を簡単に治す方法を改めて調べてみました。 がんばって直に書いてるものを置換する Dreamweaverのテンプレー... 続きを読む

jQuery.Deferredを使って、xml読み込んでから他の処理を実行する方法｜WEB Drawer

2014/07/28 20 users jQuery.Deferred 処理 方法

前回の続きな感じですが、今回はxmlで内容を読み込んだあとに、それぞれの高さを合わせるために heightLine.jsを使うというお話です。 コード的に変な箇所がありましたらすみません。 高さを取得してみる まずはxmlを読み込んだだけのコードです。それぞれのカラムには高さが解りやすいように青色の背景を、その親divには緑の背景を敷いてます。 $(function(){ function tex... 続きを読む

xmlをjQueryで読み込んで表示する時に注意すること｜WEB Drawer

2014/07/23 34 users jQuery XML async Success Ajax

xmlを利用してコンテンツを表示したりすることがあると思いますが、今回はその方法のメモです。 サンプルコード ひとまず例として以下のコードがあります。ajaxで読み込みます。 $.ajax({ url: "xml01.xml", async: true, cache: false, dataType:"xml", success: function(xml){ $(xml).find('text'... 続きを読む

サイトで右クリックしたら他のサイトへ飛ばすjQuery｜WEB Drawer

2014/07/16 50 users jQuery 約束 デモページ 右クリック禁止 以下

こんにちは、かしゅうです。 右クリック禁止！というサイトがありますが、もういっそ右クリック禁止の約束を破ったら帰ってもらったらいいんじゃないかと思って、右クリックしてしまったら別のサイトに飛んでもらうjQueryを作ってみました。 デモページ デモページは以下から。右クリックすると別ページの飛ぶので注意。 右クリックしたら他のサイトへ飛ばすのデモページ JavaScript デフォルトだと、みんな... 続きを読む

タスクランナー「gulp」の導入手順（Windows）｜WEB Drawer

2014/06/03 25 users Gulp Grunt gulpfile.js タスクランナー

前に同じタスクランナーのGruntを導入してみましたが、gulpというのも結構話題に見るのでこちらも導入して試してみました。 エラーがでてインストールできない人は、ページの下の方に自分がとった解決策が書いてあります。 gulpとは gulpとはnode.jsを使ったタスクランナーです。機能的にはGruntと一緒です。設定を記すgulpfile.jsの書き方が少し違うのと、処理スピードがGruntよ... 続きを読む

自分用のgruntタスクメモ｜WEB Drawer

2014/06/02 41 users 自分用

前にgruntの使い方を書きましたが、それからいろいろ試してみて自分なりのタスクを作成しました。 まだあまり使い倒してないのでまだまだ変更するところがあると思いますが、これを元に変えていきます。 2種類用意しました がっつり機能を使いたい時もあれば、ちょこっとだけ使えればいいかなっていうことが個人的にあったので2種類用意してみました。 制作フォルダで制作後、最終的にJSやCSSを圧縮し、確認・納品... 続きを読む

iPhoneだけでWordPressブログを更新する環境を試した結果こうなった｜WEB Drawer

2014/02/24 66 users iPhone 補正 目次 パソコン アプリ

ちょっとした内容ならパソコンを起動するより、iPhoneで写真を撮ってそのままブログを更新をしたいなと思っていたので、いろいろアプリを使ってみたり調べながら自分なりの更新方法が出来たので、その方法を記しておきたいと思います。 どのように更新したいかによって使うアプリややり方は変わると思いますが、以下の目次が私がiPhoneからの更新でやりたかった作業内容になります。 目次 写真を補正・トリミングす... 続きを読む

今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawer

2014/02/05 87 users インストール Grunt 使い方 CSS 結合

JavaScriptやCSSの結合や圧縮などいろいろな事を自動で処理してくれるGruntですが、もう話題になってずいぶん立ちますが今更ながら入れてみましたのでその方法です。 前にGruntの話題で盛り上がった時に試してみたのですがどうしても動かず原因もわからずで止まっていたのですが、情報も増えてきたので再チャレンジでした。 結果的に原因もわかったのでGruntの入れ方と基本的な使い方を書いておこう... 続きを読む

jQueryプラグインの作り方の初歩｜WEB Drawer

2013/09/09 60 users 初歩 jQueryプラグイン jQuery functi 引数

自分でもjQueryを使ってjsを書くので、これをプラグイン化できたらいいなと思うこともあります。という訳で大枠の構成だけですが、基本的な作り方を調べてみました。（あとは引数で設定を変えるのがかっこいいと思ったので作ってみたかったのもあります。） 無名関数 他の領域に干渉しないされないように以下の記述で囲みます。jQueryを引数として指定しているので、この中でも$表記が使えます。 (functi... 続きを読む

あなたがコーディング初心者を脱する方法｜WEB Drawer

2013/06/17 208 users コーディング初心者 あなた 方法

比較的経験の浅めの人のHTMLとCSSコーディングを見ることが増えたのですが、その際にこうしたほうが良いかなーと思う箇所が共通してたりするので、まとめてみました。 ただ以下にあげる例は、状況によっては使わないといけなかったりするので絶対ではありません。そう絶対ではありません。 floatを覆っている要素の高さをだす 要素をfloatすると、それを覆っている要素の高さがなくなります。その高さをだす場... 続きを読む

レスポンシブデザインをコーディングする時の、自分なりのちょっとしたTips｜WEB Drawer

2013/06/10 97 users Tips コーディング レスポンシブデザイン 案件 仕方

前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる... 続きを読む

レスポンシブデザインにするための基本的な方法｜WEB Drawer

2013/04/02 51 users レスポンシブデザイン stylesheet 方法 rel 普及

スマートフォンの普及で出てきた「レスポンシブ・ウェブデザイン」。 今回は「レスポンシブ・ウェブデザイン」にするための基本的な方法を見て行きたいと思います。 使い方 記述方法は以下になります。 外部ファイル読み込む時の記述法 <link href="css/mini.css" rel="stylesheet" media="only screen and (幅の指定)" > @importでの方法 ... 続きを読む

初めてSassとCompassを使った際に参考にした記事まとめ｜WEB Drawer

2013/02/13 211 users Sass Compass 参考 記事まとめ CSS

しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。 順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。 Sassとは まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽に... 続きを読む

要素を変化させる、CSS3「transform」のおさらい｜WEB Drawer

2013/01/15 79 users transform Animation 初歩 おさらい 動作

今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。 指定後の画像を見てもいまいちどのような変化があるかわかりづらいと思うので、前回の記事CSSアニメーションの初歩をおさらいで紹介した、animationを使って 変化の状態を見ながら確認しようと思います。今回も説明のベンダープレフィックスは省略していますが、動作はFirefoxとChromeの最新で確認しています... 続きを読む

CSSアニメーションの初歩をおさらい｜WEB Drawer

2012/12/20 239 users 初歩 おさらい CSSアニメーション Ｔｒａｎｓｉｔｉｏｎ

最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたので... 続きを読む

sublime text 2のプロジェクトを設定してみよう｜WEB Drawer

2012/12/12 37 users sublime text Dreamweaver View

Dreamweaverでは「サイトの定義」を使っていたのですが、sublime text 2でもそれに似た機能がないかと思ったら、 Projectというのがありました。 使い方 上のメニューバーのProjectから使います。もし、Side barが表示されない場合は「View」→「Side bar」で表示させて下さい。 やり方はいろいろあるかと思いますが、まず製作するフォルダごとsublime t... 続きを読む

コーディングが早くなる！？噂のSublime Text 2を入れて初期設定をしてみた。｜WEB Drawer

2012/12/03 33 users コーディング sublime text エディタ 初期設定

最近私の周りでよく話題になっているエディタ「Sublime Text 2」。 使い慣れているからという理由でずっとDreamweaverを使っているのですが、紹介記事をいろいろ見ていたら良さそうだったので使ってみようと思い入れてみました。今回は その「Sublime Text 2」をインストールして初期設定、そしてプラグインを入れる方法までをご紹介したいと思います。 Sublime Text 2と... 続きを読む

SNSボタンをオリジナル画像で設置する方法｜WEB Drawer

2012/08/20 49 users SNSボタン Twitter Facebook 方法 http

TwitterやFacebookへのボタンは公式サイトでボタンを作れますが、そのボタンはそれぞれオリジナルのボタンで設置することもできます。 ボタンの仕組みが変わると動かなくなるかもしれませんが、以下の方法で設置できます。今回紹介しているのはTwitter・Facebookシェア・mixiチェック・Google+です。 Twitter コードは以下になります。 <a href="http://tw... 続きを読む

パララックスサイトの作り方の初歩｜WEB Drawer

2012/07/02 820 users 初歩 パララックスサイト 作り方

最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefo... 続きを読む

Photoshopの便利なスクリプトや拡張機能のまとめ｜WEB Drawer

2012/03/21 592 users Photoshop スクリプト Windows まとめ 以下

Photoshopにも便利な機能を追加できるスクリプトと拡張機能があります。こちらでも自分が使っているものや便利そうだなと思ったものをまとめました。 スクリプトの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows　→　C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Scripts Ma... 続きを読む

Dreamweaverの便利なコマンドや拡張機能のまとめ｜WEB Drawer

2012/03/12 598 users Dreamweaver コーディング コマンド まとめ 以下

コーディングをするときに自分が主に使ってるのがDreamweaverです。そのままでもいろいろ機能があって便利ですが、コマンドや拡張機能を入れることによってさらに便利に使うことができます。 そこでDreamweaverのコマンドや拡張機能で見つけたものをまとめてみました。他にもこんな便利なものがあるよなど教えてもらえるとうれしいです。 使い方は、コマンドの場合はファイルをダウンロードしてきて以下に... 続きを読む

デフォルトスタイルを残しつつ、ブラウザのデフォルト挙動を合わせてくれるCSS「normalize.css」｜WEB Drawer

2012/01/24 20 users デフォルトスタイル Normalize.css CSS 最初

トップ CSS デフォルトスタイルを残しつつ、ブラウザのデフォルト挙動を合わせてくれるCSS「normalize.css」 サイトを制作する際、最初にブラウザ初期値のCSSをリセットする方も多いと思います。様々なリセットCSSがありますが、ほぼすべての要素をリセットさせるものや、最近のHTML5に関するタグがないものもあります。 今回ご紹介する「normalize.css」は、HTML5やCSS3... 続きを読む

情報収集をもっと快適にする「Gunosy」を使ってみた｜WEB Drawer

2012/01/19 36 users Gunosy TwitterかFacebook アカウント

日々、効率的に情報を集められないかなと思っているのですが、面白いサービスを見つけたのでご紹介します。 Gunosyとは Web上にあふれる情報の中から，毎日，あなたの興味にあった記事を集めてきます。 さらにGunosyは使えば使うほど，あなたの興味を学習し，より良い記事を推薦するようになります。 登録する TwitterかFacebookのアカウントを使ってログインします。 そうすると情報を送って... 続きを読む

私がはじめてWordPressを使ったときのメモ｜WEB Drawer -WEB制作に関するメモサイト-

2011/12/05 49 users WordPress メモ Web制作 Twitter 少し前

少し前に、自分のWEB関連以外のことを書いているブログの方をリニューアルしたのですが、この時にWordPressを使って作成しました。 TwitterでよくWordPressの情報を見るので使おう使おうと思いながら、やっと使いました。今回はその時に調べたことを書いておこうと思います。 まずはインストール そのブログがあるレンタルサーバーはロリポップを使っています。インストールからやってもよかったの... 続きを読む

スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選｜WEB Drawer -WEB制作に関するメモサイト-

2011/10/11 435 users フリック jQueryプラグイン Web制作 Android

スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのflickGalです。よく使わせていただいております。 PC（IE以外）でも動作します。 flickGal・・... 続きを読む