シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
ウェブデザインをはじめるあなたへ - ウェブ雑記
ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。＋いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ
WEB色見本 原色大辞典 - HTMLカラーコード
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
Androidの通信周りのコーディングについて
[CB16] (P)FACE :アップルのコアへ、そしてルート権限へのエクスプロイト by Moony Li & Jack TangCODE BLUE
IE7からのCSSの小難しいセレクタやプロパティいろいろ
チャイルドセレクタや隣接セレクタなど、あんまり馴染みのないちょっと小難しい CSS のセレクタなどをまとめてみました。 これからクロスブラウザの照準を、IE7 に合わせるなら、ちょっとお役立ちかもです！ そろそろ IE6 のことは忘れて、IE7 からのクロスブラウザを目指せばいいのかなーという気がしています。CSS のプラパティーの中には、今まで IE6 のことを考えて使わなかったものがたくさんあったりします。それらを改めて確認してみると、コーディングの幅が広がるなーという気になったりもします。 これから使う事が増えるかもしれない、CSS のセレクタやプロパティを、もう一度振り返ってみると同時に、IE7 で注意したい事などを簡単にまとめてみました。 IE6 ではサポートされていませんでしたが、IE7 からは使ってもOKなセレクタやプロパティには、どんなものがあるのか確認してみます。後半は
テキストリンク色の変更で、70億円（！）を稼ぎだすことに成功したマイクロソフト - Feel Like A Fallinstar
ユーザビリティの中でも特に狭義の「テキストリンク色」を変えただけで、恐るべきビジネスインパクトが現れたという事例です。 実際に成果の変化が起こったのは、マイクロソフトが鋭意売り出し中の検索エンジン「Bing」です。 テキストリンクを、入念にテストし、8000万ドルの売り上げ増 マイクロソフトは従来、「Live Search」という形でもう少し明るい青（水色に近い）を採用していました。 Bingよりも、明るいというかすこし緑に近い感じの色がベースになっていますね。 ちょっと比べてみました。 （※Live Searchは画像検索からキャプチャを取っています） こう見ると確かに色はかなり変化しています。 CNETの記事によると、マイクロソフトはBingを作る過程でかなりの数の色をテストしたようです。 Microsoftは最終的に「Bing」となるものを設計していたとき、膨大な数の色を検証し、
CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
Webデザイン事始め・まずはフリーソフトで始めよう。GimpとInkscapeの説明が分かりやすいサイト
題名の通りですが、これから Webデザインに手を出そう、 という方の為に日本語サイト で説明が凄く分かりやすい サイトと少しチュートリアル記事 の紹介です。 Webデザインを始めたいけどadobeのソフトは高額でなかなか手軽に始められません。まずはほぼ同等の機能を持ち、しかも無料で手に入るGimp（Photoshop代替ソフト）とInkscape（Illustrator代替ソフト）で様子見をしてみてはいかがでしょう。 使い方や実践チュートリアルを丁寧に説明してくれるサイトをご紹介します。「これなら触ってみよう」という気になれるかと思います。沢山あげられると選べずに萎えるので1，2サイトに絞りました。両ソフトのダウンロードもリンク先で出来ます。 プロも使ってるといわれるGimp。Webデザインをこれから始めようと思ってもなかなかとっつき難いかもしれません。ですので扉となってくれそうなサイトを
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
Mockingbird has Shut Down
Mockingbird is no longer in operation. We’re hoping to open-source the code sometime in the near future. In the meantime, some simple alternatives, in a similar spirit to Mockingbird, are: Excalidraw: https://excalidraw.com TLDraw: https://www.tldraw.com If you need a more comprehensive mockup solution, you might want to check out the following: FigJam: https://www.figma.com/figjam/ MockFlow: http
国内の商用利用可能なWeb制作に使えるフリー素材配布サイトまとめ - かちびと.net
日本のWebデザインってあまりトレンド というのは無いような気がします。なんと言うか 見易さとか実用性メインでデザインは結構 シンプルだったりしますし、日本人に合ってる のかもしれないですね。そんな訳で日本人の 感性で作られた商用利用もOKの国内の Web素材配布サイトをまとめてメモしておきます。 僕自身がいいと思ったサイトを厳選してご紹介します。順不同。 サイトごとに利用規約が若干違うので重要な部分はメモしますが、ご利用の際は必ずご自身の目で利用規約ページをご確認下さい。問題が起きても当方は責任負いかねます。利用規約ページがある場合はそのページにもリンクを貼っておきます。 デザイン素材.com アイコンがメインでファイルはPNG。ネットショップ素材が中心で使いやすいデザインが沢山あります。 加工、商用OK、印刷物、ソフトウェアでも可能、Webデザイナーも利用可能。再配布、２次配布は不可。
ホントに助かるフリーのcssジェネレーターいろいろ
使えるcssのオンラインサービスが 50個、Speckyboyで記事にされていた のでよさ気なものをいくつかご紹介します。 全部良さそうなので気になる方はぜひ 記事元を訪れてみてください。 日本語のテキストで作成できるｃｓｓメニュージェネレーターは本当に助かります。 Grid Designer 2 細かい設定を行えてすぐに反映されるグリッドシステム。 Grid Designer 2 nP: Grid Generator グリッドを作成すると、ｃｓｓのソースも出してくれます。 nP: Grid Generator Dynamic 4 Column Layout Generator これ面白い。4カラム専用のレイアウトジェネレーター。設定と同時に反映、 ｃｓｓもＤＬ（コピペ）出来ます。 Dynamic 4 Column Layout Generator XHTML/CSS Markup Gen
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webクリエイターズマニュアル
Material Design
web制作関連ジェネレーター - ブックマーク - Tips - AZ store
http://e0166nt.com/blog-entry-646.html
http://www.designwalker.com/2009/04/wireframe-2.html
[JS]画像を使用して、divの矩形を角丸やグラフィカルにするスクリプト -DivCorners
IDEA * IDEA
