web制作

no image

2018/4/21

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を保存して閲覧

no image

2012/9/26

Google Chrome17で検索エンジンをgoogle.comで検索させる方法How to search Google Chrome17

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

no image

2012/9/26

CSS3のソーシャルウェブボタンセット「Zocial」 CSS3 social button set Zocial

Zocial | CSS3 Button Set ウェブ連携ボタンを毎回用意するのは非常に大変。 「Zocial」はウェブ連携するためのボタンが集まったサンプル集。 すべてCSS3で作られています。

no image

2018/4/21

『Learn jQuery in 30 Days』jQueryの無料オンラインレッスンサイトLearn jQuery in 30 Days

Learn jQuery in 30 Days 『Learn jQuery in 30 Days』はQueryの無料オンラインレッスンサイト

no image

2014/4/11

HTML5のCanvasがいちから学べるチュートリアルHTML5 Canvas Tutorial site

HTML5 Canvas Tutorials HTML5のCanvasがいちから学べるチュートリアル

no image

2012/9/26

[CSS3]再現度に度肝を抜かれるCSS3で作られた「Mac OS X Lion」CSS3 「Mac OS X Lion」

まだ見てない人は一度見てみてください! ここまでできるのかCSS3!! Mac OS X Lion CSS3 by Alessio Atzeni

no image

2018/4/21

『HTML5 Please』 HTML5の対応状況が一目でわかるサイトRecommend web site HTML5 Please

HTML5 Please HTML5の新要素を検索、説明を見られるサイト これは使えるヨ!とか注意してね!などのラベルが付いている。 ロゴのデザインはCSS3でテキスト装飾してあったり見所満載です。 全編英語。 区分は次の通り。 利用が推奨される (use) ・利用が推奨される。機能しない場合も考慮しておく必要がある (use with fallback) ・利用が推奨される。機能しない場合にはライブラリなど代替手段を併用することで対処できる (use with polyfill) ・利用には注意が必要 ...

no image

2018/4/21

『Dummy Text Generator』TEXT入力しなければいけないときのWEB制作のおともにWeb tool is Dummy Text Generator review

たまにサンプルのWEBデザインサイトを見ているとLorem ipsum〜で始まる文字のサイトがあります。 Lorem ipsum - Wikipedia lorem ipsum(ロレム・イプサム、略してリプサム lipsum ともいう)とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体(フォント) ...

no image

2018/4/21

『HTML KickStart』コピペだけで素早くカッコいいデザインのWEBサイトが作れる!Web service HTML KickStart to make web site

Bootstrap, from Twitterやら jQuery UI Bootstrapなどデザインの工数を減らすためのツールが出てきましたが、また新しいサイトが出てきました。 HTML KickStart

no image

2018/10/6

CSSのコーディングが速くなるSass!!

コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 - YATのBlog に刺激を受けてSassを学習する! と思ったのですが、SassはRubyが使えるサーバー上で動くので, Rubyをインストールしていないサーバーには使用できません。 有名なレンタルサーバーでもRubyが使えないところもあり、Rubyの案件があれば学習しよう!に落ち着くことにしました。 ただ知識としては知っておきたいので触りの部分だけまとめ。

jQuery_UI_Bootstrap

2018/4/21

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 でも使用できるようになりました。

no image

2018/4/21

HTML5のplaceholderplaceholder of html5

HTML5のplaceholder ■placeholderについて input要素の属性 入力欄にあらかじめplaceholderで指定したテキストを表示させることができます。 サンプル placeholder指定あり placeholder指定なし

no image

2012/9/26

jQueryのセレクタ@(アットマーク)にはまる。jQuery selectore @

[ jQuery ] Target Blank Links - JavaScript - Snipplr Social Snippet Repository をみてたときの話。

no image

2021/3/4

さくらVPSでムームードメインのドメインを使う方法

ロリポップ&ムームードメインでサーバーを借りていたのですが、ロリポップ側のみ期限が切れてしまったので、どうせならVPSに移してしまおうということにしました。 備忘録的な手順です。 VPSは「さくらVPS」を使用し、 ドメインは「ムームードメイン」を使用します。 どちらもWEBサービスを立ち上げるために第一候補となるサーバーとドメインレンタル業者。 ムームードメインは年間950円(セール時の安い時は100円以下で購入できるときも!)からの格安ドメイン取得サービスです。使いやすいログイン画面とお手軽な価格でド ...

no image

2014/4/28

TextWrangler 無料のテキストエディタを探してるWEB開発者にはかなりよさそう!マルチファイル検索、差分チェックもできるエディタTextWrangler editor appp review

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

no image

2018/4/21

HTML5の3D テトリスゲームHTML5 3D tetoris

Ben Joffe | Torus

no image

2018/4/21

さくらVPSでサブドメインをつくりWordPressをインストールするHow to install wordpress to make subdomain sakura vps

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

no image

2018/4/21

jQuery MoblieのHtmlを見つけたjQuery Moblie Html edit

知ってる人は知ってるが知らない人はまったく知らないGitHub. 知ってる人は知ってるが知らない人はまったく知らないjQueryMobile

no image

2018/4/21

jqureyモバイルサンプルコードのコピペの仕方jqurey mobile sample code

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

no image

2012/9/27

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 で組まれたテンプレートサイト。

no image

2018/4/21

コーディングを3倍速くなるのを体感したいのでvimを設定する[1] How to setting vim-1

コーディングを3倍速くする! Vim入門 | CSS-EBLOG を見ておおすげえ!!と感激したのでvimをさわってみることにしました。

no image

2018/7/21

スマートフォンサイトデザインが学べるギャラリーをあるだけ並べました

はじめに スマートフォンサイトデザインが学べるギャラリーをあるだけ並べました リンク集です。

no image

2018/4/21

新人Webデザイナーお勧め!新人の頃教わっていまだに現役なテクニック[1]Technic for web designer

Webデザイナーという求人枠で今の仕事場に入り、4年経ちました。 僕が新人の頃に教わって,いまだに現役で使えるテクニックのご紹介です。 思い起こせば短絡的な考えで「Webデザイナー」という響きのみにひかれて飛び込んだ業界。 美術の成績が2だった僕は色彩感覚など全くなく、パソコン操作も独学でかじってただけ。 そのため思うようにデザインのパーツが作れませんでした。 困っていたそのとき運良く上司が教えてくれたのでした。 「配色を盗め」と。 技術職は先輩の技術を見て盗むものと言いますが、配色を盗めとはどういう事か ...

no image

2018/4/21

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)AMPベースのWebアプリケーション開発環境として便利。 ただし、標準ではパスワード設定やパーミッション設定などが甘いため、厳密に設定するか、ローカルなテスト環境としてのみ使用 ...

no image

2018/4/21

WordPressフレームワークの「Xtreme One」リリースWordPress frame work Xtreme One release

今日のWordPressフレームワークの「Xtreme One」最新バージョン1.1がリリースされました。 オプションのHTML5での出力 Xtreme Oneは最初のWordPressだけのテーマフレームワークで、 あなたが出力したいならHTML5での出力ができます。 バックエンドでクリックをするだけです! それゆえに、Xtreme OneはWebサイトプログラミングの将来の準備します。

no image

2018/4/21

CSSを使ったボタン作成のチュートリアルCSS button tutorial

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

no image

2018/4/21

30サイトのDarkで美しく刺激を与えるWebデザイン30 website dark design inspiration

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

no image

2012/9/26

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をショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC s ...

no image

2018/4/21

ポートフォリオサイトの向けWordPressフリーテンプレート10 Free WordPress Themes for Portfolio Sites

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

no image

2018/4/21

ソースコードをそのままブラウザに表示する方法

はじめに Web関連のBLOGをまとめるときに良くソースをペリッと貼付ける機会が多いので 改めて手法を調べてみました。

no image

2018/8/11

Windows Safariで開発メニューの表示設定とユーザーエージェントの切換え方法

WEBブラウザ「Safari」をWEB開発で使用するときにユーザエージェントを切り替えて 表示を切り替えたいときがあります。 初期状態ではSafariの「開発」の設定ができないようになっています。 環境設定で、設定変更をすることで開発メニューを表示させることができます。 開発メニューは、開発者以外は必要のない項目ですから 開発とは無縁な人に迷わせたくない意図的なUIのの作りですよね。 開発者としては「開発者メニュー」がないと困ってしまいますので、 SafariをWEB開発で使用するときには開発メニューを表 ...

no image

2018/4/21

WordPress専門誌WordPantsが熱い。WordPress's professional journal WordPants

はじめに WordPantsとは? 2010年10月1日に創刊されたWordPress の電子書籍です。 WordCamp などのイベントに出演されている方が記事を書いているようで、 無料で閲覧できます。 記事内容も充実していてWordpressに特化した情報が手に入ります。 2011/01/17現在第2号まで作成されています。 WordPants | WordPantsでもっとWordPressを楽しもう!ポップでパンツな電子出版雑誌です

no image

2018/4/20

さくらレンタルサーバーにGitをインストールする改良版

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

no image

2018/4/21

zen-codingをmasterしよう! Recommend web tools zen-coding

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

no image

2018/4/21

メニューをpipe「|」で区切ったとき、最後にpipeを表示させない方法How to not display pipe menu

【はじめに】 メニューをulタグとliタグでマークアップするとします。 メニュー項目をpipe「|」で区切ったときに、cssで一括指定すると最後のメニュー項目にまで pipeがついてしまって困りました。

no image

2018/4/21

WordPressのサイトを英語化(多言語化)するプラグインWPML

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

no image

2018/4/21

もっと早く知りたかったFireworksのトピックス

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

no image

2018/4/21

たった一行でclearfixを使わずにfloatを解除するテクニックを試してみた

IE6,7,8がだめでした。 ブロック要素をfloatしたときに、枠が切れたり、背景が表示されなかったりする状態をクリアするためにclearfixが使用されます。 ■参照URL たった一行でclearfixを使わずにfloatを解除するテクニックについて ■参照URL たった一行でclearfixを使わずにfloatを解除するテクニック : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障?クロノドライブ? 参照URLの記事を拝見しサンプルを作ってみました。 float ...

no image

2012/9/27

【Evernote】To do リストを作る【Evernote】How to make todo list

クライアント環境はEvernote for Macです。 EvernoteでTo do リストを作るには ノート編集 > メニュー >フォーマット >To-doを挿入

no image

2018/11/17

話題のコーディングツールZen CodingをDreamweaver8にインストールしてみた。

自宅で使用しているDreamweaver8にぜひともZenCodingをインストールしたい!!と思い立ちがんばりました。 公式にサポートがされているのはDreameweaverCS4のため不安でしたが…… なんとかインストール成功しました。 2月28日現在最新のバージョンは0.6なのですが、動作しなかったため0.5を使用します。 環境は MacOSX 10.5.8-leopard Dreamweaver8 インストール [1]ダウンロード Zen Coding.mxp - zen-coding - Zen ...

no image

2013/11/15

Firebugでhtmlコーディング効率化-[調査]How to use firebug at firefox

Firebugを立ち上げた直後はコンソール画面が表示されて、モードを選択します その中に、htmlソースの調査ができるボタンがあります。 毎回モード選択をする必要がありますので、ワンクリックで立ち上げ直後に調査モードにする方法。 表示 > ツールバー > カスタマイズ  調査アイコンをブックマークバーにドラック 「完了」をクリック ブックマークバーに眼鏡のアイコンが表示されますので、眼鏡のアイコンがショートカットになり、ワンクリックでFirebugが調査モードで立ち上がります。 Firebugを立ち上げた ...

no image

2012/9/28

WordPressでXML宣言をする時のエラー対処 How to safe xml error for WordPress

htmlバリデート 突然htmlバリデートをしたくなったので、してみました。 Another HTML-lint gateway テーマを変更して以来バリデーターを使用していなかったため点数がものすごく低くなっていました。 抜けていたxml宣言を加えようとするとphpエラーが表示されてしまいます。 そういえば昔も同じ事にはまってました… header.php に書く、xml宣言の 「< ?」 がphpのタグとして認識されてしまうようです 対処としては下記phpソースをコピペする < ?php ...

no image

2010/5/11

スキルチェック

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

no image

2012/9/28

IE6で透過png処理させるDD_belatedPNG.jsScript DD_belatedPNG.js

iepngfix,alphafilter.jsなどをメインにつかっていましたが、コレが今後 メインになりそうです。 DD_belatedPNG: Medicine for your IE6/PNG headache! こちらのサイトで透過pngのjs比較をしています。 DD_belatedPNG.js 他のスクリプトに比べてファイルサイズが小さく処理が早く、 記述の仕方も容易です DD_belatedPNG_0.0.7a-min.jsをダウンロードしてきて、 headタグ内に記述します。 DD_belat ...

no image

2012/9/27

[気分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="text/javascript" src="js/jquery-1.3.2.min.js"></sc ...

no image

2012/9/28

IE6.7で文字が欠けるBug ie6,7

自宅環境がMacなため全く気がつかなかったバグ。 floatとline-heightを一緒に指定すると、文字が欠ける。 | btmup Blog floatとline-heightを組み合わせて指定すると起こる現象と記述してありました。 floatとline-heightを別要素に変えてもなおらず、またline-heightの単位を外して、 line-height :1.5;も試したのですが、だめだったので、 該当部分に直接line-height:nomarl;を設定する事でクリアしました。 ieping ...

no image

2014/4/28

プレゼン資料で使えそうなアイコンサイトまとめIcon website link

パワーポイントの素材やテンプレートから企画・提案書用イラスト素材の無料ダウンロード - Presentation Exchange クリップアートとメディア ホーム ページ - Microsoft Office Online 2007年上半期人気無料アイコン配布ページ31個のまとめ。その数17000個以上*ホームページを作る人のネタ帳 クリップアート(シンボル・アイコン編): プレゼン素材集 | Wisdom iPresentee - Keynote Objects keynote用プレゼンアイコン ke ...

no image

2009/2/5

htmlコーディングメモ

cssのid名、class名の先頭は数字ではじめてはいけない。 cssが効かない しかし、Dreamweaver8のプレビュー画面ではなぜかcssが効く alphafilter.js 透過pngを背景画像として縦にリピートさせるときはうまくいかないので、別の透過スクリプトをつかう labelタグ MacSafari2ではlabelのforで指定した部分をクリックしても選択されない。 WindowsSafari3では正常に動作する

no image

2008/12/10

Webデザイナー向けWindowsショートカット

フォントフォルダに最速!?でたどり着く方法 最速かどうか確証はありませんが。。。 使いたいフォントをインストールする際に使用するフォントフォルダですが、Windowsのマイコンピューターを開き、コントロールバネルから〜〜とたまにしか開かないわりに面倒くさいです。 ショートカットを設定しておくのが早いと言われてしまうと返す言葉がないのですが、デスクトップにアイコンが一つ増えるので、これもイヤな場合はコチラをおためしください。 [スタート]→[ファイル名を指定して実行] を押すとプロンプトが開きますので、 [ ...

no image

2012/9/26

firebugのアイコンを変える for mac!!How to change firebug's icon for mac

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

Copyright© LAGRANGE BLOG , 2021 All Rights Reserved.