マウスオーバーエフェクト Creative Link EffectsIf you enjoyed these effects you might also like: Creative Button Styles Simple Icon Hover Effects
見ながら覚えよう！positionプロパティ「absolute」と「relative」についてのお話 | たねっぱ！
positionプロパティ、難しいですよね･･･！はじめのうちは何度聞いても混乱してしまうこの二つ。 「absolute」と「relative」の違いについて、画像とあわせてまとめてみました。 私もちょっと長いこと、 absolute＝絶対位置 relative＝相対位置 といわれても全然ピンときてませんでした。「絶対？相対？どういう意味？」という感じだったのですが、 きっと、考えるより実際見てみたほうがわかりやすいと思います！ 実際にページに配置して確認してみましょう。 01ページ内に配置してみる <body>～</body>内のソース <body> <div id=”box”>配置するボックス</div> <p>テキスト</p> </body>
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
グリッドレイアウトを採用しているwebデザイン 40【国内】 - NxWorld
プラグインに引き続きグリッドレイアウトネタです。 自分が参考にしたい時に探す手間を省きたいのもあったので、グリッドレイアウトを採用している国内のwebデザインをまとめました。 シンプルなものから動きに特徴があるものまで様々なタイプがあるので、デザインだけじゃなく何かと参考になります。
CSSを弄るなら、Chromeの「デベロッパーツール」は絶対使えたほうが良い
サイトを作る時に、自分の思ったようにCSSが反映されないことって良くありますよね。 また、サイトのテンプレートをちょっとだけ弄りたい時や、他の人の作ったHTML+CSSソースを触る必要がある時に、一からソースを解析していくのってとても時間がかかるし、面倒くさいですよね。 そんな時、Google Chromeに元から組み込まれているWeb開発者向けのツール「デベロッパーツール」がめちゃくちゃ便利です！ 一瞬で、CSSの直すべき箇所を見つけ出すことが出来ちゃいます！ 今回は、Chromeの「デベロッパーツール」の使い方を簡単にご紹介しようと思います。 まずはじめに、Google Chromeをお持ちでない方は、下記のGoogle公式サイトより、Chromeをインストールして下さい。 Webの開発をするなら、検証の為にもChromeは入れておきましょう！ Chrome ブラウザ（公式） http
CSSの修正が捗る「リアルタイムコーディング」とは
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第2回は、Webページの修正をリアルタイムで反映する「Elements」パネル、「Sources」パネルの使い方を説明します。 細かい修正の手戻りにもさくさく対応したい！ コーディングが完了したあとで、「やっぱりフォントサイズを大きくして」「下の余白をもう少し小さくして」と、クライアントやディレクターから細かい修正を求められることはよくありますよね。さらに、修正後、「やっぱり元に戻してくれる？」「もっと小さくしてできる？」と手戻りが発生し、作業時間がどんどん伸びてしまうこともあります。 どんなに確認のステップを踏んでも、この手の手戻りは完全にゼロにはできないもの。そこで、Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。 Elementsパネルの起動方法 Goo
CSSで実装するタグクラウドのサンプル - NxWorld
画像は一切使用せず、CSSのみで実装・デザインしたタグクラウドのサンプルです。 CSSのみで実装しているのでサイズやカラー変更も容易にできます。 ここでは見栄えをイメージで紹介しており、実際の見栄えは下記で確認できます。 タイプ #1 基本的にはli要素が並ぶだけなんですが、文字数が長いものは「…」と省略表示するように指定しているので、省略されるポイント（長さ）を調整したい時はCSSのul li aの箇所に記述しているmax-widthの値を任意で変更してください。 省略自体が必要ない場合はmax-width, text-overflow, overflowの3つを削除してください。 また、文字省略についてはこれ以降紹介するサンプルにも適用しているので、不要な場合は同じように調整・削除を行ってください。 <ul> <li><a href="#">tag</a></li> <li><a hr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
