ideahacker.netideahacker.net 2024 著作権. 不許複製 プライバシーポリシー
【CSS】table-cellで中央にロゴ・両脇にボタンというデザインを作る方法 - ディレイマニア
目次 6回に渡る短期連載記事です。他の記事もこちらでご紹介しておきます。 【CSS】floatを使わずtable-cellを使って横並びにする方法 【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法 【CSS】table-cellを使って要素を均等に配置する方法 【CSS】table-cellで中央にロゴ・両脇にボタンというデザインを作る方法 ←今回はこれ 【CSS】table-cellでサムネイル画像＋テキスト＋ボタンのデザインをキレイに見せる方法 【CSS】table-cellを使って関連記事をタイル状にレイアウトする方法 番外編ですが、table-cellを使う上で重要なテクニックを追記します。 幅固定＋幅可変の組み合わせ 中央にサイトのロゴ、左右にボタンというデザインを例に紹介していきます。 まず基本的な書き方はこちら。 <div cl
CSS：text-shadowを使用し、文字に影や縁取りをする | raining
CSS3のtext-shadowを使用すれば、画像で作ったように文字を装飾することができます。 text-shadowを使用して、文字に影を付けたり、縁取り（アウトライン）をする方法をメモします。 text-shadowは文字に影を付けるプロパティです。 [text-shadow] text-shadow: 横方向 縦方向 ぼかし 影の色; 使用例は下記のように指定します。 text-shadow: 5px 5px 1px #999999; 設定する値を複数指定したい場合は下記のように’,’区切りで指定します。 text-shadow: 5px 5px 1px #999999, -5px -5px 1px #999999; noneを指定した場合、影は付きません。 ■ 文字に影を付ける場合 【CSS】 .test { color: #000; font-size: 50px; font-w
blog-entry-2.html
HTMLファイル内のCSSは大きく分けると、HTMLタグのstyle属性に記述されているものと、ファイルやstyleタグに記述されているものの2種類あります。 このうち前者は、JavaScriptを用いて書き換えるのがそれほど難しくありません。タグの要素を取得して直接書き換えるだけですから。 それに比べて後者は、特殊な手順を踏んで書き換えなければいけないのでちょっと面倒です。 でもCSSのクラスの定義などはCSSファイルかstyleタグ内に書かなくてはいけませんから、動的にCSSの定義を変更しようと思ったら後者を書き換えるしかありません。 用語解説 この記事には5個のオブジェクトが登場するのですが、名前が似ているせいもあって非常にややこしいので、登場するオブジェクトの解説を少しだけ。以下に解説するのはOpera、FireFox、Chromeで動く事を前提にしており、これらのブラウザでは無事
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです
スクロールが可能なのを知らせる矢印マークの動きで、要素が裂ける感じが斬新なCSSを使ったアニメーション | 9ineBB
ちょっと、見たことない感じでとても斬新。 矢印マークがふわふわと動いて、スクロールができることを知らせることはよく使われますが、このアイディアは斬新。 矢印マークの動きと合わせて、矢印マークに押し込まれるかのように裂けて行く感じが、良い。 コード HTML <div class="foo"></div> CSS @blue: #457BBE; body{ background: #E2E2E2; } .foo { position: absolute; bottom: 0; left: 0; width: 50%; height: 200px; background: @blue; -webkit-transform: translateZ(0); -webkit-animation: foo 2.5s linear alternate infinite; -moz-transform:
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
オリジナル画像のツイートボタンを設置する方法 | design Edge
Twitterのツイートボタンを設置する機会がありましたので、自作のオリジナル画像にする方法を備忘も兼ねてまとめておきます。 独自の画像を使用したボタンの設置は過去にも経験がありましたが、あまり機会がなくすっかり忘れていました…。今後のためにもここにメモしておきますので、デザイン重視でのWebサイトを作成など、ボタンをカスタマイズする際のご参考になれば幸いです。 基本的な構造は以下ソースの通りです。 HTML <a href="http://twitter.com/share?text=【ツイート文】&url=【共有するURL】&hashtags=【ハッシュタグ】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolb
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
PC/スマートフォンで背景画像を固定する - Cube Lilac
Web ページで背景画像を固定する場合、オーソドックスな方法は background-attachment プロパティを fixed に指定する事らしいのですが、この方法だと（PC で閲覧する分には問題ないのですが）手元の iPhone (iOS 5.1.1) では固定されませんでした。 /* この方法だと、iPhone（スマートフォン）で閲覧した時に背景画像が固定されない */ body { background-color : #cccccc; background-image : url('images/background.jpg'); background-repeat : no-repeat; background-attachment : fixed; background-size : 100% auto; /* 画面の幅に合わせて拡大・縮小 */ } そこで少しググってみ
【CSS】:hover疑似クラスで指定要素とは別の要素にスタイルを適用する - めめんと
CSSの「:hover」疑似クラスを使えばマウスオーバー時にその要素に対して何らかのスタイルを適用させることが可能ですが、:hoverエフェクトを指定した要素以外の要素にスタイルを適用させたいときには隣接要素の場合は「+」、兄弟要素の場合は「>」として以下のようにします。 <style type="text/css"> <!-- #test:hover{ background-color: blue; } #test:hover + #target{ background-color: red; } #test:hover > #inner{ background-color: green; } #test:hover > #inner:hover{ opacity: 0.7; } --> </style> <div id="test"> <div id="inner"></div> </
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
CSSで画像の横に文字を回り込ませる方法と解除する方法 | 9ineBB
まずは文字を回り込ませる方法ですが imgにfloatを使うことで文字を回り込ませることが出来ます 例 画像にCSSでfloatを書けてやると、その後に来る文字を画像に回り込ませることが出来ます HTML コード <img src="img/000.jpg" class="left"> CSS コード .left {float: left;margin-right:10px;} といった具合になります、leftとrightで右側左側をそれぞれ入れ替えて使えばOKです これで文字の回り込みをさせることが出来るのですが 問題点があります、それは文字の量が画像を覆い尽くす量が無かった場合にレイアウト崩れを起こしてしまうことです 次のコンテンツが、飲み込まれてしまっています 画像の文字の回りこみを解除する方法 解除の仕方はCSSでclear:both;を次に来る要素のCSSにつけてやるだけなのです
分かりにくいCSS height のパーセント設定のまとめ - A Memorandum
CSS にて、要素の height にパーセント値を指定した場合の表示について 分かりにくいので簡単にまとめておきます。 要素をウインドウ全体に表示したいけど上手くいかない 要素を画面全体に表示したい場合、「height: 100%;」と指定しても上手くいきません。 たとえば以下のHTMLで、div を画面全体に表示したい場合、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div class="main"> </div> </body> </html> div.main 要素を以下のように指定して、 div.main { height: 100%; } あれ、height
margin－スタイルシートリファレンス
マージンは領域間のスペース、パディングは領域内のスペースです。 尚、マージンには負の値を指定することもできます。 マージンに負の値を指定することで、複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置がブラウザによって異なるため、注意が必要です。 ■使用例 スタイルシート部分は外部ファイル（sample.css）に記述。 p.sample1 {background-color: #f8dce0; margin: 10px;} p.sample2 {background-color: #f8dce0; margin: 10px; padding: 10px;} p.sample3 {background-color: #f8dce0; margin: 10px 20px;} p.sample4 {background-color: #f8dce0; margin: 10px 20
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodePen - Fun With CSS 3D Box Transitions
06.GRASSHOPPER
info-architecture.jp
CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture