web製作者向けチートシートまとめ - CHROMA
List Adobe関連 Illustrator Photoshop Fireworks Indesign Acrobat HTML,CSS HTML 文字実体参照 CSS HTML5+CSS3サポートブラウザ Canvas Haml,Sass Haml Sass Vim,Zencoding Vim Zencoding javascript/jQuery javascript jQuery UNIX 正規表現 検証ツール Firebug Chrome Developer Tool ブラウザ関連 Chrome Safari Firefox IE Mac 参考 アプリ・ツール Adobe関連(CS5-CS6) CS5と6のチートシート上げてるけど、adobe製品なら簡単にエクスポートできると思う。例えばfireworksなら、メニューバーから[Fireworks>ショートカット>現在のセット：
Webサイトの作り方のまとめ！トップページ完成まで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3（+α）回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン／おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道：サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines（埋め込みタイムライン） トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す
私がウェブサイト作成時にお世話になっているサイトをご紹介
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。 他にはこんなサイトをよく見ます。 WEBデザインの見本帳 Web Design Clip 【Webデザインクリップ】 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。 一応Drea
Webサイト制作の一連の流れをまとめてみました
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
Webデザイナ、デベロッパーの為の国内ブログ24+72記事
独自視点で順番に特に意味はありません。 これから春に就職する方も、今も奮闘中の方も是非お勧めしたいデザイナー、Webデザイナー、デベロッパー向けの国内ブログのまとめです。 さらにそのブログの中でもおすすめの３記事をピックアップいたしました。お時間の有るときにでもどうぞ。 Webデザイナーなら知ってるでしょ？ １）Webクリエイターボックス 私のブログのデザインを作った人。世界を放浪しながらデザインを学んでいる。もっと手軽に楽しくWeb制作ができるようにみんなになってほしいをモットーにしているのでわかりやすい記事が豊富。 Facebookページの作り方 2012年1月版少しの手間で大きく変わる、細部にこだわったWebデザインを少しのコードで実装可能な20のCSS小技集 ２）Webデザインレシピ リファレンス的な分厚い記事が豊富。正直分厚い記事を書く人といえばもはやこの人しか居ないというくらい
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
2011年1月のこれだけ読めば分かる Web 制作者向け情報まとめ | ウェブル
いろいろなところから2011年1月に集めてきた情報を要点を抑えて紹介していきます。これは何か、どんなシーンで使えるのかということを書くようにして、気持よく読めるようにまとめて行けたら良いです。情報を集めるのが苦手なあなたはこれだけ読めば結構身になるかもしれませんね。 これは Web サービスに使えると思った情報 使い方をその場で再現するスクリプト目の前でアニメーションして説明するスクリプト「Embedded Help System」 – GIGAZINE Web サービスのヘルプなどで使えるかもしれません。導入がそこまで難しくないようなので、ヘルプを作る際は一番最初にこちらを検討すると良いかもしれませんね。 ビジネスモデルについて学べるわかったつもりになっていませんか：「ビジネスモデル」とはなんだろう? 余談や説明が長すぎたので、個人的にためになりそうな要点だけ抑えておきます。 なんか微
2010年総まとめ：CSSの実用的なテクニック集
CSS3で何ができるの？ という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。
Web屋さんのための新年の抱負アイデア24
2017年6月29日 Web関連記事, ライフハック 2011年がスタートしましたが、「なんだか調子でないなー」という方！今年の目標はもう設定しましたか？私は毎年「新年の抱負」を考えているのですが、今年は何にしましょう？ということで、Web屋さんが設定できそうな新年の抱負案を考えてみたので、参考にしつつ新年の抱負を考えてみてはいかがでしょう？ ↑私が10年以上利用している会計ソフト！ 1. CSS3の勉強をする 角丸・グラデーションをはじめ、画像を使わなければできなかった効果がCSS3を使えば簡単に実装できます。デザインの幅がぐんっと広がります。IEで対応していないなどの問題もありますが、CSS3 PIEを使えばIEでも使えるようになりますよ。 CSS3リファレンス CSS3のリファレンスサイト。コードの例もわかりやすいです。 たった一行を追加するだけでIE6/7/8をCSS3対応にする
Flashでやってしまいがちな16個の間違った使い方 | ClockMaker Blog
Photoshopでやってしまいがちな12個の間違った使い方 – GIGAZINEが面白かったので、Flash版として「Flashでやってしまいがちな16個の間違った使い方」としてまとめてみました。 1.シンボル化しないままトゥイーンを作成している まずは誰でも一度はやったことがあるであろう、シンボル化しないままのトゥイーン作成。ライブラリに「トゥイーン○」という名もなきシンボルが作成され、後で見返したときや他の共同作業者が非常に困ることになります。 2.テキストフィールドに直接リンクURLを設定している getURLやnavigateToURLなんてスクリプトを知らない初心者のころはテキストフィールドにURLをいれてテキストリンクを作っていました。これは演出が作れないので、慣れてくると使うことはないでしょう。 3.文字をボタンに含めたときに後ろにシェイプを敷いていない ボタンを作ったとき
ECサイトをデザインする時の8つのポイント
2017年6月29日 Webサイト制作, Webデザイン プログラミングに詳しくなくてもECサイトを設置できちゃうCMSがたくさんあります。そんなCMSを紹介…しようと思ったのですが、かちびと.netにまとめ記事があったので、そのへんはシロ氏にお任せして、今回はECサイトのデザイン部分に焦点をあててみたいと思います。ECサイトではその商品やマーケティングが重要になってきますが、サイト全体のデザインを工夫してユーザーの購買意欲をより刺激しましょう！ ↑私が10年以上利用している会計ソフト！ 1. 商品のデザインと合わせる ECサイトのデザインは、その商品を知ることから始まります。例えば商品が服ならそのブランドのデザインコンセプトはもちろん、どんな人が、どんな場所で着るのか、素材やよく使われている色合いなどを研究してみてください。 Apple http://www.apple.com/jp/
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
cssやプログラミングマークアップをより早く Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家）HTMLコーディングが3倍速くなる？「Zen-Coding」秀丸Zen- Codingマクロコーディングの効率化を図
WEBデザインをプロっぽく仕上げるPhotoshopのグラデーションファイルの厳選まとめ | 日刊ウェブログ式
フォトショップのグラデーションファイルは作業を早めるのに役立ちますし、テンプレートだと色の参考にもなります。PhotoshopやGIMPの色合いが美しいグラデーションを厳選してまとめました。 追記: 2010/12/04 グラデーション追加/リンク切れチェック Photoshop Gradients Nice photoshop gradient set Download Source Web 2.0 Photoshop gradients Download Source Ultimate Web 2.0 Gradients - FREE Download Download Source 黄金比グラデーション・白銀比グラデーション | DesignWalker Download Source 日本の伝統色グラデーションファイル | DesignWalker Download Source
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
サイト公開前に役立ちそうなフリーのツールやWebサービスいろいろ
Webサービス公開前にサイトをチェック Webサイトを制作して公開する際は おかしいところが無いか、不備は 無いか不安になったり、という方も 少なくないのではないかと思います。 Webサイトを制作して公開する際は おかしいところが無いか、不備は 無いか不安になったり、という方も 少なくないのではないかと思います。 そこで、公開前に色々と確認出来たり、 最適化できる様なフリーのサービスや フリーソフトをご紹介します。 ここで言う「公開前」とは「サーバーにアップする」事ではなく、公開を告知したり、プレスリリースを出す前の状態とお受け下さい。ローンチ前と書くべきだったかもしれませんね。。誤解を与えていたら申し訳ないです。 では、ブラウザチェックツール、モニタ別表示チェック、表示スピードチェックツール、cssや画像の最適化ツール、などなどご紹介していきます。 ブラウザチェック各ブラウザでどのように
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
このWEBサービスやアプリ達に感謝しなければ年を越せない！僕が今年使い倒した2012年のベストを全部ご紹介！ | バンクーバーのうぇぶ屋
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳
