少しのコードで実装可能な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
HTMLDocument の動的な作成: Days on the Moon
ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
MdN Design｜総合情報サイト
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！
1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo
スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:
ランディングページ集めました。
2009年からランディングページを集めているサイトです。購買行動や認知拡大のために作られたランディングページのデザインまとめサイトです。LP制作の参考にどうぞ。
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
次のデザインに使えそうな綺麗なアイコン集:phpspot開発日誌
次のデザインに使えそうな綺麗なアイコン集ということでSmashing Magazineさんで綺麗なアイコンがまとまっています。 デザインに使ってしまうのがもったいないぐらいにアイコンが作りこまれていますね。 以下のエントリを参照してください。 50 Beautiful Free Icon Sets For Your Next Design - Smashing Magazine 関連エントリ 2009年に発見した秀作アイコンのまとめ iPhoneアプリのツールバー部分に使えそうなアイコン色々
CSS３を使った、強くて速いデザイン例 – creamu
CSS3でできることをいち早く知っておきたい。 そんなあなたにおすすめなのが、『Stronger, Better, Faster Design with CSS3』。CSS３を使った、強くて速いデザイン例です。 以下の例が紹介されています。 Inline Form Labels inputのフィールドに透かしテキストを入れる方法。MobileMeで使われていますね。フォーカスした時にopacityで透明度を変化。デモはこちら Fast, Easy Drop-in Modals 綺麗なグラデーションの背景と、ドロップシャドウのついたモーダルダイアログ。美しい。デモはこちら Newspaper Layouts with Columns and Image Masks 新聞紙のような綺麗なカラムレイアウトと、グラデーションによるイメージマスクの例。デモはこちら CSSのコーディングで表現力が増え
ドラッグ＆ドロップできるショッピングカート | SIMPLE*SIMPLE
これ、きれいでいいですね。アイコン販売サイトですが、ドラッグ＆ドロップでショッピングカードにぽんぽん放り込んでいくことができます。 ↑ こんな感じ。 左側のショッピングカートは下のほうにスクロールしていってもちゃんとついてきてくれますね。わかりやすい。 実際に動作している様子は以下からどうぞ。 » IconDock – The Art of Stock Icons
[CSS]IE8にも対応したクロスブラウザ用の不透明度の指定方法
<textarea name="code" class="css" cols="60" rows="5"> selector { opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=75); /* IE lt 8 */ -ms-filter: "alpha(opacity=75)"; /* IE 8 */ -khtml-opacity: .75; /* Safari 1.x */ -moz-opacity: .75; /* FF lt 1.5, Netscape */ } </textarea>
![[CSS]IE8にも対応したクロスブラウザ用の不透明度の指定方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
ブラウザからちょー簡単にサイトの更新ができるようになる『SiteCake』 | 100SHIKI
まだ正式リリース前だが、なかなか興味深いサービスなのでご紹介。 SiteCakeはブラウザから簡単にウェブサイトを作成・編集できるツールだ。 詳しい導入方法はまだ明らかにされていないが、編集したいサイトにSiteCakeフォルダを追加するだけで、Firefoxから直感的に編集ができるようだ。 現在、サイトの方でデモを試すことができるが、ドラッグ＆ドロップで文章を追加したり、マウスで位置を変えたりといったことが実に簡単にできてしまう。感動ものなのでぜひ試してみてもらいたい。 こうしたツールがあれば、まるで紙の上で落書きするようにサイトが出来てしまうのではなかろうか。 年末には無料プランがリリースされるようなので楽しみにしていたい。
かっこいいjQueryのスライダー25 – creamu
WebDesignFanで、かっこいいjQueryのスライダーがまとまっています。 いくつかご紹介しますね。似たようなエントリーを書いていますが、あまり見たことのないものがいろいろあります。 jQuery Plugin – Feature List 左にナビゲーションがあって自動で切り替わる Accessible News Slider ナビゲーションがわかりやすいニューススライダー。広げる、たたむ機能もあり Animated JavaScript Accordion V2 シンプルで使いやすいアコーディオンメニュー Easy Slider 1.7 – Numeric Navigation jQuery Slider とてもクールなスライダー。左右にナビゲーションあり SlideItMoo 1.1 – improved image slider 左右のナビゲーションでスライドするタイプ M
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
汎用性に優れた108種類のシンプルなフリーのアイコン -108 Mono Icons | コリス
108 Mono Icons: Huge Set of Minimal Icons 配布されているアイコンのカラーはグレーで、オーバーレイやレイヤースタイルで別のカラーに簡単に変更することもできます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
みんなで作るWEBデザイン参考集「ブックマ！」
[CSS]商用サイトでもそのまま利用できるCSSのナビゲーション集
2010年になる前に、見ておきたい15のウェブサイトのデザイン
IDEA * IDEA
2010年に参考にできそうなCSSベースのWEBデザイン集:phpspot開発日誌
ボタンを綺麗に修飾してくれるライブラリ「sexybuttons」:phpspot開発日誌