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

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

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

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

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

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

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の違い どう違うのかなと思って調べたので... 続きを読む

パララックスサイトの作り方の初歩｜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のコマンドや拡張機能で見つけたものをまとめてみました。他にもこんな便利なものがあるよなど教えてもらえるとうれしいです。 使い方は、コマンドの場合はファイルをダウンロードしてきて以下に... 続きを読む

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

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

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

初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-

2011/05/23 1472 users Web制作 iPhone メモサイト 初心者 コーディング

スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの... 続きを読む

スマートフォンサイトのデザイン集サイトのまとめ｜WEB Drawer -WEB制作に関するメモサイト-

2011/03/08 279 users iPhoneデザインボックス iPhoneサイト まとめ

最近普及しているスマートフォンですが、その専用のサイトを作っている所も多くなってきました。WEB制作の会社でもスマートフォンサイトを制作する事が多くなってきたと思います。 スマートフォンは指で操作するのでパソコンとはまた違ったデザインになっています。そこで、デザインをまとめているサイトをまとめてみました。優れたiPhoneサイトデザイン集 - iPhoneデザインボックス優れたiPhoneサイトデ... 続きを読む