タグ

cssとhtmlに関するbayanのブックマーク (7)

  • 半角文字列の折り返し 〜HTMLの半角英数字〜

    通常、テキストは右端で折り返しされるはずですが、URL (URI) 等の連続する半角文字は一つの単語と扱われ、折り返さない場合が多い。また、折り返しの条件はブラウザ毎に異なります。 文字列折り返し ブラウザ別サンプル Firefox と IE6 (PNG画像) IE7 beta 2 日語版 (PNG画像) Opera と Safari (PNG画像) テキスト。実際(現在)の表示 mozilla系以外のブラウザの多くは、URL (URI) 等の連続する半角文字でも、ハイフン「-」等の一部の半角記号を区切りと認識し折り返しするようです。 CSSのword-break:break-all;、word-break:keep-all;はIE独自の仕様なので、IE以外では通常通りの挙動。つまりCSSによる折り返しはされない。Safari,Operaのサンプルでは、半角文字が折り返しさ

    bayan
    bayan 2010/03/17
  • ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト

    ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ

    bayan
    bayan 2007/11/29
  • CSS と JavaScript でタブ切り替え

    CSSJavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。 「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。 全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。 そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに

  • kowaza・css | 広島のホームページ制作会社 株式会社フムフム | ホームページ制作事業部

    このホームページは、株式会社フムフムのホームページ制作に特化したのプロモーションWebサイトです。 株式会社フムフムのコーポレートサイトはこちらから。ホームページ制作に約20年携わり多くの成功と、多くの失敗を見てきました。ホームページから始まり、SNSなどのサービス、オウンドメディア、自社スマホアプリと時代は大きく様変わりしています。ただホームページを所有することをそろそろやめて、目的をもったホームページ制作やプロモーション、マーケティングをおこないませんか? 会社のホームページ立ち上げや、今あるホームページの運営に悩む皆さまに、弊社スタッフがアイデアをもってホームページ運営・制作のご提案をさせていただきます。 ©2021 HUMHUM inc. 株式会社フムフム ホームページ制作事業部 広島市西区楠木町1-10-24 第二奥田ビル1階 T. 082 961 3831 F. 082 961

    kowaza・css | 広島のホームページ制作会社 株式会社フムフム | ホームページ制作事業部
    bayan
    bayan 2007/10/19
    writing-mode
  • css Zen Garden: The Beauty in CSS Design

    A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. Download the example html file and css file The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers. We must clear the mind of the past. Web enlightenment

  • CSS段組1:スタイルシートだけで段組を作る方法 - [ホームページ作成] All About

    CSSのfloatとclearで簡単に段組レイアウトを作る方法CSSで段組レイアウトを作る簡単な方法を解説。各段をdiv要素などのボックスで作るだけのシンプルなHTMLに、CSSのfloatとclearプロパティを適用するだけで段組レイアウトが作れます。HTMLCSSをどう書けば段組になるのかの基から、2段組や3段組の作り方、回り込み解除の便利な書き方(clearfix)まで、図とサンプルソースを使って説明しています。

    CSS段組1:スタイルシートだけで段組を作る方法 - [ホームページ作成] All About
    bayan
    bayan 2007/07/05
    float
  • 初心者のためのホームページ作り-Web for beginner ホームページ作成支援

    Lecture for beginner ■ HTML基礎講座 HTML4.01の概略 / HTML制作の準備 WEBとHTML / Webの作法 / HTMLの作成 論理構造 / 要素の親子関係 / ヘッダ情報 見出し / 段落 / リンク / フォント ボックスの概念 / 色の作法 / 画像の扱い リストの作成 / テーブルの作成 / 配置 フレーム / フォーム / 動画コンテンツ イメージマップ / スタイルシートの概念 Webページのタブー ■ HTML応用編 HTML4.01 / ヘッダ情報 / CSS応用 テキスト / アンカー / 文字実体参照 色の基礎知識 / FTPファイル転送 枠線表示の応用 / アクセシビリティ Lecture for senior ■ 初めてのXHTML講座 XHTML基礎講座 / XHTML概要 / XHTML XHTML DTD / HTM

  • 1