ミニマルでフラットがかわいい全300種のアイコン素材、PSDもAIもフォントも揃ってます -Metrize IconsMetrize Icons ダウンロードできるアイコンのフォーマットは、これ以上ないくらいに揃ってます！ PSD (各アイコンはシェイプ） SVG (512 x 512) EPS AI PDF Web Font (ttf, eot, woff) さらに、次のアップデートではpngとcshも加えたい、とのことです。 アイテムは全部で300種類、フラットなデザインにぴったりなサークル状のスタイルです。
WEB制作時に役立つ！ダミーテキストに使える定型文まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、弊社プログラマーの段田さんのブログで、ボーナスアップの道具として利用された野田です。 あれは、久しぶりに傷ついた。 そして、プライベートでもいろんな人にいじられた。 ネットって怖いですね。 さて、今回は、WEB制作に役立つ定型文のご紹介を致します。 僕自身、デザインする際に構成からガッツリ考えるのが大好きっていうか仕事なので、 それにあわせてダミーテキストを考えることが多いです。 デザインを提出する際には、「テキストテキストテキスト」や「ダミーダミーダミー」で提出することは絶対にしません。 お客様の意図を読み取ってこちらからご提案させていただくということも、Webデザイナーには必要なスキルの一つだと思うからです。 あたりまえなことですが、こういう部分に気づかない方も案外いらっしゃいます。 正直、僕もデザインを始めてすぐの頃にはそんな感じでした。 「仮」という言葉に甘えてしまう事は良く
約400種の欧文フォントが全部無料（商用可）でWebFontも使えちゃうFont Squirrelって素敵 / Maka-Veli .com
もう数年前にコリスさんやCREAMUさんで紹介されてましたが、恥ずかしながら知らなかったです。こんなに素敵なサイトがあったなんて。 最近DesignModoで紹介されていたので知りました。 すげー関係無いけどCREAMUさんのブログ超好きです 全部フリー 基本的には全て商用可。だそうです。 100% Free For Commercial Use. ただしフォントそれぞれにライセンスはあるので一応、要確認。 とても探しやすく、種類も豊富。400近くはあるんじゃないでしょうか？ 個人的には探しやすい点がとても気に入りました。 そしてもう一つ素敵なコンテンツがあったのですが Webfont kit がDLできる。そして作れる。 うちのサイト名やナビゲーション等に@font-faceでLeague Gothicを使ってますが、この@font-faceでwebfont使う時に必要な
15+ food and restaurant web designs
[“ <\/p>\r\n How do we live without food? It’s our sustenance. It’s the reason why we live and can be the reason for the opposite. Many events, conferences and groups surround themselves around the idea of being a ‘foodie’ and submerge themselves in the culture of cooking.<\/p>\r\n While food is good, it’s a well known fact that going into business in the food industry is often the hardest. Those
HTML5 Canvasでパーティクル表現！パーティクルエンジンParticleEmitterJS | ClockMaker Blog
にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がビジュアルエディターを使ってHTML5で簡単に作ることができます。 Demo (Require the browser supported HTML5 Canvas) Demo (Require the browser supported HTML5 Canvas) ParticleEmitterJS は CreateJS のフリーの拡張ライブラリで、簡単にパーティクルエフェクトを作ることができます。パーティクルエフェクトはゲームやコンテンツ表現の演出強化や、雲や炎などのシミュレーションにも利用できます。パーティクルは基本的に数値演算を利用するためプログラマの領分という印象が強いですが、ParticleEmitterJS
Ratchet
Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.Getting started Once you've downloaded Ratchet, here's what to do next. 1. Create your pages Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own. 2. Connect pages with push.js Read about push.js then start connecting y
アドビ、レスポンシブ対応のEdge Reflowを無償提供
マルチデバイスに対応したWeb制作手法として急速に広まりつつある「レスポンシブWebデザイン」に、アドビが本気で取り組みを始めた。2月14日（米国現地時間）、同社のサブスクリプションサービス「Adobe Creative Cloud」ユーザー向けに、デザインツール「Adobe Edge Reflow」のプレビュー版を公開。合わせてDreamweaverの可変グリッド（Fluid Grid）デザイン機能もアップデートし、レスポンシブWebデザインのデザインから実装までをサポートする。 Edge Reflowは、レスポンシブWebデザインに特化したデザインツール。画面上に画像やテキストなどの要素を配置し、レイアウトを切り替える基準となるスクリーン幅（ブレイクポイント）ごとに要素の位置を調整したり、スタイルを変更したりできる。 CSS3によるスタイリングに対応しており、CSSを編集しながらリアル
［ウェブサービスレビュー］シンプルなダミー画像を生成できる「DummyImage.com」
内容：「DummyImage.com」は、ダミー画像を生成してくれるジェネレータだ。ウェブサイトやワイヤフレームの制作においてダミー画像が必要な時、数値を入力するだけで必要なサイズの画像を手軽に得ることができる。 「DummyImage.com」は、ダミー画像を生成してくれるジェネレータだ。ウェブサイトやワイヤフレームの制作においてダミー画像が必要な時、数値を入力するだけで必要なサイズの画像を手軽に得ることができる。 使い方は、サイトのトップページにある入力欄に、横×縦のサイズ、背景色、文字色および画像フォーマット（png、gif、jpg）を入力するだけ。出力された画像はローカルに保存することも可能だが、「dummyimage.com/600×400/000/fff」といった具合にURLにパラメータをつけて呼び出すこともできるので、オンラインで利用するのであればそのままImgタグで読み込ん
米Adobe、見えないフォント「Adobe Blank」をオープンソースで公開 | OSDN Magazine
米Adobe Systemsが3月29日、「目に見えないフォント」というOpenTypeフォント「Adobe Blank」をオープンソースで公開した。特殊な用途で非常に有用なフォントという。ライセンスはSIL Open Font License, Version 1.1。 Adobe Blankは、すべての文字が「目に見えず、空白にもならない」という特殊なフォント。Unicodeのコードポイントを全てカバーしており、特定用途のAdobe-Identity-0 ROSの一部として構築されている。すべてのUnicodeコードポイントを「スペースなし、マークなし」のグリフにマッピングするという。 Adobe Blankは「目的のフォントが描画される前に、OSやアプリケーションのデフォルトフォントで文字が描画されることを防ぐ」「Webフォントが実際にロードされていることを検出する」といった目的で利
ウェブでも紙でも電子書籍でもOK、全500種ベクターで作られたフリーのアイコン素材 -Freepik
個人でも商用でも利用できる全500種類のアイテムが揃った、汎用性に優れたシンプルなデザインのアイコン素材を紹介します。 500 Vector Mega Icon Pack ダウンロードできるアイコン素材のフォーマットは、2種類です。 .ai 素材の修正・紙にも使えるIllustratorのベクター素材 .png すぐに使いたい人用の128x128の透過PNG アイコンは全部で500種類！ さまざまなアイテムが揃っています。
[基本操作] CSS レイアウトを使用してみよう（Dreamweaver CS4/CS5/CS5.5）
この文書は、Dreamweaver CS4/CS5/CS5.5 の基本的な使用方法を分かりやすく図解した内容となっています。 Dreamweaver CS4/CS5/CS5.5 では、CSS のレイアウト設定が既に適用された状態からファイルを作成することができます。また、レイアウトは用途に応じて調整することも可能です。 以前は、ヘッダ、フッタ、サイドバー、メインコンテンツなどのブロックを HTML のテーブルで組む方法が主流でしたが、外観の要素は CSS で定義するという本来の趣旨にしたがい、現在は CSS でレイアウトを定義する手法が一般的になっています。ですが、このようなレイアウトを正しくブラウザで表示させるように CSS を記述するには一定の知識が必要なため、Dreamweaver にはあらかじめこのようなレイアウトが組まれたテンプレートが複数用意されています。
Dreamweaverでスタイルシートを指定する
文中で部分的に赤字にしたい、または、太字にしたいときは、全てスタイルシートで指定します。このページでは、Dreamweaverでスタイルシートを指定する方法を説明します。 「ウィンドウ」→「CSSスタイル」パネル下部にある赤丸をクリックして「新規CSSスタイル」ダイアログボックスを開きます。 セレクタタイプ クラス＝クラスセレクタ。「. ドット」を入力してから、好みの名前を付けます。 タグ＝シンプルセレクタ。HTMLタグにスタイルシートを指定します。 詳細設定＝IDセレクタ、子孫セレクタ。指定方法はいくつかあります。 【指定例】 文中の中で赤字にしたいときは 「クラス」を選択して、「セレクタ」に「.aka」と入力し、「定義場所」、リンクしているスタイルシートファイルを選択。 「CSSルール定義」ダイアログボックスで、「カラー」を「#FF0000」に指定。これだけで指定終了です。
【CSS修正（後編） 】練習も大詰めです！CSS修正（前編）の続きです。
では実際にセルにスタイルを適用してください。やり方は先程と同じなので説明はしません。できれば少し悩んでもらいたいものです。そのほうが為になるのではないでしょうか？ これで左上と上段中央のセルの修正が終わりました。あとは各自で考えてやってみてください。もしかしたらつまづくかもしれないので少しだけヒントを。 CSSの名前 ・上段右：.righttop ・中段左：.leftmiddle ・中段右：.rightmiddle ・下段左：.leftbottom ・下段中央：.centerbottom ・下段右：.rightbottom 中段の左右のセルは少し機転をきかせないとできませんよ★上段中央は横長でしたね。なのでX軸にリピートさせました。今回は縦長ですね。ということは・・・？且つ、縦に自由に伸縮する為に、高さを入れる必要はありませんよね。 角についてなのですが、左上の角には背景の位置として、水平
「見られない」の前に...マイクロソフト発のサイト検証ツール「modern.IE」が開発者を救う？ | ライフハッカー・ジャパン
考えた末に、IEの生みの親であるマイクロソフトは、ひとつのサービスを提供することに決めました。それがウェブサイトチェックツール「modern.IE」。先駆けて英語版をリリースしていましたが、本日4月4日より、日本語版の提供も開始されました。 とはいえ、このツールは決してデベロッパーだけのものではないと思います。開発者とやり取りする企業のウェブ担当者、あるいは一人ひとりのユーザーにも使い道があるようです。どのようなことができるのか、早速使ってみましょう。 modern.IEが「なんとかしてよ」を解決しやすくしてくれる メインの機能は2つ。まずは、最新版IEとの互換性や、多様化するブラウザ環境に適応できるかをチェックする「Webページをスキャンする」機能。もうひとつは、WindowsやMac、あるいはスマートフォンなどでの動作を「仮想環境で検証する」機能です。 「Webページをスキャンする」機
プログラマのための言語別コーディング規約まとめ | Web活メモ帳
みなさんはコーディング規約を利用していますか。 個人で開発している時はオレオレルールで良かったのですが、 複数人で開発するようになると共通のルールがあった方がストレス無く開発が出来るようになります。 WEB系の言語のコーディング規約について、調べ物が必要だったので、 まとめたものをブログでもシェアします。 HTML・CSS Google HTML/CSS Style Guide の推奨ガイドラインまとめ HTML5 コーディングガイドライン（HTML5）ver1.0 JavaScript JavaScriptのいろいろなコーディングルールをまとめてみた PHP PHPのコーディング規約 PSR-0、PSR-1、PSR-2、PSR-3とは WordPress コーディング基準 Pear Manual :: 標準コーディング規約 Zend Framework PHP 標準コーディング規約 Ca
レイアウトが考えやすくなるデザインのルール ｜https://wp.yat-net.com/name
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
テキストの代わりに画像を使いたいときはSEOに適したWebフォントがいい
[対象: 上級] テキストの代わりに画像を使いたい場合は、Webフォントを使うといいとウェブマスター向けのQ&AビデオでGoogleのMatt Cutts（マット・カッツ）氏がアドバイスしました。 大部分のテキストを画像に置き換えた。 すると直帰率が大幅に下がり、コンバージョン率と滞在時間は増えた。 ただテキストのコンテンツがないとGoogle的には問題があるだろうか。 Googleにはやっぱりテキストが必要なのか。 上の質問に対して、Googleにとってはやはりテキストがあったほうがいいと前置きしたうえで2つの選択肢をMatt Cutts氏は提示しています。 alt属性やtitleタグなどのテキストで画像の情報を与える Webフォントを使う それぞれに関して詳しく見ていきましょう。 画像を理解させるにはテキストが必要 基本的に、検索エンジンは写真や絵といった画像を見てそれが何の画像なのか
シンプルで美しいウェブサイトをたった数分で作成できるサービス「Strikingly」 | ライフハッカー・ジャパン
単純明快なウェブサイトを作成したいなら、そのプロセスをシンプルにしてくれる「Strikingly」がオススメです。サイトのベースを選択し、画像とテキストを入力すればすぐにウェブページの完成です。ほんの少しの情報でもサイトを作成することはできますが、筆者はStrikinglyを使ってポートフォリオ全体をアップしようと試みたそう。画像や絵の追加、動画などのアップには何の問題もありませんでした。ただ音声だけのファイルには対応していないようです。作ってみたところ、このような感じのポートフォリオサイトが完成しました。 Strikinglyへのアップロードはパソコンからだけでなく、インターネット経由でのアップもできます。動画の追加はURLをペースト、画像の追加はドロップゾーンへドラッグすることによって可能です。写真には数十種類のフィルターもかけられます。 Strikinglyは機能的に限界がありますが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのプラグインやカスタマイズ情報を中心に紹介 - IMAGINATION DESIGN BLOG
CSSを学ぶ | Dreamweaverデベロッパーセンター