タグ

cssとwebに関するadamrockerのブックマーク (31)

  • ブログテンプレート作成ツールで簡単ブログデザイン! - CSSEZ

    Cssez : ผลบอล บอลวันนี้ วิเคราะห์บอล ข่าวฟุตบอล เราคือผู้นำของเว็บดูผลบอลสดออนไลน์ ผลบอลสดภาษาไทย 7m ข่าวฟุตบอล สรุปผลบอล ไฮไลท์ ที่สามารถเช็คผลบอลทั่วโลก มีทั้งภาษาไทย Livescore 7m 888 ผลบอลมีเสียงวันนี้ล่าสุด พรุ่งนี้ หรือเมื่อคืน รวบรวมเว็บผลบอลต่างๆมากมายมารวมไว้ที่เดียวเช่น livescore.com 7m.cn 888scoreonline.com thscore.cc และ spbo.com รวมทั้งมีวิเคราะห์บอล ตารางบอล คะแนนบอล และดูบอลสดออนไลน์

    adamrocker
    adamrocker 2007/07/30
    Web上でCSSをデザインする。どうじにプレビューも表示される。デザインしたCSSをMTやWPやFC2やLivedoor等のテンプレート形式でダウンロードできる。これは良いサービスだ。
  • CSSを使ったテキストをデザインとして魅せるテクニック集:phpspot開発日誌

    Mandarin Design: Text Tricks CSSを使ったテキストを魅せるテクニック集が色々公開されていました。 例えば、次のような見出しの1文字を修飾するテクニック 次のようなCSSで実現可能のようです。 <!-- the drop cap --> <span style="margin-right:6px;margin-top:5px;float:left;color:white;background:khaki;border:1px solid darkkhaki;font-size:80px;line-height:60px;padding-top:2px;padding-right:5px;font-family:times;">T</span>his is a drop cap with a black background, white text, and a

    adamrocker
    adamrocker 2007/05/21
    CSSを使ったテキストを魅せるテクニック集.
  • WEBデザインセンス向上まとめ。カラー統一サイト30×5・計150サイト+2200以上の無料HTMLテンプレ*ホームページを作る人のネタ帳

    これまで、統一カラーサイト30選・緑、赤、青をシリーズで公開しているブログをご紹介してきましたが、さらに茶色と黒が追加された為、計150となりましたのでまとめてご紹介していきます。 様々な統一されたサイトのセンスやWebの形を盗み、それでも尚足りないと思う人もいるかもしれませんので、HTMLCSSのフリーテンプレートサイト『OpenWebDesign』をご紹介しておきます。 書店に売っているデザイン参考書を読む前に、一度目を通しておいても損は(きっと)ないですよ。 統一カラーのサイト群 黒配色系のお手30サイト 30 Black Websites 茶色配色系のお手30サイト 30 Brown Websites 緑色配色系のお手30サイト 30 Green Websites 青色配色系のお手30サイト 30 Blue Websites 赤色配色系のお手30サイト 30 Red W

    WEBデザインセンス向上まとめ。カラー統一サイト30×5・計150サイト+2200以上の無料HTMLテンプレ*ホームページを作る人のネタ帳
    adamrocker
    adamrocker 2007/04/23
    WebデザインのHTMLとCSSのテンプレートを後悔してくれているサイト。参考になる。
  • ぼくがCSSを書くときに手放せないツール - ぼくはまちちゃん!(Hatena)

    こんにちはこんにちは!! CSS書いてますか!! ぼくなんか書きすぎて border: 1px solid red; が0.5秒で打ち込めそうな感じなんです>< ところで、CSSいっぱい書いてると、ぱっと見ただけでおよそ何ピクセルか、 わかったりするようになるから人間ってすごいよね! この余白は 6px だな、こっちのblockは 40px くらいかな? とか…! 大きいのは難しいけど! 最近はエラスチックなんとかレイアウト?っていう em で指定しちゃうのが流行だそうだから pxはあまり使わないのかもしれないけどね! ところで、そんなぼくがCSSを書くときに必須なツールがあります! 紹介しちゃいますね! きっと手放せなくなっちゃうよ! ひとつが、カラーピッカーだね! 画面上の好きな色を拾うやつ! これは色々なものが公開されているから省略しますね! ぼくはこれつかってるけど! もうひとつ…

    ぼくがCSSを書くときに手放せないツール - ぼくはまちちゃん!(Hatena)
    adamrocker
    adamrocker 2007/04/18
    CSSのレイアウトを決めるときに、十分設計されてコーディングを行った場合以外は、結構このものさしが便利そう。趣味でレイアウトを弄ってる人たちには重宝しそうです。
  • 画像の使用を極力控えてかっこいいCSSデザインをやってみよう - Gallery

    Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。

    adamrocker
    adamrocker 2007/04/16
    ほぼCSSだけでデザインするコンテストのギャラリー。ボツボツと作品が出てきているようです。参加するつもりだったけど、ちょっと忙しくなった…
  • 正しく、早く、美しいコーディングを実現するために踏むべき5つのステップ::::::STOPN' LISTEN::::::to the silence:::::::

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

    adamrocker
    adamrocker 2007/04/14
    正しい手順でWebサイトの構築を行いましょう。Webサイト構築を生業としている人達はこうやっているのか…
  • 超クールなCSSデザインされたUIのレーティングシステムのサンプル:phpspot開発日誌

    Rater ? Robarov: Webdesign, zoekmachine optimalisatie, hosting 超クールなCSSデザインされたUIのレーティングシステムのサンプル。 サンプルを使って次のようなカッコいいレーティングシステムを実装することができます。 デザインその1 デザインその2 いずれも、CSSによってデザインされており、HTMLは次のようにシンプル。 <ul id="rating"> <li id="r1"><a href="#1" title="give this site a 1"><span>Abysmal</span></a></li> <li id="r2"><a href="#2" title="give this site a 2"><span>Terrible</span></a></li> <li id="r3"><a href="#3"

    adamrocker
    adamrocker 2007/04/05
    CSSでクールにデザインされたレーティングシステム。クールとは見た目もそうですが、システム自体をも指します。簡単に投票してもらうには良い方法だと思います。
  • 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS&JavaScriptサンプル:phpspot開発日誌

    Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSSJavaScriptサンプル。 次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。 フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。 要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。 また、サンプルが1ファイル+画像1枚とシンプルなので、あまりJavaScriptCSSの知識のない方でも、ちょこっと変え

    adamrocker
    adamrocker 2007/03/26
    入力フォームにカーソルをあわせると吹出しメッセージを表示できるJavaScript+CSSライブラリ。
  • ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」:phpspot開発日誌

    Parallax Background with Javascript and CSS ページに今まで見たことのないような背景画像をCSSJavaScriptで設定「Parallax Backgrounds」。 一見なんの変哲もないサイトのように見えて、スクロールしてみると2枚の背景画像が違う速度でスクロールし、面白い効果が見られます。 スクロールバーをつまんでゆっくりページをスクロールしてみてください。 雲の画像が、その後ろの布風の背景画像よりも高速に動いてみえると思います。 JavaScriptの window.onscroll イベントによってそれぞれの背景画像のスクロール位置を調節しているようです。 凄く面白いなぁ、と思ったのですが、この方法を応用することで、新たに面白い効果を作ることができるかもしれませんね。 訪問者への驚きの要素として実装してみると面白いでしょう。 サポートブ

    adamrocker
    adamrocker 2007/03/24
    JavaScriptとCSSで背景画像を工夫する事で面白いエフェクトを実現しています。今まで見た事の無いエフェクトなのでクリッピング。具体的には、背景画像が2枚ある様に見え、奥と手前のスクロール速度を変えている。
  • お手本にしたい Web デザインのギャラリー10選 :: Love & Design ::

    Web デザインに限ったことではありませんが、何かを学ぶときは良いお手を探すことが大切ですね。そのお手を真似ながら、たくさん 練習することが上達するための何よりの方法だと思います。 そんなお手にしたいきれいな Web デザイン(CSS)ばかりを集めたギャラリーを10サイト選んでみました。配色に悩んだり、デザインのアイデアが浮かばない、そんなときもインスピレーションを与えてくれそうです。 01 CSS Mania CSS デザインといえば、まずここ 02 Most Inspired クールな CSS デザインを一括チェックできます。 03 CSS Impress ブログデザインの参考に 04 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards タグで分類されていて目的にあわせて選びやすい 05 CSSclip |

    お手本にしたい Web デザインのギャラリー10選 :: Love & Design ::
    adamrocker
    adamrocker 2007/03/19
    お手本にしたいきれいな Web デザイン(CSS)ばかりを集めたギャラリーを10サイト紹介してくれています。
  • CSSでデザインされたテーブルレスでクールなフォームサンプル:phpspot開発日誌

    Tableless forms consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. CSSでデザインされたテーブルレスでクールなフォームサンプル。 次のようなフォームのサンプルがダウンロードできます。 HTMLCSS、画像がセットになっているので、ちょっと編集していろいろと応用できそう。 ログインの横にアイコンが表示されていると直感的かつ、オシャレなフォームになってますね。デザイン面で参考に出来そうです。 関連エントリ ブログのコメント部分やコメントフォームのデザインを色々集めたサイト

    adamrocker
    adamrocker 2007/03/06
    フォーム内に画像がセットされとてもオシャレなフォームのサンプルがダウンロード可能だそうです。
  • CSS Cheat Sheet

    <style type="text/css"> selector {property: value;} </style>

    adamrocker
    adamrocker 2007/01/09
    CSSのカンニングペーパー。ついつい忘れてしまうCSSのあれこれが一枚にまとまっているので、プリントアウトして手元に持っておくと便利。
  • オンラインで自在にCSSレイアウトをデザイン出来るサイト:phpspot開発日誌

    Example - In search of the One True Layout - One True Layout- Interactive Example オンラインで自在にCSSレイアウトをデザイン出来るサイト。 フォームにて、ページのカラム数やそのカラムのサイズを調整でき、そのままボタンを押せばプレビューが実行されます。 他にもオプションが色々選択でき、結果的に、HTMLCSSのコードを出力することが可能。 複雑なカラムのレイアウトを独自に作りたい際にはなかなか便利かもしれませんね。 ↓プレビューされたレイアウト レイアウトを作成する効率的な方法として、他にもレイアウト集のサンプルを元にコピペで作成していく方法がありますが、 この場合、「CSSレイアウトのサンプル集」で紹介したページが使えますね。 関連エントリ サイトのCSSを見たままリアルタイムに編集するツール色々 CSS

    adamrocker
    adamrocker 2007/01/04
    フォームでページのカラム数やそのカラムサイズを調節できボタン1つでプレビューできる。javascript使ってリアルタイムにレイアウトが変更されればボタン押す手間がなくプレビューできて、より便利だと思うのだが…
  • 2006年を彩った50の超美麗CSSデザインサイト集:phpspot開発日誌

    50 Beautiful CSS-Based Web-Designs in 2006 | Smashing Magazine Let’s take a close look at some of the most beautiful designs we’ve seen in 2006.2006年を彩った50の超美麗CSSデザインサイト集。 どれも凄まじく凝ったサイト集で、1個1個が1つのクリエイターが精魂込めて作ったのが伺えます。 (Webデザイナーのためのリンク集) こういった美しいサイトを参考にサイトを作ったりすると自分のセンスも磨かれそうですね。 単に見るだけでも楽しめます。 2007年も素晴らしいサイトが出てくるんでしょうね。こういったデザインは数年前では見られなかったようなもののように感じます。 WEBデザインの面での進化についても今後が楽しみでしょうがないですね。 作成に使っ

    adamrocker
    adamrocker 2006/12/25
    美麗というだけあって、インパクト指向。実用的なものは少なそう…。本当に必要なのは実用的でありながらクールなサイト。
  • 一行あたりの文字数を制限するリキッドレイアウト - 2xup.org

    2006-12-20T02:12:30+09:00 今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。 いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。 div#container { width: 80%; } px で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。 fl

    adamrocker
    adamrocker 2006/12/20
    一行あたりの文字数で幅を決めるのは思いつかなかった。ユーザに優しいレイアウト?
  • Spiffy Corners - Purely CSS Rounded Corners

    Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff. What? Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript. Why? I needed a way to create anti-aliased round corners without the extra server calls that are incurred when using external JavaScript files or images. When your websites are

    adamrocker
    adamrocker 2006/12/14
    100%CSSで角丸を実現
  • CSS デザインまとめサイト 44サイト | WWW WATCH

    Modern, well-designed web pages deserve special focus in internet. They receive that thanks to so-called CSS galleries, into them are such pages arranging. On this page you can find a list of quite 44 CSS galeries of whom webdesigners from all the world gathers inspiration. 個人的には下記のサイトなんかよく利用させてもらってます。 CSS Beauty CSS Bloom CSS Blast CSS Drive CSS Mania CSS Remix CSS Vault Darkeye Design Shack Unma

    CSS デザインまとめサイト 44サイト | WWW WATCH
  • http://www.dbfnetwork.info/tinderbox/index.html

  • ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト

    GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠

    ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
  • IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌

    Insert HTML page into another HTML page | published @ aplus moments IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。 <html> <head> <title>test</title> </head> <body> <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="/exec/some.html" style="width:100;height:100px"> <p>non object</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html