タグ

cssに関するvoidy21のブックマーク (61)

  • いまさら聞けないCSS/スタイルシート入門

    連載インデックス 「いまさら聞けないCSS/スタイルシート入門」 Webデザインにあると便利なCSSWeb制作初心者のための入門記事のまとめです。基礎的な文法/書き方から、IDやクラスなどのさまざまなセレクタ、プロパティ、デバッグツールの使い方、ボックスモデル、継承の基を豊富なサンプルコードとともに解説します。 ちょっとサイトをステキにするCSSの基 いまさら聞けないCSS/スタイルシート入門(1) Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基の基を学びませんか?

    いまさら聞けないCSS/スタイルシート入門
    voidy21
    voidy21 2009/10/27
  • [CSS]スタイルシートの記述をより読みやすくする5つのルール

    <textarea name="code" class="css" cols="60" rows="5"> #nav{ border: solid 1px #DEDEDE; color: #000; padding: 10px; width: 650px; } </textarea>

    voidy21
    voidy21 2009/10/25
    cssの読みやすさについて
  • 昔の記事には注意を出すことにした - by edvakf in hatena

    前にどっかで「ブログの賞味期限」というのがあったらいいなー、という記事があって、激しく同意した記憶がある。 ブログの記事を書くときに、この記事の賞味期限は何ヶ月ですよ、とか設定できて、それを過ぎると自動的に注意が表示されるようになるというアイデア。 このブログは2年も続けることができ、時には昔の記事が今でもリンクされたりすることがある。そういう時に自分の記事を見返して、「あー、今ではちょっと違うのになあ」と思うけど、とき既に遅し。リンクした人は間違った情報を信じてしまっているかもしれない。 じゃあ古い記事を訂正すればいいじゃないかということなんだけど、ブログを長く続ければ続けるほど過去記事は増え、いつかは全部の記事をメンテするなんて不可能になっていく。 で、まあそういう記事を運悪く検索で発見しちゃった人なんかは、当は日付けを見て察してほしいんだけど、やっぱりこっちから注意を促すべきだと思

    昔の記事には注意を出すことにした - by edvakf in hatena
  • 403 Forbidden

    \閉鎖予定のサイトも売れるかも?/ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう

  • 整然とライン上で表示されるCSSフレームワーク·Baseline MOONGIFT

    大学ノートには横線が引かれている。これを使って文字を書けば、斜めになったり一部だけ文字の大きさが変わって読みづらくなったりしない。整然と並んで書かれていれば後で読み返す時にもきっと分かりやすいはずだ。ある一定の基準に沿っていると安心感があり、情報を受け入れやすくなるのだ。 グリッド コンテンツを重視したWebサイトではそのような読みやすさの観点も考える必要がある。そのためのフレームワークがBaselineだ。 今回紹介するオープンソース・ソフトウェアはBaseline、グリッドに沿ったCSSフレームワークだ。 Baselineはまるで大学ノート、と思わせるような横線が引かれた背景画像にぴったりと合わせて文字が書かれている。カラムも1〜4カラムで調整でき、幅も3カラム分使ったり、2カラムずつで等分することもできる。統一された、均質的なデザインが組めるのが特徴だ。 フォーム テキストの表示の他

    整然とライン上で表示されるCSSフレームワーク·Baseline MOONGIFT
    voidy21
    voidy21 2009/09/01
  • 【どうしよう】お金がない、そんな時に頼れる融資先

    お金がないとき、どうしよう、というときのキャッシング活用法 多分わたしの家計をまず見直す必要があると思うのですが、毎月給料日直前になると、お金が尽きてしまいます。そんなとき、いつも友達や親からお金をすこしばかり借りて凌ぐのですが、先月はつい親に愛想を尽かされてしまいました。それで、来月はどうしてもお金がなくて、困ったら、キャッシングで乗り切ろうと思うのですが、その活用方法を教えてくださらないでしょうか? それなら無利息ローンがおすすめ 質問者さんもご自分でおっしゃっていますが、まずは家計の見直しが必要でしょうね。給料をどのくらいもらってらっしゃるのかわかりませんが、毎月借金をしなければやっていけない、というのはどこか問題があると思います。「足りなくなったら借りれば良い」という発想ではなく、「足りなくなるような状況が発生しないように」限られた中でどうすればよいのかを考えてみましょう。 ただ、

    voidy21
    voidy21 2009/08/30
  • [CSS]スタイルシートの実用的なテクニック集:エレメント・CSS3・Tips編

    先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。

    voidy21
    voidy21 2009/08/30
  • Core Animation - Safari の隠し味 - steps to phantasien(2009-08-22)

    2009-08-22 近況 WEB+DB PRESS の連載はなんとか打ち切りにならず続行中. 読んでもらえているとのフィードバックもいくつかいただき, ありがたいことでございます. 今回は CSS 周辺を読んでみました. ようやくブラウザらしくなってきたので興味のある方はごらんください. 記事の準備と称してコードを読む週末副業も今のところ続行中. 遠くに行くのがだんだん億劫になってきたので, 近所の安コーヒー屋に通っている. ひきこもり体質の改善はならず. 連載はこのあとレイアウト, レンダリングと続く予定. その準備にレンダリングまわりのコードを読んでいたら, 連載で書くにはややしんどいけれど WebKit らしいコードをみかけた. 今日はその話を書いてみたい. Core Animation - Safari の隠し味 CSSCSS 3D Transforms Module とい

    voidy21
    voidy21 2009/08/23
  • 【CSS】CSSで簡単にぶら下げインデントをする方法 | バシャログ。

    自宅用に新しいパソコンを買った sakai です。 スペック重視とお店で伝えたら「ちょっと値が張りますよ~」と店員に言われたのでドキドキしていたのですが、CPU が Core i7、メモリが 6GB、ハードディスクが 1TB、ディスプレイや OS も付属して 13 万円くらいでした。前回パソコンを買ったときの感覚では 30 万円くらいなのかと思ってました。安くなりましたね… 今回は小ネタで失礼します。 Web ページ中の注意書きなどでよく使用される手法で、「※」マークを使って文字をぶら下げる方法をご紹介します。 このように表示されます。 XHTML ソースは以下です。 <p>※ここに注意書き。<br /> 改行しても見栄えがいいです。</p> CSS のソースは以下です。 p { margin-left: 1em; /* ブロック全体を 1em 右に */ text-indent: -1e

    【CSS】CSSで簡単にぶら下げインデントをする方法 | バシャログ。
    voidy21
    voidy21 2009/08/18
  • [CSS]日付の年の箇所だけを90度回転させて配置するスタイルシート

    紹介する回転方法は二種類、左がテキストデータを回転して配置するもの、右が予め背景画像に回転させて配置するものです。 まずは、左のテキストを回転して配置する方から。 <textarea name="code" class="html" cols="60" rows="5"> <div class="example-date"> <span class="day">31</span> <span class="month">July</span> <span class="year">2009</span> </div> </textarea>

    voidy21
    voidy21 2009/07/31
  • Google Box - CSS Transform Test

    Google Box - CSS Transform Test Your browser may not support CSS Transforms. Close Search

  • NHK 2009都議選 開票速報ページがHTML的にも見た目的にもかなりキレイな件 | aquapple

    NHK 2009都議選のサイトが見た目が美しく、操作性も良いのに、Flashを一切使わずJavaScriptで制御されていることがTwitterで話題になっていました。 速報時は自動更新で獲得議席数がリアルタイムに反映されていましたが、現在は速報も終わり開票結果になっています。 動作確認も主要なモダンブラウザ[1]で動作確認が行われています。 ソースは8つのJavaScriptとdivタグに直接スタイルシートが書き込まれているだけで非常にシンプル。75行のHTMLソースの中にFlash要素はゼロとなっています。 各ブロックをクリックすると、フローティングウィンドウが出てきます。これはドラッグしたり、サイト下部に固定表示しておくことが可能となっているほか、ウィンドウの並び替えもタイトルバーをドラッグするだけで行えます。 このページの公開は15日の午後6時までとなっています。無駄に凝っているだ

  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
  • http://note.openvista.jp/2008/customizing-google-with-user-css/

  • 「Yahoo!ニュース」の表示速度が3~5倍に、そのからくりは……:記事の芽

    iPadをパソコン代わりに iPadの共有シートでファイルの送り先を選択しやすく、候補アプリの表示順を変更 2025.07.18

    「Yahoo!ニュース」の表示速度が3~5倍に、そのからくりは……:記事の芽
    voidy21
    voidy21 2009/05/29
  • タイトルと日付(リスト)が一行なサンプル

    どことなく良くありそうなリストのサンプルです。 ちょっと前にこんな感じのデザインのを組んだので、メモがてら色んなバージョンも作ってみました。 sample04辺りが良いかもしれないす。 サンプルページ ダウンロード ul要素のサンプル Sample 03まではul要素でやってみました。 XHTMLは↓こんな感じ。span要素無くてもいけそうな気もしたけど、めんどry <ul class="sample01"> <li> <a href="#">タイトル</a> <span>1983年03月24日</span> </li> </ul> Sample 01 positionプロパティ使って色々やってる感じです。 ul.sample01 { width: 500px; margin-bottom: 30px; padding: 10px; border: 1px solid #999; } ul

    タイトルと日付(リスト)が一行なサンプル
    voidy21
    voidy21 2009/01/19
  • 独学で極める “Webデザイン”の技と心:第10回 CSS Spritesでサイトを高速化|gihyo.jp … 技術評論社

    今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites(CSSスプライト⁠)⁠」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは? 通常、ウェブページを制作する場合、デザインファイル(psdやpngなどの画像)をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、1度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま

    独学で極める “Webデザイン”の技と心:第10回 CSS Spritesでサイトを高速化|gihyo.jp … 技術評論社
    voidy21
    voidy21 2008/05/27
  • 3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ

    最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。 キャリアごとにテンプレートを分けて記述するのは手間なので、基的に共通テンプレートで記述したいところですが、どうしても振り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。 なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。 ■文字コード UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。 ※上記で特定の文字のひとつとしてあげました三点リーダーですが、UT

    3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
    voidy21
    voidy21 2008/04/15
  • 優雅なWeb制作のためのテクニック

    自己紹介 中村享介 株式会社ロクナナ/ディレクター 月刊『web creators』 すぐに使えるCSSデザインテクニック 連載中 mixiコミュニティ 【優雅な】Web制作者の会 管理人

  • ユーザーが2~3カラムや800pxか1000pxか等を動的に変更できるすごいJavaScript*ホームページを作る人のネタ帳

    これは面白すごい。 なかなかさわり心地の良い動き。 しかも無料でダウンロードまでできるし、使えるし、なんともありがたい一品に、思わず勢いで記事にしてしまいました。 まずは以下のサンプルを触ってみると感動しますよ!(たぶん) サンプルデモは以下に 動的なhtmlショーケース 対応しているブラウザの幅も広いです。 # nternet Explorer 6, 7 # Firefox 1.5 + # Opera 9.1 + # Netscape 8.1 + # Safari 3 変更できる内容として # 右、左のサイドメニューの有り無し # 横幅800px、1000px、100% # フォントサイズ 等が変更できます。 もしもダウンロードするなら、以下のサイトに説明(英語)とダウンロードボタンがありますので是非。 Liquid Javascript Grid Layout

    ユーザーが2~3カラムや800pxか1000pxか等を動的に変更できるすごいJavaScript*ホームページを作る人のネタ帳