CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。 はじまりはじまり。 今回のテーマ:wrapperは必須? <body>以下の全てを<div>で囲み、wrapperやcontainerという名前をつけておくケースはよくあると思います。 メリットとしては、1つのセレクタでページ全体の幅や色、配置などを一括指定できる点です。 例えばこんな感じですね。 <div id="wrapper"> <div id="header"> .... </div> <div id="main"> .... </div> <div id="footer"> .... </div> </div> /* wrapperで幅、中央寄せ、背景色一括指定 */ #wrapper { width: 850px; margin: 0 auto; background:
久しぶりの更新ですね。 色々あったのですが、それは後ほど書くとして... とあるサイトを作ってたのですが、明朝体系のフォントを使用する必要があって、制作も完了してめでたしめでたし、と思ってたらとあるPCで見るとフォントがゴシック系になってるではありませんか。 特殊ではないフォントだったので油断してたのですが、PCによってはインストールされてない可能性があったみたいです。 それで一番問題だったのは、使用したいフォントと代替フォントのデフォルトのフォントサイズが違いすぎるというという点です。 対処する為にはデフォルトのフォントが入っているかどうかを判別して、ない場合はcssでフォントサイズを変えるといった処理です。 で、その時の対処方法です。 PHPSPOTさんで紹介されていた「JavaScriptでマシンに特定のフォントがインストールされているか知る方法。」で紹介されているサイトを元に以下の
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
スタイルシートをカスタマイズする際、word-break: break-all; こんな記述があることに気づくかと思います。 これはIE独自の仕様で、文字列を指定条件(幅・方法)にて折り返すという意味です。 指定方法はnormal break-all keep-all の3種類があり、意味はそれぞれ word-break: nomal; 英語などの半角英数文字列は単語の切れ目で折り返され 日本語などの全角文字列は、単語の途中でも表示範囲にて折り返す。 word-break: break-all; 文字列や言語に関係なく、設定された表示範囲で折り返す。(単語の途中でも) word-break: keep-all; 文字列や言語に関係なく、単語の切れ目で折り返す。 みんカラブログをはじめとしたブログ全般では、予め記事やコメント メニュー・リンクリストといった、テキストが書きこまれる場所の範囲が
こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか?PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト(段組レイアウト)を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 (X)HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない1つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。 ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。 それと、取り上げた記事は順不同です。 書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。 Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp ガイドラインを作成お
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ドロップダウンメニューとは?HTML+CSSだけで簡単に作る方法(2ページ目)ドロップダウンメニューとは?HTML+CSSだけでドロップダウンメニューを作る方法を解説。jQueryなどのJavaScriptは不要。リストの書き方(ul要素)を使って2階層以上のサブメニューも作れます。クリックせずにメニューを開閉できる、簡単でレスポンシブなメニューバーUIの作り方をサンプルと共にご紹介。 1-A. 2段のドロップダウンメニューのHTMLソース まずは、HTMLを書きましょう。ここではメインメニュー+サブメニューのシンプルな2段構成のメニューを作るだけなので、ul要素とli要素を使って作るリストも、2階層分だけ記述します。 ■HTMLソース: <ul class="ddmenu"> <li><a href="#">HOME</a></li> <li><a href="#">ニュース</a> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く