タグ

CSSとWebに関するhiroetteのブックマーク (30)

  • wchecker.com

    This domain may be for sale!

  • Browser History Timeline

    Sources http://www.quirksmode.org/browsers/history.html http://www.blooberry.com/indexdot/history/browsers.htm http://en.wikipedia.org/ (various articles on specific browsers) See Also Wikipedia's browser timeline Thanks to… Kimberly Blessing, for keeping the timeline information up to date since early 2013.

    hiroette
    hiroette 2008/11/26
    テーブルを元にCSSでスタイリングされています。
  • 角の丸い「タブ」をHTMLとCSSで作る方法 [ホームページ作成] All About

    角の丸い「タブ」をHTMLCSSで作る方法左上と右上の角を丸くして「タブ」に見えるデザインをHTMLCSS(スタイルシート)で作成する方法を解説。リンクに長方形の枠を加えて上側の角を丸くすると「タブ」らしく見え、視覚的に分かりやすいナビゲーション機能が作れます。文字はテキスト・配色はCSSで記述するため、ソースをコピーするだけでいくつでも並べられ、修正も簡単です。

    角の丸い「タブ」をHTMLとCSSで作る方法 [ホームページ作成] All About
  • 長さを変更できるテキスト入力欄を作る [ホームページ作成] All About

    テキスト入力欄の長さを変更可能に 掲示板やメッセージ送信フォームなどでは、投稿欄(入力欄)が狭いと長い文章が書きにくくなってしまいます。 かといって、広大なスペースを最初から取っておくとページ全体を見渡しにくくなってしまいます。 そこで、投稿者が必要に応じて編集領域を広げられるようなテキスト入力欄を作ってみましょう。 上記の入力欄の下部にある「広げる」ボタンや「狭める」ボタンをクリックしてみて下さい。 クリックするたびに、2行分ずつ入力欄(編集領域)が増減します。 なお、accesskey属性を使ってアクセスキーを指定してありますので、以下のショートカットキーでもボタンを押せます。(キーの方がマウスよりも連続で押しやすいです。) ●Windowsの場合は(※) ・([Shift]+) [Alt]+[X]キーで「広げる」、 ・([Shift]+) [Alt]+[C]キーで「狭める」ボタンを押

    長さを変更できるテキスト入力欄を作る [ホームページ作成] All About
  • どのリンクが選択中なのかを際立たせる装飾 [ホームページ作成] All About

    メニューやリンクリストに活用するとおもしろいかも? リンクの上にマウスポインタを載せると装飾が変化するデザインは、よく使われていますね。 では、リンクの上にマウスを載せたときに、リンクの横や上などに矢印を表示させる装飾はいかがでしょうか。 以下のリンクにマウスポインタを重ねてみてください。 リンクにポインタを重ねると、リンク文字の右側に赤色の矢印()が現れるはずです。 リンクからマウスを放すと、矢印は消えます。 動的に矢印画像が表示されたり消えたりしますが、ここではスクリプトは一切使っていません。スタイルシートだけで実現しています。 ここで表示しているリンクは、通常のテキストリンク(文字で書いたリンク)です。 どんな文字を何文字表示させているリンクの横でも実現可能です。 矢印でなくても表示可能 もちろん、表示させるのは矢印である必要はありません。以下のような装飾も可能です。 リンクにマウス

    どのリンクが選択中なのかを際立たせる装飾 [ホームページ作成] All About
  • CSS で簡単に上下中央揃えを実現する

    blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTMLSVG 混在でき

  • これは便利! CSSのコピペはこのコンテンツで - SitePoint CSS Reference | ネット | マイコミジャーナル

    SitePoint CSS Reference SitePointは31日(米国時間)、CSSのリファレンスサイトSitePoint CSS Referenceを公開した。同サイトはTommy Olsson氏およびPaul O'Brien氏という著名な2人のCSSエキスパートによって執筆されたもの。そのままコピー&ペーストして使えるようなCSSのコードと説明がまとめられたサイトで、CSSを編集するWebデザイナはぜひともブックマークしておきたいサイトだ。 SitePoint CSS Referenceは公開以前となるプライベートベータテストの状態で、すでにSitePointコミュニティからのフィードバックを受けて改善が実施されている。いわば現状でのCSSベストプラクティスがまとまっているコンテンツだ。 SitePoint CSS Reference - そのまま使えるサンプルとブラウザでの

    hiroette
    hiroette 2008/02/08
    そのままコピー&ペーストして使えるようなCSSのコードと説明がまとめられたサイト
  • wrapScroll JavaScript Library - youmos

    hiroette
    hiroette 2008/02/08
    画面をスクロールしてもついてくる画像やメニューを作る方法
  • 連載:独学で極める “Webデザイン”の技と心|gihyo.jp … 技術評論社

    運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

    連載:独学で極める “Webデザイン”の技と心|gihyo.jp … 技術評論社
  • スペシャルベスト

    免責事項:サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら

  • Devthought - Guillermo Rauch’s Blog » CSS Javascript power. Fancy menu

    Update: the code that empowers this menu has been upgraded to the latest MooTools version, and even improved! Now works with vertical, horizontal menus, with more flexible morphing! Let me introduce you to Fancy Menu: Home Plant a tree Travel Ride an elephant When it comes to creating the navigation part of your Website, the first thing you might think of is an unordered list that you style

    hiroette
    hiroette 2008/01/28
    Fancy menu メニューで、マウスカーソルを移動すると、それに反応して選択エリアが移動する。移動のし方がプルプルしていて面白い
  • CSS Gradient Text - by Web Designer Wall

    jQuery prepend version Note: in this sample the <span> tag is prepended by jQuery (it is not in the source code). Apply on real design See, it is very practical. Try it on your design today. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, i

    hiroette
    hiroette 2008/01/28
    CSSで、文字にグラデーションを設定するテクニック
  • How to make sexy buttons with CSS

    This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here's what you'll get: Sliding doors Since we want our buttons to be über-flexible, we'll have to make the background image expand with the si

    hiroette
    hiroette 2008/01/28
    かっこいいボタンを作るチュートリアル
  • Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。 公式サポートサイト

    重版決定、発行部数が1万3000部を超えました! 7月3日に発売された「Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。」ですが、おかげさまで2度目の重版(第3刷)が決定... 2008年03月29日(土) 21:23 お知らせ 法則15におけるリンクタイプ一覧表の印刷ミスに関して 「法則15 link要素で(X)HTML文書の利便性を高める」(P36~P37)において、P36の下部、リンクタイプ一覧表に印刷ミスがありました。... 2007年08月30日(木) 23:16 訂正情報

  • 実践アクセシブルHTML - フォームは送信してもらえばこそ

    こんなフォームはイヤだ! フォームとは、HTMLのFORM要素などによってマークアップされているコントロール群の塊のことです。さまざまなウェブサイトにおいて、主に問い合わせのページであるとか、サイト内検索のためのキーワード入力用にだとかで利用されています。コミュニティ機能を備えているようなサイトであれば、掲示板システムのようなところでも使われていることでしょう。フォームのないウェブサイトのほうが珍しいのではないでしょうか。それくらい、制作側にもユーザーにも身近なものです。 INPUT要素やTEXTAREA要素などといった、フォームのコントロール各要素の機能はブラウザによって提供されているため、どのようなブラウザであってもその操作感に大きな違いが出ません。しかしコントロールごとの操作に違いが出ないといっても、フォーム全体としてはやはり使いやすいフォームと使いにくいフォームというのがあります。

  • CSSデザインカタログ

    対応ブラウザは Windows:InternetExplorer6,InternetExplorer7,Firefox2,Opera9 Mac:Firefox2,Opera9,Safari2 ですが,ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7,Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上,分類コード(div011-hp,table010 など)を class名にしてありますが,実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合,既存

  • リゾレーヌ サプリを口コミだけで判断してはダメ?バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します!

    リゾレーヌ サプリを口コミだけで判断してはダメ?バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します!
  • 強調部分に二重線を引きたい! [ホームページ作成] All About

    強調部分に二重線を引きたい!「文字の下に二重線を引いて強調したい!!」と思ったことはありませんか? 文字を強調する手段は太字だけではありません。スタイルシートを使えば、二重線を引いて強調することもできます。 「ここは、二重線を引いて強調したい!!」と思ったことはありませんか? HTMLで「強調」というと、太字にするくらいしか方法がありません。 斜体ではあまり強調になりませんし、下線ではリンクと間違いやすく紛らわしいでしょう。文字サイズを大きくする方法もありますが、文章中で頻繁に使うと読みにくくなってしまう可能性があります。文字色を変える方法もありますが、モノクロで印刷された場合には強調の効果がなくなってしまいます。 というわけでお勧めなのが、文字の下に二重線を引いて強調する方法です。 印刷物に手描きで強調を書き加える際に、二重線で強調することはありませんか?ウェブ上でも簡単な方法で二重線を

    強調部分に二重線を引きたい! [ホームページ作成] All About
  • リンク先のサムネイルを事前に見せるリンク [ホームページ作成] All About

    リンク先のサムネイルを事前に見せるリンクリンクの上にマウスを載せると、リンク先ページのサムネイル画像やブックマーク数が「吹き出し」に表示される面白いサービスがあります。実際にアクセスすることなくリンク先ページの外観が見えるリンクが作れます。 リンク先にアクセスせずにリンク先の内容を確認させられるサービス 「HeartRails Glance」というサービスを使うと、 リンクの上にマウスを載せるだけで、リンク先ページのサムネイル画像を「吹き出し」に表示させることができます。 Internet Explorer・Firefox・Operaが対象で、JavaScriptを有効にしていれば動作します。 それらのブラウザを使ってリンクの上にマウスポインタを載せると、下図のように「吹き出し」が現れて、リンク先のサムネイル画像などが表示されます。 設置方法は非常に簡単で、指定されたHTMLソース(Jav

    リンク先のサムネイルを事前に見せるリンク [ホームページ作成] All About
    hiroette
    hiroette 2007/09/14
    リンク先にアクセスせずにリンク先の内容を確認させられるサービス
  • WEBデザイン BLOG: css,スタイルシートアーカイブ

    hiroette
    hiroette 2007/03/01
    スタイルシートの色々な技のサンプルサイト