web制作– category –

ロリポップ＆ムームードメインでサーバーを借りていたのですが、ロリポップ側のみ期限が切れてしまったので、どうせならVPSに移してしまおうということにしました。 備忘録的な手順です。 VPSは「さくらVPS」を使用し、 ドメインは「ムームードメイン」を...

自宅で使用しているDreamweaver8にぜひともZenCodingをインストールしたい！！と思い立ちがんばりました。 公式にサポートがされているのはDreameweaverCS4のため不安でしたが…… なんとかインストール成功しました。 2月28日現在最新のバージョンは0.6なの...

コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 - YATのBlog に刺激を受けてSassを学習する！ と思ったのですが、SassはRubyが使えるサーバー上で動くので, Rubyをインストールしていないサーバーに...

WEBブラウザ「Safari」をWEB開発で使用するときにユーザエージェントを切り替えて 表示を切り替えたいときがあります。 初期状態ではSafariの「開発」の設定ができないようになっています。 環境設定で、設定変更をすることで開発メニューを表示させること...

はじめに スマートフォンサイトデザインが学べるギャラリーをあるだけ並べました リンク集です。 国内サイト スマートフォンサイト集めました。 優れたiPhoneサイトデザイン集 - iPhoneデザインボックス 全iPhoneサイト一覧｜iPhoneサイトデザイン集のiPho...

便利なHTML KickStartの使い方をまとめました。 HTML KickStart HTML Kick Start準備 HTML KickStartをダウンロード blank.htmlを好きなように編集する blank.htmlにhttp://www.99lime.com/elements/のリンクを加える blank.htmlを保存して閲覧 HTML Kick ...

Learn jQuery in 30 Days 『Learn jQuery in 30 Days』はQueryの無料オンラインレッスンサイト 「Your Email」の欄にメールアドレスを入れて「GET STARTED」をクリックすると アドレスに認証メールが届きます。 入力後は、「This month, I'm learning jQue...

たまにサンプルのWEBデザインサイトを見ているとLorem ipsum〜で始まる文字のサイトがあります。 Lorem ipsum - Wikipedia lorem ipsum（ロレム・イプサム、略してリプサム lipsum ともいう）とは、出版、ウェブデザイン、グラフィックデザインなどの諸分...

Bootstrap, from Twitterやら jQuery UI Bootstrapなどデザインの工数を減らすためのツールが出てきましたが、また新しいサイトが出てきました。 HTML KickStart デザインもクールですね。カッコいいですね。素晴らしいですね。 Bootstrapと異なる点はダウ...

jQuery UI Bootstrap http://addyosmani.github.com/jquery-ui-bootstrap/ Twitterのデザインパーツを利用できるBootstrap, from TwitterがjQuery UI でも使用できるようになりました。 jQuery UIのwidgetが1つのhtmlにまとまっているので改めて機能確認す...

HTML5のplaceholder ■placeholderについて input要素の属性 入力欄にあらかじめplaceholderで指定したテキストを表示させることができます。 サンプル placeholder指定あり placeholder指定なし 対応ブラウザ Firefox Safari SafariMobile Chrome Opera IE...

Ben Joffe | Torus おおっ！すごいってなり記載。 Ben JoffeさんはBen Joffe | Canvascapeで有名ですね。 HTML5がどこでも注目を浴びています。 調べるとHTML5で作成したゲームがいっぱい検索できるようになりました。 HTML5を駆使した無料ゲーム11選 - NA...

jQuery Mobile: Demos and Documentation 公式サイトにはサンプルのコードが掲載されていますが、 英語だらけで読むのが面倒。 ソースコードを開いてもトップのページしか表示されません。 困ったときのjqureyモバイルサンプルコードのコピペの仕方です。 ...

知ってる人は知ってるが知らない人はまったく知らないGitHub. 知ってる人は知ってるが知らない人はまったく知らないjQueryMobile アルファ版リリース時、jQueryMobileのHtmlを調べるときに参照元が http://jquerymobile.com/demos/1.0b1/ しかなくて書き方...

環境：CentOS 5.5 WEBサーバー：apache ドメインはさくらのドメインサービスを使用 下記例は サブドメイン　subdomain.earthyworld.com 公開ディレクトリ　/home/*/public_html とします。 ドメイン設定 httpd.confの設定 Wordpressの設定 １．ドメイン設...

コーディングを3倍速くする！ Vim入門 | CSS-EBLOG を見ておおすげえ！！と感激したのでvimをさわってみることにしました。 vimとは - はてなキーワード テキストエディタの1つ。vimの名称はVi IMprovedの略で、viエディタの派生（viクローン）である。UNI...

MAMPについて MAMPは、Macintosh, Apache, MySQL, PHP を省略した名前です。 アプリケーションフォルダにドラッグ＆ドロップするだけで Apache, PHP, そして MySQL を Mac OS X にインストールすることができる。 MoodleやXOOPS、Drupal、Joomlaなど、(L)A...

今日のWordPressフレームワークの「Xtreme One」最新バージョン1.1がリリースされました。 オプションのHTML5での出力 Xtreme Oneは最初のWordPressだけのテーマフレームワークで、 あなたが出力したいならHTML5での出力ができます。 バックエンドでクリッ...

はじめに 30サイトのDarkで美しく刺激を与えるWebデザインの紹介です。 索引元 この記事の内容は 30 Dark and Inspiring Web Designs | Inspiration を参照しています。 Tom Pain Pierrick Calvez FillStudio This Shell FreeAssociation Pixillion Digita...

はじめに 10個のポートフォリオサイト向けWordPressフリーテンプレートの紹介です。 索引元 10 Free WordPress Themes for Portfolio Sitesで紹介されています。 はじめに 10個のポートフォリオサイト向けWordPressフリーテンプレートの紹介です。 索引元 ...

はじめに CSSを使ったボタンのチュートリアルとテクニックの紹介です。 索引元 この記事の内容は CSS Button Tutorials and Techniques. Roundup from DesignFloat | DesignFloat Blog を参照しています。 20 Must Learn Button Tutorials in jQuery and C...

はじめに WordPantsとは？ 2010年10月1日に創刊されたWordPress の電子書籍です。 WordCamp などのイベントに出演されている方が記事を書いているようで、 無料で閲覧できます。 記事内容も充実していてWordpressに特化した情報が手に入ります。 2011/01/1...

はじめに Web関連のBLOGをまとめるときに良くソースをペリッと貼付ける機会が多いので 改めて手法を調べてみました。 <pre>を使用する <PRE>タグはPreformatted Text（整形済みテキスト） の略で <PRE>タグで囲った中身をそのまま出力し...

はじめに Dreamweaver8でzen-cording version0.7が使えました。 これで入れ子のタグが展開できるので改めて覚え直ししようと思います。 環境:Mac OS10.5.8 editor:Dreamweaver8,zen-coding version0.7 ダウンロード Downloads - zen-coding - Project Host...

大手の企業サイトで「English」と書かれたボタンを押すとサイト全体のテキストや画像が英語化しますよね。 英語化をWordPress上で簡単に実現するプラグインです。 Webクリエイターボックスさんでも紹介されています。 プラグイン提供元が翻訳をしている企...

今の仕事場はFireworks8を使用しております。もうCS5が発売されたというのに… Photoshopに比べるとどうしてもトピックスが出てくる回数が少ない。 Webデザインをする機会が増えそうなので、リンク先を収集しました。 使用時にはリンク先の商用利用／個人利...

IE6,7,8がだめでした。 ブロック要素をfloatしたときに、枠が切れたり、背景が表示されなかったりする状態をクリアするためにclearfixが使用されます。 ■参照URL たった一行でclearfixを使わずにfloatを解除するテクニックについて ■参照URL たった一行でc...

【はじめに】 メニューをulタグとliタグでマークアップするとします。 メニュー項目をpipe「|」で区切ったときに、cssで一括指定すると最後のメニュー項目にまで pipeがついてしまって困りました。 こんなケースを回避するtopicsです。 対象ブラウザ：実装...

HTML5 Please HTML5の新要素を検索、説明を見られるサイト これは使えるヨ！とか注意してね！などのラベルが付いている。 ロゴのデザインはCSS3でテキスト装飾してあったり見所満載です。 全編英語。 区分は次の通り。 利用が推奨される (use) ・利用が推...

Webデザイナーという求人枠で今の仕事場に入り、４年経ちました。 僕が新人の頃に教わって,いまだに現役で使えるテクニックのご紹介です。 思い起こせば短絡的な考えで「Webデザイナー」という響きのみにひかれて飛び込んだ業界。 美術の成績が2だった僕は...

bashを使ってGitをインストールしたいので さくらサーバーでのdefalutシェルをbashに変更します。 さくらのレンタルサーバーではデフォルトシェルがcsh。 csh => bash　に変更します。 [環境] さくらのレンタルサーバー:スタンダードプラン 手順 1.利用で...

Mac用テキストエディタ『TextWrangler』を使って見ました。普段はmiを使用しているのですが、たまには気分を変えて。 無料のテキストエディタです。 なかなか良いので長所と短所をまとめます ダウンロードはApp Storeより『TextWrangler』で検索すると表示...

パワーポイントの素材やテンプレートから企画・提案書用イラスト素材の無料ダウンロード - Presentation Exchange クリップアートとメディア ホーム ページ - Microsoft Office Online 2007年上半期人気無料アイコン配布ページ３１個のまとめ。その数17000...

HTML5 Canvas Tutorials HTML5のCanvasがいちから学べるチュートリアル スタートは下記のテンプレートの説明から入り、 [php] <!DOCTYPE HTML> <html> <head> <script> window.onload = function(){ var canvas = document.getEle...

Firebugを立ち上げた直後はコンソール画面が表示されて、モードを選択します その中に、htmlソースの調査ができるボタンがあります。 毎回モード選択をする必要がありますので、ワンクリックで立ち上げ直後に調査モードにする方法。 表示　＞　ツールバー...

iepngfix,alphafilter.jsなどをメインにつかっていましたが、コレが今後 メインになりそうです。 DD_belatedPNG: Medicine for your IE6/PNG headache! こちらのサイトで透過pngのjs比較をしています。 DD_belatedPNG.js 他のスクリプトに比べてファイルサ...

自宅環境がMacなため全く気がつかなかったバグ。 floatとline-heightを一緒に指定すると、文字が欠ける。 ｜ btmup Blog floatとline-heightを組み合わせて指定すると起こる現象と記述してありました。 floatとline-heightを別要素に変えてもなおらず、ま...

htmlバリデート 突然htmlバリデートをしたくなったので、してみました。 Another HTML-lint gateway テーマを変更して以来バリデーターを使用していなかったため点数がものすごく低くなっていました。 抜けていたxml宣言を加えようとするとphpエラーが表示...

サンプル：こんな感じで滑らかにマウスオーバーします。 お問い合わせはこちら jQuery: The Write Less, Do More, JavaScript Libraryよりjquery-1.3.2.min.jsをダウンロードする 下記ソースをheadタグに書く。 [source language="html"] <script type=...

Nice and Free CSS Templates XHTML 1.0 and CSS2 で組まれたテンプレートサイト。 基本的なレイアウトが中心。 中央固定などたまに使うかもしれないテンプレートがあるので、ストックしておきたいです。

クライアント環境はEvernote for Macです。 EvernoteでTo do リストを作るには ノート編集　＞　メニュー　＞フォーマット　＞To-doを挿入 ノートに記載したURLに「後で読む」などの目印をつける使い方が一般的なようです。

[ jQuery ] Target Blank Links - JavaScript - Snipplr Social Snippet Repository をみてたときの話。 jQueryセレクタに@を使うと… ソースのセレクタ内に@があったのですがよくわからずに悶々としたので調べました。 [php highlight="1"] $('a[@rel$='ex...

まだ見てない人は一度見てみてください！ ここまでできるのかCSS3!! Mac OS X Lion CSS3 by Alessio Atzeni Password(admin)をいれてリターンキーを押すと じゃん！！ もちろんHTML5とCSS3のためHTMLソースが確認できます。 ウィンドウも動かすことができ...

Google Chrome17で検索エンジンをgoogle.coｍで検索させる方法です。 検索ウィンドウから検索したときにインストールした状態だとgoogle.co.jpでの検索になり、 英語の文献を見たい時などgoogle.coｍと結果が異なり困ります。 環境は Mac OS 10.6.8 Google...

はじめに WordPressの管理画面上でZen-Codingが使用できるプラグインWP Zen-Coding をインストールする手順です。 環境 WP Zen-Coding 0.2.1 WordPress version 3.0.5 Mac OS 10.6.6 Zen-Codingについて Zen-CodingはHTML/CSSをショートカット＋スニペット...

firebug のアイコンといえばいわずとしれた蛍ですが、(Gではないのよ） アイコンが変えられることに気がつき、少しいじってみました。 フォルダ内のpng の中身を変えると良いようです。 バージョンはmac os x 10.4.9 Firebug3.0の場合です。 アドオン一覧...

Zocial | CSS3 Button Set ウェブ連携ボタンを毎回用意するのは非常に大変。 「Zocial」はウェブ連携するためのボタンが集まったサンプル集。 すべてCSS3で作られています。 DownloadはGithubのリンクボタンを押してGithubへページ遷移。 zipファイルをダ...

WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌 改めてみると。やること多すぎですね。 .htaccess < Wiki | さくらのレンタルサーバ非公式FAQ 「=>」「->」の意味 - PHPプロ...

cssのid名、class名の先頭は数字ではじめてはいけない。 cssが効かない しかし、Dreamweaver8のプレビュー画面ではなぜかcssが効く alphafilter.js 透過pngを背景画像として縦にリピートさせるときはうまくいかないので、別の透過スクリプトをつかう label...

フォントフォルダに最速!?でたどり着く方法 最速かどうか確証はありませんが。。。 使いたいフォントをインストールする際に使用するフォントフォルダですが、Windowsのマイコンピューターを開き、コントロールバネルから〜〜とたまにしか開かないわりに面...