少しのコードで実装可能な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
テキストリンク色の変更で、70億円（！）を稼ぎだすことに成功したマイクロソフト - Feel Like A Fallinstar
ユーザビリティの中でも特に狭義の「テキストリンク色」を変えただけで、恐るべきビジネスインパクトが現れたという事例です。 実際に成果の変化が起こったのは、マイクロソフトが鋭意売り出し中の検索エンジン「Bing」です。 テキストリンクを、入念にテストし、8000万ドルの売り上げ増 マイクロソフトは従来、「Live Search」という形でもう少し明るい青（水色に近い）を採用していました。 Bingよりも、明るいというかすこし緑に近い感じの色がベースになっていますね。 ちょっと比べてみました。 （※Live Searchは画像検索からキャプチャを取っています） こう見ると確かに色はかなり変化しています。 CNETの記事によると、マイクロソフトはBingを作る過程でかなりの数の色をテストしたようです。 Microsoftは最終的に「Bing」となるものを設計していたとき、膨大な数の色を検証し、
真面目にエロサイトを作ってみた【デザイナー編】 - BLOG｜ASTRODEO
東京都台東区で黙々とウェブでサービスを開発している株式会社アストロデオのホームページです。
CSS のみで吹き出し
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
WEB色見本 原色大辞典 - HTMLカラーコード
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
Web制作時に色（カラー選定）で困った際に役立ちそうな13のツールやサービス
Webサイトの制作時にいつも 時間がかかるのがカラー選定 で、少し困っているのでもう少し 時間を短縮したいと思い、使って いるツールも含めていろいろご紹介。 いろいろ有りすぎるので使いやすいと思ったサービスに厳選しています。順不同。使いやすさとか好みもあると思うので参考程度に。。。ネタ帳さんのwebサイト作成時にサイトカラーを決められない人の為のwebサービスいくつかという記事も凄く参考になりますよ。 原色大辞典 色のリファレンス国内サイト。国内にも同じようなサイトは沢山ありますが個人的にここが一番見やすくて使いやすいです。 原色大辞典 colr.org 写真からスキームを作成してくれます。手持ちの画像をアップロードしてスキーム作成も可能ですが、flickrからランダムで呼び出したり、ピッカー機能があったり、タグ付け出来たりと多機能ですが、UIがシンプルで使いやすい。動作も軽いので重宝しま
すくいぬ WEBデザイン詳しい暇な人ちょっとニートを助けて
2024 02 ≪ 12345678910111213141516171819202122232425262728293031≫ 2024 04 1 名前：以下、名無しにかわりましてVIPがお送りします[] 投稿日：2009/11/24(火) 11:47:13.45 ID:ZAwq5sRE0 ちょっとカンプとかいうの作ったんで見て(´･.ゝ･`) 根本からダメなのはわかるけど完成だけはさせたいんで アドバイスおくれ(´･.ゝ・`) 見出しの中身・・・ 3 名前：以下、名無しにかわりましてVIPがお送りします[] 投稿日：2009/11/24(火) 11:52:02.96 ID:ZAwq5sRE0 こねえ(； ･`д･´) 4 名前：以下、名無しにかわりましてVIPがお送りします[] 投稿日：2009/11/24(火) 11:53:31.47 ID:ZAwq5sRE0 ぬ・・・ そうか、甘え
単調なウェブサイトのデザインに手を加えてクオリティをアップするチュートリアル
ウェブサイトのデザインに、ビジュアルエレメントを追加したり、細部をブラッシュアップしたりしてクオリティをアップするPhotoshopのチュートリアルをPsdtuts+から紹介します。
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
プログラマが1ヶ月でWebデザイナーに転身する方法 - やねうらおブログ(移転しました)
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。 しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。 そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。 今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。 ■ HTML,CSSを覚えよう まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えている
チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル:phpspot開発日誌
チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル 2009年03月17日- 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques | 2experts Design - Web Design and Graphic Design Blog チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル。 プロレベルといっても様々ですが、そのなかでも優れたといえるレイアウトとデザインのチュートリアルが公開されています。 真似することでそれなりのものを作るのは難しくなさそうです。 Create a Magic Night Themed Web Design from Scratch in Photoshop マジックをイメージした、少し怪しげなレイアウト。占
モバイルサイトデザイン集のモバイルデザインアーカイブ 公式サイト
モバイルデザインアーカイブとは？ 携帯サイトを制作する上で、「ケータイサイトを参考にしたいけど、仕事に役に立つケータイサイト集ないかなー？」と思っているデザイナーの方へ向けて公開させていただきました。 そんなモバイルデザイナーのモバイルデザイナーによるモバイルデザイナーのための国内最大の携帯サイト集です。 モバイルサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練 された携帯サイトのデザインを参考にしたい」といった方のために、優れたデザインの ケータイサイトを集めました。 デザインに優れた携帯サイトはもちろん、技術的に優れた携帯サイト、そして現在のウェブトレンドを捉えた携帯サイトを掲載しています。
canonical属性とは／link rel=”canonical”によるURL正規化タグ——SEOにとって非常に重要な進歩（前編） | Web担当者Forum
canonical（カノニカル）タグは、<link rel="canonical" href="○○">のように使われます。そもそもcanonical属性とは検索エンジンに対してどんな意味を持ったタグなのでしょうか？ 基本情報からSEOで活用すべきシーンなどを事例で紹介します。 ヤフー、グーグル、そしてMSN Live Search（マイクロソフト）は、新しい「URL正規化タグ」をサポートすると発表した。 このタグを使えば、ウェブマスターやサイトオーナーが検索エンジンのインデックス内での重複コンテンツ問題を解消できる（ただし、自サイト内の問題のせいで生じる重複インデックスのみ）。 僕が思うに、これはSEOのベストプラクティスにとって、サイトマップの登場以来最大の変化だと思う。SEOmozでは最新ニュースを届けることより戦略について論じることに重点を置いているから、このブログで検索エンジン関
3キャリア対応のCSS変換モジュールHTML::MobileJpCSS - komoriyaのはてなダイアリー
DoCoMo,EZweb,Softbankを共通の外部CSSファイルからスタイルを反映させるモジュールを作りました。 http://search.cpan.org/~komoriya/HTML-MobileJpCSS-0.01/ 3キャリア間での変換の必要性 DoCoMoでは外部CSSを参照できずインラインのみの対応となっています。 DoCoMoのインライン化についてはid:tokuhiromさんの作成したHTML::DoCoMoCSSこちらで対応が可能なのですが、3キャリア間で共通のCSSを参照するとなると属性の指定方法に微妙な差異が問題となります。 例えば小さいフォントを表示したい時は、 DoCoMo --- font-size:xx-small EZweb --- font-size:10px Softbank --- font-size:smallと属性の値が異なります。 hrタグ
CSS - dtをfloatする場合の注意点 | Try | d-spica
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt>
第16回 Webサイトの配色で失敗しないための知識
今回のポイント Dull，Dark，Light，Vivid 標準灰色 トーンによる印象 補色と等色相差 今回は色の使い方について，少しつっこんだお話をしましょう。色味を表現する形容詞や，ある色の色味を変えた「トーン・バリエーション」から喚起されるイメージなどについて説明した後，色を組み合わせる際の考え方について，以前に紹介した「同系色の組み合わせ」から一歩進んだ知識を紹介します。 色味を表現する形容詞と明るさの基準 古くからある日本語の色の呼称は，その色を持つ物体からつけられることがよくあります。例えば「藍色」「橙色」「鶯色」「茜色」などはわかりやすい例です。こうした呼称はあいまいさもあります。「ねずみ色」と「灰色」はどちらもグレーを指しますが，果たしてどちらが暗い灰色なのかは微妙です。日本語は何事に対してもあいまいさが美徳とされる言語なのです。 あいまいな日本語の世界は置いておくとして，
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
http://www.designwalker.com/2008/05/wp-themes.html
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
web制作者のための2008年1月BESTまとめ43＋暇つぶしゲーム2*ホームページを作る人のネタ帳
