Sampraryは "いいなと感じたサイト" "気になる色" を集めたWebギャラリーサイトです。 推薦ボタン(Recommend this)はログイン等は不要ですので、気に入ったサイトがあればクリックしていってください。
色がわかるギャラリーサイト samprary
Sampraryは "いいなと感じたサイト" "気になる色" を集めたWebギャラリーサイトです。 推薦ボタン(Recommend this)はログイン等は不要ですので、気に入ったサイトがあればクリックしていってください。
CSSだけで作るtableデザインテクニックVer.02(おまけ付き)
今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます！ こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです！！予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました！ 気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ！ CSSテーブルデザインテクニック01 HTML テクニック01 <table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top
[CSS]日本語にもマッチする、見出しの文字をかっこよくするスタイルシートのまとめ | コリス
This is a Headline ブラウザはChrome, SafariのWebkit系でご覧ください。 各スタイルとともに、スタイルシートを紹介します。 とその前に、HTMLはごくシンプルです。 <h1 class="vintage">美しい日本語</h1> ヴィンテージ風にスタイルします。 .vintage{ background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat; text-shadow: 5px -5px black, 4px -4px white; font-weight: bold; -webkit
フラットデザインのコツ的なアレ - 納豆には卵を入れる派です。
P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く
[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した
角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！ デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。 気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。 形状としての
![[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した](https://cdn-ak-scissors.b.st-hatena.com/image/square/9068d7a52b34c4de9a5be296ee0a927a28903d59/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fdesign-rounded-corner-13-150x150.png)
Illustratorでぼかした白フチを付ける
Illustratorで写真の上に文字などを置いた場合、背景によっては見にくくなったりすることがあります。 その場合、よく上の文字などに白いフチを付けたりするのですが、ただそれだけでは能がないので、背景と馴染むようにぼかした白フチを付けます。（完成形は左の写真のようになります。）
色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ | 高橋文樹.com | デザイン
この投稿は 11年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 前回の記事に続き、僕と同じくデザイン力のない人のためのサバイブハウツーです。Webサイトを作っていると、デザインをしなくてはならないのですが、その際にとても困るのが色の決定です。 色使いというのはとても大事なもので、「ダサいなー」と思われる理由のトップクラスに位置するものです。デザインというのは上手くいっている場合は気づかれず、失敗したときに目立ちます。 みんな大好き愛生会病院 僕はいままで某大手企業の研修や某デジハリなどで沢山の初心者を見てきましたが、確実に言えることは99%の人に色彩センスはないということです。「好きな色決めてね」というと、99%の人がクソのような色を使ってきます。これは当人がダサいかダサくないかにかかわらず、99%色彩センスがありません。 Webで色彩
ヘッダとフッタを固定して常に表示 « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
少し前までのWebサイト制作ではフレームによって簡単に実装されていましたが、Web標準が重視されフレームの使用がご法度になった今、画面全体がスクロールするWebサイトが一般的になりました。しかし、コンテンツ部分が長くなると、コンテンツ上部にあるメニューボタンの利用が不便になるなど、ユーザビリティの低下も否めません。 好みや慣れもあると思いますが、XHTML+CSSでフレームのようにヘッダとフッタを画面の上下に固定し、常に表示する方法をご紹介します。 ページの情報量が少ない場合も画面最下部にフッタを表示する方法は、フッタ固定で紹介しています。 サンプル ヘッダとフッタを固定して常に表示するサンプル（別ウィンドウで表示） ソース 上記サンプルで使用しているソースです。 body{ margin: 0; padding: 100px 0 50px 0; } * html body{ overfl
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
Color Schemer | Create matching color schemes at the click of a button
Every Monday, get all the new schemes posted during the previous week sent to your inbox.
CSS3で作るシンプルなマウスオーバーアニメーション5種
Posted: 2011.06.15 / Category: HTML&CSS / Tag: CSS3, アニメーション css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。 Chrome、Firefoxで動作確認しております。 css3マウスオーバーアニメーションの基本 マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。 たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。 css a { color: #3399FF; } a:hover { color: #FF6600; } これをアニメーションさせるには「transition」というプロパティを追加します。 transition: プロパティ名 時間 アニメーション方法 ;
最低限覚えておきたいWEB配色の基本２大原理と６つの配色パターン
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBサイトのデザインは、誰もが頭を悩ませる部分だ。 「どういう配色なら良い印象を持ってもらうことができるのか？」「どのレイアウトならコンバージョンが上がるのか？」など、様々なところまで考えを張り巡らさなければいけないからだ。 そこで本日は、The Art of Color Coordination というインフォグラフィックをご紹介する。これを見れば、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
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton
パネル右：グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webamb.com
新着記事
配色のセンスをゼロから習得するために役立つスライド
