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

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

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

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

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

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

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

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

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

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サイトデ... 続きを読む