少しのコードで実装可能な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
デザイナーならこう作るCSSスタイルテーブル『A CSS styled table version 2』 – creamu
かっこいいテーブルをデザインしたい。 そんなあなたにおすすめなのが、『A CSS styled table version 2』。デザイナーならこう作るCSSスタイルテーブルだ。 このエントリーでは、クリーンなソースでコーディングされたテーブルが2つ紹介されている。 » Example 1 背景画像は使わず、セルに背景色を使った例 » Example 2 背景画像を使った例 どちらもページのソースを見るのが早いだろう。 シンプルでとても綺麗なテーブルに仕上がっていると思う。 デザイナーならこう作るCSSスタイルテーブル、チェックして作っていきたいですね。 プランナー、アートディレクターにたくさんのことを教わりました。「とりあえず手を動かすのがレイアウトの基本」だと。あとデザインはピクセルよりも見た目。人間の目にはくるいがあるから見た目で綺麗にそろっていればいい。とにかく手を動かしていこうっ
ウノウラボ Unoh Labs: ブログパーツ貼り付けタグのまとめ＋Googleガジェット＠はてな
ごらんの通りこれらのタグは、一部例外を除き少なくとも上表にあるブログサービスでは、すべてOKかすべてNGかのどちらかで、つまりこれらのひとつがNGなら他のタグもNGであるようなので、どのタグを選択するか、ブログサービス側の制限を考慮して悩む必要はないようです。 そうするとFlashオブジェクトの表示は、「Internet ExplorerでのActiveXコントロールのアクティブ化問題」を考慮するなら、OBJECTタグを直接記述するのは避けて、JavaScriptで行ったほうがよいのかなと。 全般的な留意点 貼り付けコードはブログの投稿設定などに影響されないように配慮しておく必要があります。特に、サイドバーだけではなく記事本文中にも貼り付けられることを想定している場合は、以下の設定は、殆どのブログサービスで記事本文の投稿についてはデフォルトでONの筈なので、こうした設定に影響を受けないもの
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
ロゴとか作るときに使える地味なテクニック - 3ping.org
ウェブ製作では、閲覧者の環境にないフォントを使用するときは画像として製作してimg要素で貼り付けたりCSSで背景画像として表示させたりすることがありますが、そういうテキストを含む画像を作るときにはFLASH8のFlashTypeで作ると通常のアンチエイリアスより綺麗にできちゃう。 FlashTypeっていうのは、WindowsXPに搭載された ClearTypeと同じ仕組みのアンチエイリアス技術で、液晶モニターでは特にその視認性が優れています。ClearTypeは日本語フォントには対応していませんが(Vistaの新日本語フォントのみ対応)、FlashTypeでは英字・日本語フォント全てに対応しており、カスタムアンチエイリアスパネルで細かく調整できます。 次の画像はPhotoshopで製作した通常のアンチエイリアスと、FlashTypeを比較したものです。 中間色ではそれほど変化はみられませ
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
ITmedia Biz.ID：Webページのキャプチャにまつわる7つのワザ
先日の記事「Webページのスクロールキャプチャを極める」に引き続き、今回はWebページのキャプチャを行う場合に便利なTipsを7つ紹介する。 Webページのキャプチャにはただ「PrtSc」（プリントスクリーン）ボタンを押すだけの方法から、特定のソフトを使った方法までさまざまだ。好評だった先日の記事「Webページのスクロールキャプチャを極める」に引き続き、今回はWebページのキャプチャを行う場合に便利なTipsを7つ紹介する。 訪問済みリンクの色をリセットする Webページのキャプチャを行う際、一部のリンクだけが訪問済みの色（Internet Explorerのデフォルトだと紫色）だとカッコ悪い。ブラウザのキャッシュを削除してリロードすれば元に戻るが、頻繁にキャプチャを行うのなら、思い切ってブラウザの「訪問済みリンクの色」を変えてしまうのもひとつの方法だ。 やり方は簡単。IEであれば「ツール
CSSでPDFやExcel等のファイルタイプ別アイコンを自動付与:phpspot開発日誌
Showing Hyperlink Cues with CSS (Ask the CSS Guy) I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari. CSSでPDFやExcel等のファイルタイプ別アイコンを自動付与する方法が紹介されていました。 自動付与、というのは、例えば、<a href="***.pdf">pdfファイル</a> のようなリンクがあったとすると、pdfという最後
プログラマでも出来るWebデザイン - Blog.37to.net
home blog labs about contact プログラミング・開発 > プログラマでも出来るWebデザイン (X)HTML CSS テンプレート デザイン 画像 作成： 2007-01-08T01:58:41+09:00 更新： 2009-04-29T09:48:31+09:00 年始早々に大幅リニューアルした当ブログですが、リニューアルのお知らせでも書いた通り、 今回のデザインリニューアルに当たっての作成過程や、使ったツールを書いていきます。 デザインセンスの無い私にとって、今回のリニューアルは良く出来たと自負しているので、 お題はプログラマでも出来るWebデザイン。 前提として、CSSでコーディングが出来て、ある程度HTMLは設計出来る、でもデザインは・・・orz な人を対象にしています。 使用したツール・サイト一覧 作成過程は後半に書くとして、今回使用したサイト・ツールで
Lucky bag::blog: 外部の RSS を PHP で取得
2008年12月26日に当サイトのテンプレートおよびデザイン、サーバの変更作業時に当記事にて紹介しているHot entryというページは削除してしまいました。当該ページは404 Not Foundとなっていることをご了承ください。 ありがたくも、拙記事なんぞをはてなブックマークや dei.icio.us などの ソーシャルブックマークでブックマークして頂いてもらっちゃったりしているわけで、なんとも恐縮に感じていたり、いなかったり。んでもって、どうせなら興味を持って頂いた記事を紹介するかっつうことで、そんなに Hot なわけじゃないのに Hot entry なるページを作っちまいました。ウヘ:-P とりあえず今回は、はてなブックマークにブックマークされている当サイトのエントリー一覧の RSS を取り込んでみますた。外部の RSS を取り込むって場合、CGI や JavaScript を使って
トップページだけでもなんとかしたいのよ
ホームページデザインに悩んだら試してみましょ。スカスカで薄っぺらいトップページだけでも、かっこよくする情報が、ここにあります。
Javascriptで指定のHTML要素を動的に角丸デザインにする方法:phpspot開発日誌
Nifty Corners This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. Javascriptで指定のHTML要素を動的に角丸デザインにする方法。 NiftyCornerを使えば、単一のDIV要素を角丸デザインにすることが可能です。 例えば、次のような単一DIV要素も簡単に角丸にできます。 <div id="nifty"><p>test</p></div> <script type="text/javascript"> Rounded("div#nifty","#377CB1","#9
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作を依頼されたクライアントの、ウェブイメージを簡単にキャッチするための方法*ホームページを作る人のネタ帳
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選
open-arms.biz
Blogサイトで見かける変なHTML
CSSによる段組（マルチカラム）レイアウト講座
DIV要素で構造を補強
http://kojiru.jugem.cc/?eid=708
http://www.stylish-style.com/csstec/csstec-top.html