10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
CSS Lint
Errors (All) | (None) Beware of broken box sizing Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Compatibility (All) | (None) Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix Requi
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
Bootstrapはこう使う
Il documento contiene la struttura di un progetto Bootstrap, inclusi file e directory come gruntfile.js, package.json e vari file .less per la gestione degli stili. Sono presenti directory per risorse statiche come fonts, js e dist. La struttura suggerisce un setup per lo sviluppo web utilizzando strumenti moderni.
Flexboxで決まり！ | Webクリエイターボックス
これからのCSSレイアウトはFlexboxで決まり！FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ 対応ブラウザーCan I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari 用に -webkit- のベンダープレフィックスが必要です。IE については 11 から正式に対応。IE10 にも対応していますが、書き方が少し変わって
アニメーションのエフェクトを巧く取りいれたウェブサイトのまとめ
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
Typetester Compare fonts for the screen
Design Beautiful Typography One of the most popular applications for web designers is now a full-blown typography editor. Typetester classic that is known and loved by all is still online! Test and compare more than 2800 web fonts. The new Typetester is a WYSIWYG web typography editor. Create, export and share unlimited projects.
商用利用でも無料、シンプルでクリーンなデザインのテンプレートファイル一式 -Classic Luxury
ポートフォリオや写真ギャラリーサイトに最適な、シンプルでクリーンなデザインのCSSベースの無料のテンプレートファイル一式をSix Revisionsから紹介します。 Free XHTML Template Pack: Classic Luxury デモページ：Home テンプレートファイルの主な特長は下記の通り。 Photoshop用のPSDファイル付き。 ValidなXHTML。 jQueryを使用したモーダルウインドウ。 ドロップダウン型のナビゲーション。 Twitter, Facebookなどのソーシャルメディアのアイコン。 テンプレートは上記のHomeを含む3ページで構成されています。
Webデザイナーになったらまず最初にブックマークしておきたいWebサイトリスト｜ cocoblo [ココブロ]
お気に入りのWebサイトを紹介したいと思います。職場が変わった、パソコンが変わった時にいちいち探すのも少し面倒なのでブログに残しておきたいと思います。 とても勉強になるサイトばかりなのでチェックしてみてはいかがでしょうか？ タグリファレンス HTMLクイックリファレンス 目的別にHTMLやCSSのタグを探すことができる。ど忘れした時に調度良い感じがします。 TAG index HTMLやCSSのタグについてまとめられている。HTML5のタグも追加された。 HTMLやCSSを学び始めた頃から参考にさせてもらっているサイトです。タグの具体的な内容が書かれているので手軽に調べることができます。 デザインリンク Web Design Clip 業種やカラーでWebサイトを探すことができます。 Responsive Web Design JP レスポンシブデザインのサイトデザインを紹介してい
![Webデザイナーになったらまず最初にブックマークしておきたいWebサイトリスト｜ cocoblo [ココブロ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a31445b5006ede343e38a5c97fbafc1f550b3161/backend=imagemagick;height=288;version=1;width=512/http%3A%2F%2Fwww.cocoblo.jp%2Fblog%2Fwp-content%2Fuploads%2F2014%2F12%2Fresponsive-jp.jpg)
第8回 クロスブラウザ対応CSSでつまずかない | gihyo.jp
前回はサンプルを交えながら(X)HTMLとCSSの関係をおさらいしました。どれだけ画像を沢山利用したグラフィカルなサイトでも、画像を使わないシンプルなサイトでも基本はまったく同じであり、(X)HTMLは文書構造を、CSSでは文書の要素に対して見た目等の振る舞いを指定することにより、ブラウザで私たちが閲覧できる状態になります。 ところがリファレンス等を参考にしながら正しく(X)HTML/CSSを書くように頑張ってみたわりには、ブラウザ（閲覧環境）によっては表示が崩れてしまうなど、最初はなかなか思い通りに表示されないことが多いものです。 W3Cが技術を標準化するため(X)HTMLやCSSの仕様書を勧告していますが、現実に普及しているブラウザでは、仕様に完全準拠しているとは限りません。そのため、普及しているそれぞれのブラウザの特徴まで理解した上で(X)HTMLとCSSの設計をすることが必要です。
[CSS]CSS3グラデーションを使用した美しいツールバーとボタン
Experiments ツールバーもボタンもいくつかのバリエーションがあり、ノーマルタイプ、アイコンタイプ、カラーを変更したものと実用性の高いデモが公開されています。
[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ
大きな写真画像の背景やMaterial Designなどのフラットなスタイルに合うソリッドなラインでデザインされたゴーストボタンを実装するチュートリアルをまとめました。 シンプルなものから、かわいいアニメーションや一味違ったアニメーションなど、さまざまなものが揃っています。
![[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8c0226c4d0bf2e0e33bea9945a8793c5ae3674e8/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011500.gif)
2014年Webデザイナーはコードをどこまで学ぶべきか、Webデザインが今までどのように進化してきたかのまとめ
Webデザイナーはコードを学ぶべき？ コーダーはデザインを学ぶべき？ 両方に精通している人はなかなか多くはいません。Webデザインがどのように進化してきたのかその流れをしっかり押さえ、デザインとコードのギャップをつなぐことができたか振り返ってみましょう。 A brief history of web design for designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 先日の彼らの記事「しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則」と同様に、分かりやすいアニメーションもお楽しみください。 1989年：Webデザインの暗黒時代 1995年：Webデザインの始まりはテーブルから 1995年：JavaScriptが表現の幅を広げる 1996年：Flashにより自由の黄金期へ 19
本文と見出しのフォントサイズを数学的にバランスの良い比率でデザインする -Type Scale
本文と見出し、中見出し、小見出しのフォントサイズはどのように決めてますか？ 一つの方法として、一定の比率でそのサイズを決めるのも有りです。というか、そうやってよく決めてました。 さまざまな比率をベースにして、本文や見出しの各フォントサイズを検討できるオンラインサービスを紹介します。 Type Scale 左の各項目は、下記のようになっています。 Base Size ベースにするフォントサイズを入力します。 Scale 比率を選択します。 1.2, 1.414, 1.618などよく使う比率だけでなく、カスタムで数値を入れることもできます。 Preview Text 表示するテキストを入力します、日本語でも可。 Google Fonts 日本語で利用する場合は、特に変更はいりません。 Font Family 明朝体の時は「serif」、ゴシック体の時は「sans-serif」を入力。 Weig
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ
Hackery, Math & Design — Acko.net
TECH PROjin
オンラインでグリッドレイアウトが簡単に設計できる -Plumb
商用利用無料！ミニマルにデザインされたUIエレメントやコンポーネントが揃ってるCSSのライブラリ -Papier
第2回 楽にリストをストライプ模様にする | gihyo.jp
