web制作– category –
-
さくらVPSでムームードメインのドメインを使う方法
ロリポップ&ムームードメインでサーバーを借りていたのですが、ロリポップ側のみ期限が切れてしまったので、どうせならVPSに移してしまおうということにしました。 備忘録的な手順です。 VPSは「さくらVPS」を使用し、 ドメインは「ムームードメイン」を... -
話題のコーディングツールZen CodingをDreamweaver8にインストールしてみた。
自宅で使用しているDreamweaver8にぜひともZenCodingをインストールしたい!!と思い立ちがんばりました。 公式にサポートがされているのはDreameweaverCS4のため不安でしたが…… なんとかインストール成功しました。 2月28日現在最新のバージョンは0.6なの... -
CSSのコーディングが速くなるSass!!
コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 - YATのBlog に刺激を受けてSassを学習する! と思ったのですが、SassはRubyが使えるサーバー上で動くので, Rubyをインストールしていないサーバーに... -
Windows Safariで開発メニューの表示設定とユーザーエージェントの切換え方法
WEBブラウザ「Safari」をWEB開発で使用するときにユーザエージェントを切り替えて 表示を切り替えたいときがあります。 初期状態ではSafariの「開発」の設定ができないようになっています。 環境設定で、設定変更をすることで開発メニューを表示させること... -
スマートフォンサイトデザインが学べるギャラリーをあるだけ並べました
はじめに スマートフォンサイトデザインが学べるギャラリーをあるだけ並べました リンク集です。 国内サイト スマートフォンサイト集めました。 優れたiPhoneサイトデザイン集 - iPhoneデザインボックス 全iPhoneサイト一覧|iPhoneサイトデザイン集のiPho... -
HTML Kick Start 使い方How to use HTML Kick Start
便利な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』jQueryの無料オンラインレッスンサイトLearn jQuery in 30 Days
Learn jQuery in 30 Days 『Learn jQuery in 30 Days』はQueryの無料オンラインレッスンサイト 「Your Email」の欄にメールアドレスを入れて「GET STARTED」をクリックすると アドレスに認証メールが届きます。 入力後は、「This month, I'm learning jQue... -
『Dummy Text Generator』TEXT入力しなければいけないときのWEB制作のおともにWeb tool is Dummy Text Generator review
たまにサンプルのWEBデザインサイトを見ているとLorem ipsum〜で始まる文字のサイトがあります。 Lorem ipsum - Wikipedia lorem ipsum(ロレム・イプサム、略してリプサム lipsum ともいう)とは、出版、ウェブデザイン、グラフィックデザインなどの諸分... -
『HTML KickStart』コピペだけで素早くカッコいいデザインのWEBサイトが作れる!Web service HTML KickStart to make web site
Bootstrap, from Twitterやら jQuery UI Bootstrapなどデザインの工数を減らすためのツールが出てきましたが、また新しいサイトが出てきました。 HTML KickStart デザインもクールですね。カッコいいですね。素晴らしいですね。 Bootstrapと異なる点はダウ... -
Bootstrap from TwitterのデザインでjQuery UIが使用できるBootstrap from Twitter jQuery UI
jQuery UI Bootstrap http://addyosmani.github.com/jquery-ui-bootstrap/ Twitterのデザインパーツを利用できるBootstrap, from TwitterがjQuery UI でも使用できるようになりました。 jQuery UIのwidgetが1つのhtmlにまとまっているので改めて機能確認す... -
HTML5のplaceholderplaceholder of html5
HTML5のplaceholder ■placeholderについて input要素の属性 入力欄にあらかじめplaceholderで指定したテキストを表示させることができます。 サンプル placeholder指定あり placeholder指定なし 対応ブラウザ Firefox Safari SafariMobile Chrome Opera IE... -
HTML5の3D テトリスゲームHTML5 3D tetoris
Ben Joffe | Torus おおっ!すごいってなり記載。 Ben JoffeさんはBen Joffe | Canvascapeで有名ですね。 HTML5がどこでも注目を浴びています。 調べるとHTML5で作成したゲームがいっぱい検索できるようになりました。 HTML5を駆使した無料ゲーム11選 - NA... -
jqureyモバイルサンプルコードのコピペの仕方jqurey mobile sample code
jQuery Mobile: Demos and Documentation 公式サイトにはサンプルのコードが掲載されていますが、 英語だらけで読むのが面倒。 ソースコードを開いてもトップのページしか表示されません。 困ったときのjqureyモバイルサンプルコードのコピペの仕方です。 ... -
jQuery MoblieのHtmlを見つけたjQuery Moblie Html edit
知ってる人は知ってるが知らない人はまったく知らないGitHub. 知ってる人は知ってるが知らない人はまったく知らないjQueryMobile アルファ版リリース時、jQueryMobileのHtmlを調べるときに参照元が http://jquerymobile.com/demos/1.0b1/ しかなくて書き方... -
さくらVPSでサブドメインをつくりWordPressをインストールするHow to install wordpress to make subdomain sakura vps
環境:CentOS 5.5 WEBサーバー:apache ドメインはさくらのドメインサービスを使用 下記例は サブドメイン subdomain.earthyworld.com 公開ディレクトリ /home/*/public_html とします。 ドメイン設定 httpd.confの設定 Wordpressの設定 1.ドメイン設... -
コーディングを3倍速くなるのを体感したいのでvimを設定する[1] How to setting vim-1
コーディングを3倍速くする! Vim入門 | CSS-EBLOG を見ておおすげえ!!と感激したのでvimをさわってみることにしました。 vimとは - はてなキーワード テキストエディタの1つ。vimの名称はVi IMprovedの略で、viエディタの派生(viクローン)である。UNI... -
Mac OSX[leopard]にMAMPをインストールMac OSX[leopard] install MAMP
MAMPについて MAMPは、Macintosh, Apache, MySQL, PHP を省略した名前です。 アプリケーションフォルダにドラッグ&ドロップするだけで Apache, PHP, そして MySQL を Mac OS X にインストールすることができる。 MoodleやXOOPS、Drupal、Joomlaなど、(L)A... -
WordPressフレームワークの「Xtreme One」リリースWordPress frame work Xtreme One release
今日のWordPressフレームワークの「Xtreme One」最新バージョン1.1がリリースされました。 オプションのHTML5での出力 Xtreme Oneは最初のWordPressだけのテーマフレームワークで、 あなたが出力したいならHTML5での出力ができます。 バックエンドでクリッ... -
30サイトのDarkで美しく刺激を与えるWebデザイン30 website dark design inspiration
はじめに 30サイトのDarkで美しく刺激を与えるWebデザインの紹介です。 索引元 この記事の内容は 30 Dark and Inspiring Web Designs | Inspiration を参照しています。 Tom Pain Pierrick Calvez FillStudio This Shell FreeAssociation Pixillion Digita... -
ポートフォリオサイトの向けWordPressフリーテンプレート10 Free WordPress Themes for Portfolio Sites
はじめに 10個のポートフォリオサイト向けWordPressフリーテンプレートの紹介です。 索引元 10 Free WordPress Themes for Portfolio Sitesで紹介されています。 はじめに 10個のポートフォリオサイト向けWordPressフリーテンプレートの紹介です。 索引元 ... -
CSSを使ったボタン作成のチュートリアルCSS button tutorial
はじめに CSSを使ったボタンのチュートリアルとテクニックの紹介です。 索引元 この記事の内容は CSS Button Tutorials and Techniques. Roundup from DesignFloat | DesignFloat Blog を参照しています。 20 Must Learn Button Tutorials in jQuery and C... -
WordPress専門誌WordPantsが熱い。WordPress’s professional journal WordPants
はじめに WordPantsとは? 2010年10月1日に創刊されたWordPress の電子書籍です。 WordCamp などのイベントに出演されている方が記事を書いているようで、 無料で閲覧できます。 記事内容も充実していてWordpressに特化した情報が手に入ります。 2011/01/1... -
ソースコードをそのままブラウザに表示する方法
はじめに Web関連のBLOGをまとめるときに良くソースをペリッと貼付ける機会が多いので 改めて手法を調べてみました。 <pre>を使用する <PRE>タグはPreformatted Text(整形済みテキスト) の略で <PRE>タグで囲った中身をそのまま出力し... -
zen-codingをmasterしよう! Recommend web tools zen-coding
はじめに Dreamweaver8でzen-cording version0.7が使えました。 これで入れ子のタグが展開できるので改めて覚え直ししようと思います。 環境:Mac OS10.5.8 editor:Dreamweaver8,zen-coding version0.7 ダウンロード Downloads - zen-coding - Project Host... -
WordPressのサイトを英語化(多言語化)するプラグインWPML
大手の企業サイトで「English」と書かれたボタンを押すとサイト全体のテキストや画像が英語化しますよね。 英語化をWordPress上で簡単に実現するプラグインです。 Webクリエイターボックスさんでも紹介されています。 プラグイン提供元が翻訳をしている企... -
もっと早く知りたかったFireworksのトピックス
今の仕事場はFireworks8を使用しております。もうCS5が発売されたというのに… Photoshopに比べるとどうしてもトピックスが出てくる回数が少ない。 Webデザインをする機会が増えそうなので、リンク先を収集しました。 使用時にはリンク先の商用利用/個人利... -
たった一行でclearfixを使わずにfloatを解除するテクニックを試してみた
IE6,7,8がだめでした。 ブロック要素をfloatしたときに、枠が切れたり、背景が表示されなかったりする状態をクリアするためにclearfixが使用されます。 ■参照URL たった一行でclearfixを使わずにfloatを解除するテクニックについて ■参照URL たった一行でc... -
メニューをpipe「|」で区切ったとき、最後にpipeを表示させない方法How to not display pipe menu
【はじめに】 メニューをulタグとliタグでマークアップするとします。 メニュー項目をpipe「|」で区切ったときに、cssで一括指定すると最後のメニュー項目にまで pipeがついてしまって困りました。 こんなケースを回避するtopicsです。 対象ブラウザ:実装... -
『HTML5 Please』 HTML5の対応状況が一目でわかるサイトRecommend web site HTML5 Please
HTML5 Please HTML5の新要素を検索、説明を見られるサイト これは使えるヨ!とか注意してね!などのラベルが付いている。 ロゴのデザインはCSS3でテキスト装飾してあったり見所満載です。 全編英語。 区分は次の通り。 利用が推奨される (use) ・利用が推... -
新人Webデザイナーお勧め!新人の頃教わっていまだに現役なテクニック[1]Technic for web designer
Webデザイナーという求人枠で今の仕事場に入り、4年経ちました。 僕が新人の頃に教わって,いまだに現役で使えるテクニックのご紹介です。 思い起こせば短絡的な考えで「Webデザイナー」という響きのみにひかれて飛び込んだ業界。 美術の成績が2だった僕は... -
さくらレンタルサーバーにGitをインストールする改良版
bashを使ってGitをインストールしたいので さくらサーバーでのdefalutシェルをbashに変更します。 さくらのレンタルサーバーではデフォルトシェルがcsh。 csh => bash に変更します。 [環境] さくらのレンタルサーバー:スタンダードプラン 手順 1.利用で... -
TextWrangler 無料のテキストエディタを探してるWEB開発者にはかなりよさそう!マルチファイル検索、差分チェックもできるエディタTextWrangler editor appp review
Mac用テキストエディタ『TextWrangler』を使って見ました。普段はmiを使用しているのですが、たまには気分を変えて。 無料のテキストエディタです。 なかなか良いので長所と短所をまとめます ダウンロードはApp Storeより『TextWrangler』で検索すると表示... -
プレゼン資料で使えそうなアイコンサイトまとめIcon website link
パワーポイントの素材やテンプレートから企画・提案書用イラスト素材の無料ダウンロード - Presentation Exchange クリップアートとメディア ホーム ページ - Microsoft Office Online 2007年上半期人気無料アイコン配布ページ31個のまとめ。その数17000... -
HTML5のCanvasがいちから学べるチュートリアルHTML5 Canvas Tutorial site
HTML5 Canvas Tutorials HTML5のCanvasがいちから学べるチュートリアル スタートは下記のテンプレートの説明から入り、 [php] <!DOCTYPE HTML> <html> <head> <script> window.onload = function(){ var canvas = document.getEle... -
Firebugでhtmlコーディング効率化-[調査]How to use firebug at firefox
Firebugを立ち上げた直後はコンソール画面が表示されて、モードを選択します その中に、htmlソースの調査ができるボタンがあります。 毎回モード選択をする必要がありますので、ワンクリックで立ち上げ直後に調査モードにする方法。 表示 > ツールバー... -
IE6で透過png処理させるDD_belatedPNG.jsScript DD_belatedPNG.js
iepngfix,alphafilter.jsなどをメインにつかっていましたが、コレが今後 メインになりそうです。 DD_belatedPNG: Medicine for your IE6/PNG headache! こちらのサイトで透過pngのjs比較をしています。 DD_belatedPNG.js 他のスクリプトに比べてファイルサ... -
IE6.7で文字が欠けるBug ie6,7
自宅環境がMacなため全く気がつかなかったバグ。 floatとline-heightを一緒に指定すると、文字が欠ける。 | btmup Blog floatとline-heightを組み合わせて指定すると起こる現象と記述してありました。 floatとline-heightを別要素に変えてもなおらず、ま... -
WordPressでXML宣言をする時のエラー対処 How to safe xml error for WordPress
htmlバリデート 突然htmlバリデートをしたくなったので、してみました。 Another HTML-lint gateway テーマを変更して以来バリデーターを使用していなかったため点数がものすごく低くなっていました。 抜けていたxml宣言を加えようとするとphpエラーが表示... -
[気分jquery]マウスオーバーで背景画像を滑らかに変える[jquery] mouse over change background image
サンプル:こんな感じで滑らかにマウスオーバーします。 お問い合わせはこちら jQuery: The Write Less, Do More, JavaScript Libraryよりjquery-1.3.2.min.jsをダウンロードする 下記ソースをheadタグに書く。 [source language="html"] <script type=... -
FreeのXHTML 1.0 and CSS2 テンプレートサイト Nice and Free CSS TemplatesFreeのXHTML 1.0 and CSS2 template web site Nice and Free CSS Templates
Nice and Free CSS Templates XHTML 1.0 and CSS2 で組まれたテンプレートサイト。 基本的なレイアウトが中心。 中央固定などたまに使うかもしれないテンプレートがあるので、ストックしておきたいです。 -
【Evernote】To do リストを作る【Evernote】How to make todo list
クライアント環境はEvernote for Macです。 EvernoteでTo do リストを作るには ノート編集 > メニュー >フォーマット >To-doを挿入 ノートに記載したURLに「後で読む」などの目印をつける使い方が一般的なようです。 -
jQueryのセレクタ@(アットマーク)にはまる。jQuery selectore @
[ jQuery ] Target Blank Links - JavaScript - Snipplr Social Snippet Repository をみてたときの話。 jQueryセレクタに@を使うと… ソースのセレクタ内に@があったのですがよくわからずに悶々としたので調べました。 [php highlight="1"] $('a[@rel$='ex... -
[CSS3]再現度に度肝を抜かれるCSS3で作られた「Mac OS X Lion」CSS3 「Mac OS X Lion」
まだ見てない人は一度見てみてください! ここまでできるのかCSS3!! Mac OS X Lion CSS3 by Alessio Atzeni Password(admin)をいれてリターンキーを押すと じゃん!! もちろんHTML5とCSS3のためHTMLソースが確認できます。 ウィンドウも動かすことができ... -
Google Chrome17で検索エンジンをgoogle.comで検索させる方法How to search Google Chrome17
Google Chrome17で検索エンジンをgoogle.comで検索させる方法です。 検索ウィンドウから検索したときにインストールした状態だとgoogle.co.jpでの検索になり、 英語の文献を見たい時などgoogle.comと結果が異なり困ります。 環境は Mac OS 10.6.8 Google... -
WordPressの管理画面上でZen-Codingが使用できるプラグインWP Zen-CodingWordPress plugin WP Zen-Coding
はじめに 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のアイコンを変える for mac!!How to change firebug’s icon for mac
firebug のアイコンといえばいわずとしれた蛍ですが、(Gではないのよ) アイコンが変えられることに気がつき、少しいじってみました。 フォルダ内のpng の中身を変えると良いようです。 バージョンはmac os x 10.4.9 Firebug3.0の場合です。 アドオン一覧... -
CSS3のソーシャルウェブボタンセット「Zocial」 CSS3 social button set Zocial
Zocial | CSS3 Button Set ウェブ連携ボタンを毎回用意するのは非常に大変。 「Zocial」はウェブ連携するためのボタンが集まったサンプル集。 すべてCSS3で作られています。 DownloadはGithubのリンクボタンを押してGithubへページ遷移。 zipファイルをダ... -
スキルチェック
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌 改めてみると。やること多すぎですね。 .htaccess < Wiki | さくらのレンタルサーバ非公式FAQ 「=>」「->」の意味 - PHPプロ... -
htmlコーディングメモ
cssのid名、class名の先頭は数字ではじめてはいけない。 cssが効かない しかし、Dreamweaver8のプレビュー画面ではなぜかcssが効く alphafilter.js 透過pngを背景画像として縦にリピートさせるときはうまくいかないので、別の透過スクリプトをつかう label... -
Webデザイナー向けWindowsショートカット
フォントフォルダに最速!?でたどり着く方法 最速かどうか確証はありませんが。。。 使いたいフォントをインストールする際に使用するフォントフォルダですが、Windowsのマイコンピューターを開き、コントロールバネルから〜〜とたまにしか開かないわりに面...
1