これからのWebデザインはIllustrator派が増えてくるのでは？ | 5 LOG
個人的に、今はWebデザインはイラレでやります。Photoshopは画像の調整にしか使いません。 これからは、徐々にDesigning in the browserにシフトして、ワイヤー、ラフ、パーツ制作にイラレを使用していくつもりです。 ただ、まだまだデザインカンプの作成が必須となっていて、なかなかシフト出来ないのが現状です。 なぜIllustratorか？ そもそもイラレの方がレイアウトが組みやすい。 これが一番の理由なんですが。。。 いや、これ以外にも、いろいろとあって、 以前は、とにかく画像画像だったパーツ（ナビゲーションとかボタンとか見出しとか）が、CSS3で表現出来るようになり、Webフォントやアイコンフォントが主流になってきて、画像で書き出すパーツが大幅に減った。 さらに、Retina等、解像度の違うディスプレイが登場して、今後も増えてくる事を考えるとSVGの使用も増えてくる
DreamweaverでHTML/CSSのコーディングをせずにWebサイトを構築してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 先日、「Bootstrapも標準化したDreamweaver CC 2015を使って、レスポンシブデザインを爆速で作る方法」という記事を執筆したところ、多くの方に見ていただけて嬉しく思っています！ ありがとうございます。 前回の記事を執筆したあと、「Dreamweaver CC 2015でどこまでできるかな？」という考えがふつと湧きました。 私自身はもともとコーディング大好きっ子なのでパチパチ打つのが好きなのですが、先日初めてビジュアルエディタをさわったので、「一切コードを書かないでどこまでできるのか」というチャレンジをしてみようかなと！ 「手打ちのほうが早いんじゃない？」と思う方も、普段触らないツールがどのくらいの力を秘めているのかを見学する気持ちで読んでいただければと思います！ そして「コーディングはできないんです……」というデザイナーさんは、まず
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
BannerBlog : Where Banners Click
Pulse Jam is a 16-bit styled rhythm based web game that ran as an expanding masthead on YouTube Players of Pulse Jam earn points and progress through different landscapes and levels by tapping the space bar in time to the synthesised soundtracks.
モダンCSSにおける黄金比とは？ | CREAMU
CSSでのレイアウトに黄金比を取り入れたい。 そんなときに参考になるのが、『Golden Ratio in modern CSS』。モダンCSSにおける黄金比だ。 このエントリーでは、960pxのdivがある場合、960 / 1.62 = 593px が左カラム、960 – 593 = 367pxが右カラムになるといったように、黄金比を取り入れたレイアウトの方法が解説されている。 その他にも、 line-height = font-size x 1.62 paragraph margin = paragraph line-height x 1.62 / 2 といったような設計の例が紹介されている。 結論としては、 Many people will argue, that this technic is an utopia and we cannot spend time coding ne
太陽石油
太陽石油のウェブサイトです。わたしたちは、総合エネルギー企業として、地球環境との調和を図り、安心と安全を提供し、豊かな社会づくりに貢献します。
萌え理論Blog - CSSまとめ
解説 CSSとは CSS*1とは、(X)HTML文書の見栄えを整形するための、Web標準*2の指定方法です。要するにホームページをデザインする手段です。CSSを使わなくてもHTMLで直接デザイン*3できなくはないですが、CSSを使った方が標準的で効率的です。例えば100枚のHTMLファイルを一つのCSSで一括して指定できます。また、はてなダイアリーもそうですが、ブログのデザイン指定にも使います。 基本 スタイルシートの基本 -- ごく簡単なHTMLの説明 よく使うCSSの話|基本編 CSS Nite Vol.7: Web制作現場の対立を解消する！ XHTML+CSSガイドライン作り [1] 一覧 とほほのスタイルシート入門 【HTMLタグの簡単検索】TAG index - Web制作情報 レイアウト CSSによる段組（マルチカラム）レイアウト講座 スタイルシートによる崩れない 2カラム 3
CSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::
お探しのページは「すでに削除されている」、「アクセスしたアドレスが異なっている」などの理由で見つかりませんでした。以下でキーワードやカテゴリーから記事を探すことができます。
サイトのCSSを見たままリアルタイムに編集するツール色々:phpspot開発日誌
サイトのCSSを見たままリアルタイムに編集するツール色々。 WEBデザイン開発において、編集→リアルタイム反映というのはなかなか効率がよいですね。 ということで、各種、リアルタイムCSS編集ツールをピックアップします。 FireFox拡張 or スタンドアロンアプリ FireBug - リアルタイムに指定部分のCSSが切り替え可能(参考記事)。CSS以外にも便利機能満載。 EditCSS - FireFox拡張で、エディタがインストールされ、エディタ編集と同時に即座にCSSが反映される。 CSSVista - IEとFireFoxの画面で一括プレビューが可能。 Web Developer ToolBar - WEBデザイナー必須のFireFox拡張。CSSの直接編集も可能。 他にもCSSやアクセシビリティに関する便利機能満載。 ブラウザ上で動作するオンラインツール たぬきのしっぽ - CS
WYSIWYGでCSSレイアウトを超簡単に作れる『CSS Grid Builder』 | p o p * p o p
なにかと便利なYahoo!のUIライブラリーに「Grids CSS」なるものがあります。自分でつくると面倒なCSSのレイアウトをテンプレートで提供してくれるものです。 この「Grids CSS」、ブラウザ対応がしっかりしていたり、ファイルサイズが軽量だったり、テンプレートが豊富だったりといいことづくめですが、いざ使うとなるとそれなりに説明を読み込んで（簡単だけど）手作業でレイアウトをつくっていく必要があります。 そこでその作業を簡単にできるようにWYSIWYGでジェネレーターを作った方がいます。こいつは便利です。 » YUI: CSS Grid Builder ↑ コントロールパネルはこんな感じ。 プレビューを見ながらカラムの数や横幅を指定していくと簡単にレイアウトができちゃいます。もちろんコードも瞬時に生成してくれます。 なお、これを使うには当然ですがYUIが必要になります。ダウンロード
マイクロソフト製サイト作成ソフト「Expression Web」日本語ベータ版
以前まで「Microsoft Expression Web Designer」という名称だったモノで、日本語ベータ版は無料で利用できます。ウリとしては、Web標準へ準拠しており、なおかつ洗練されたCSSページレイアウトが可能という点。 個人的には、Wordで作ったHTMLを最適化する機能やCSSなどのチェック機能、アクセシビリティの検査機能がなかなかお役立ち。使用感はDreamweaverっぽい。 というわけで、ダウンロードして実際に動かしてみました。 Microsoft(R) Expression(R) Web 日本語ベータ版 起動にはMicrosoft .NET Frameworkが必要で、上記ページにダウンロード用のリンクが用意されています。 インストール可能な環境はWindows XP + SP2、Windows Server 2003 + SP1、Windows Vista。推奨
高品質でフリーのウェブサイトテンプレート集「TemplatesBox.com」 - GIGAZINE
通常のウェブサイトだけでなく、Flashサイトのテンプレートやロゴマークのテンプレート、バナーやボタンまで置いてあります。これらがすべてフリーというのが驚き。全部で200個以上あるようです。 TemplatesBox.com http://www.templatesbox.com/ ウェブサイト用テンプレートは利用したPSDファイルやフォントも同梱されており、DreamweaverかFrontpageで編集しやすいようにできています。 ウェブサイト用テンプレートあれこれ http://www.templatesbox.com/templates.htm ロゴデザインのテンプレートはPSDファイルとフォントファイルが同梱されています。親切。 ロゴデザインのテンプレート http://www.templatesbox.com/free-logo-templates/index.htm ウェブサ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
京都精華大学
[CSS]アイデア満載のスタイルシートのテクニック30選 | コリス
CSS 2.1のエッセンス -- 脱初心者をめざす人のためのホームページ作成講座
最初に指定しておくと便利なCSS | Tech de Go
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
monitorPop rocks interactive & photography!
Dynamic Drive CSS Library- Practical CSS codes and examples