タグ

関連タグで絞り込む (7)

タグの絞り込みを解除

CSSに関するpri_lightのブックマーク (13)

  • Learn HTML5, CSS3, Javascript - video style tutorials

    Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch

  • http://webdesignmatome.com/webdesign/parallax_jp

    http://webdesignmatome.com/webdesign/parallax_jp

  • SAB-webカスタマイズ

    ブログテンプレートの改装と、新しいレイアウトについて見直し・学習をしています。 宜しくお願い致します。 管理人...続きを読む 覚書。 ナビゲーションメニューなどのリンクをJavaScriptなどで構成する場合において、 検索エンジンはJavaScriptやCSSを読まないため、何らかの方法でリンクを記述しておく方法がある。 検索エンジンは＜noscript＞タグ内のテキストを認識できるため、 ＜noscript＞タグを使用し、リンクテキストを記述しておくことは重要である。 JavaScriptとCSSだけで構成されたトップページは、 検索結果にサイトの説明文が表示さ...続きを読む

  • "display: block"なリンク - CSS Dencitie

    よく、左そでにコンテンツの一覧を並べます。当サイトも例外ではありません。 当サイトはCSSを用いているのみであり、JavaScript等は用いておりません。しかし、ソースから見えるのは普通の ul と li 、それと a のみです。 このページでは、そのカラクリを簡単に紹介致します。完成型は以下の図のとおりです。 勉強する気のない人は、適当にコピーしてちゃっちゃと出ましょう。 メリット デザインにメリットというのも変な話ですが、幾つかあります。 まず、CSSそのものの利点ですが、プレーンでストリクトなHTML宜しく、ul、liとaのみですので、ソースがとても簡潔で、編集がとても楽だという点が上げられます。 また、お気付きの方もいらっしゃるでしょうが、行全体が選択範囲となっており、幾分アクセスしやすくなっております。 作ってみよう では、実際に一から作ってみましょう。 普通にHTMLを書きま

  • http://digital-nb.com/contents/css_hack.html

  • clearfixで指定するfloatの解除｜上級CSSレイアウト講座

    CSSレイアウトでfloatを使用した際、通常は親要素内にfloatする要素があり、floatに続く要素にclearを指定し回り込みを解除します。（これが基本です。）clearfixとはclearプロパティを使わずにfloatを解除する手段です。 例えば親要素内でデザイン上どうしてもfloatを解除する為のボックスを設けたくない場合などに利用します。 一部のブラウザで親要素内でfloatを解除しなかった場合に起こる現象として、親要素内に指定した背景画像が表示されない、或いは親要素の下まで表示されないなどがあります。 以下にサンプル解説します。 サンプルソースと通常指定 <div id="mainbox"> <!-- 親要素 --> <div id="box-a"> *** </div> <!-- float --> <div id="box-b"> *** </div> <!-- floa

  • display: inline-block を活用する/HTML + CSS - サイブリッジラボ

    おはようございます。昨日、iPad が予約受付始めましたね。 新卒の営業のアップル信者さんが、お昼休みにソフトバンク表参道店に行ったら行列がすごくて途中で諦めて帰ってきてました。iPad 熱すごいですね。自分も欲しいです！ さて今日はとても便利に使える CSS プロパティの、display: inline-block; について書きたいと思います。 inline-block とは？ インライン要素とブロック要素の特徴をいいところを足して２で割ったような display プロパティの値です。 ブロック要素のように幅・高さが指定でき、インライン要素のように改行されることなく同じ行内に並びます。 img, input, textarea などのような置換要素と似た振る舞いをします。 誤解を恐れずに言うと「テーブルセルっぽくつかえるブロック要素」でしょうか。 大きく特徴を書き出すと、 ボックスに対

    display: inline-block を活用する/HTML + CSS - サイブリッジラボ

  • ボックスモデルの解釈の不具合（IE）

    スタイルシートの認識の違い 一部のInternetExplorerでは、CSSの『width、height、border、paddingプロパティ』において解釈の不具合があり、ボックスの表示サイズに既知のエラーがあります。 対象は以下のブラウザです。 InternetExplorer 5.5以前のバージョン InternetExplorer 5.5以降のバージョンかつ互換モードで表示時 ブラウザの標準/互換モードの起動やDOCTYPEスイッチによるこれらの切り替えについては『ブラウザ別標準・互換モード対応表』をご覧ください。 具体的な不具合 ボックスモデルでwidth/heightプロパティを指定した場合、「width/heightプロパティは要素内容の縦横の長さを指定するもので、パディング（padding）とボーダー（border）を含まない」とCSSで定義されています。 従って、実際の

    ボックスモデルの解釈の不具合（IE）

  • ブロックレベル要素のセンタリング

    blog全盛の時代にhtmlファイルを手書きしている人はそれほど多くはないのかもしれませんが，未だに汎用エディタを用いてウェブページを作成していらっしゃる方もいるかと思います．かく言う私はもちろんエディタで直書き派でして，linux環境でemacsを用いて書いています．emacsのhtml入力補助も導入していなくて（勝手に改行されて腹が立つ），単にhtml用のカラーリングをしているだけです．他に，weexというhtml更新専用のftpソフトを用いています．このソフトはローカルのディレクトリとリモートのディレクトリ（一般にはhtmlファイルを置くディレクトリ）を同期させるソフトで，ローカルのディレクトリを変更すれば，その変更分だけリモートのディレクトリにアップデートしてくれるという優れものです．親切にもローカルディレクトリで消したファイルやディレクトリまでリモートにきっちり反映して綺麗さっぱ

  • clearfixハックは本当に必要なのか - MID [Serendipity Weblog]

    いわゆるclearfixハックネタなのですが、あるブロック内にfloatさせた要素を並べると、状況によってレイアウトが崩れるわけです。 こいつを綺麗に整えるためにはfloatさせた要素の後でclear:leftなどで一旦解除させる、というのがclearfixの原点のように思います。 最近またこの手のネタがはてブで盛り上がっているようです。 floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（ ）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 少し遡って 解決法は2つある。ひとつは、「原因」

  • CSSリファレンス(CSS入門) - とほほのWWW入門

    CSS は Cascading Style Sheets の略です。CSSは、HTMLで記述された Webページの見栄え・スタイルを効率的に定義するための技術です。HTMLで文書の意味を定義し、CSSで見栄えを定義することにより、意味と見栄えを分離することが可能となります。 最も基本的なCSSの使用例を下記に示します。この例では、<h1>～</h1> で囲まれたタイトル部が赤字で表示されます。「h1 { color: red; }」は、「h1 の部分の色(color)を赤(red)にする」という意味を持ちます。この例の「色」のような見栄えなどの情報を「スタイル」と呼びます。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSSの

  • やさしいホームページ入門　* ＨＴＭＬやＣＳＳ等の解説 *

    ※　相互リンクを申し込まれる方が多数ですが、サイトについてに書いてある通り、現在は行っていませんのでご了承ください。

  • idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About

    idとclassの違いと使い分け！スタイルシート(CSS)適用法idとclassの違いと、使い分け方法をご紹介いたします。HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。 スタイルシート(CSS)を記述する際、「特定の要素すべて」を一括して装飾するのではなく、「特定の要素のうち一部だけ」を装飾したい場合、HTMLに付加できる属性は2種類ありますね。class属性と、id属性です。この「class」と「id」を、正しく使い分けられていますか？ この「class」と「id」は、どちらでもよい方法が2種類用意されているわけではなく、明確に役割が異なります。そこで今回

    idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.