タグ

htmlとcssに関するjjzakのブックマーク (32)

  • duree dpe

    Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par

  • CSS基礎文法最速マスター

    最近ネット界隈で流行中の「基礎文法最速マスター」シリーズ。 Parlから始まったこのシリーズですが、いまやPHPRubyをはじめ、JavaScriptからVBA、果てはjQueryに至るまで、かなりの数の言語が「基礎文法最速マスター」シリーズ化されています。 そこでワタクシもどーにか便乗してやろーと画策しまして、得意分野のCSSについてまとめてみたいと思います。 まぁCSSはプログラム言語とは呼びませんが、プログラマさんなんかは結構苦手意識のある方も多いようなので、ちょっとでも参考になればと思いますー。 CSSの基礎 CSSとは 一言で言えば、(X)HTMLでマークアップされたページの見栄えをコントロールするためのものです。 CSSを使う事で、(X)HTML側ではページの内容や構造だけの記述に留める事が出来るので、検索エンジンにも優しく、デザインの変更も容易になる(と言われてますが、実際

    CSS基礎文法最速マスター
  • ごく簡単なHTMLの説明

    HTML来簡単で便利なものです。「30分間HTML入門」で基は十分。まずシンプルに自分の情報を表現してみてください。 You can write a document as simple as you like. In many ways, the simpler the better. -- Tim Berners-Lee 簡単なHTMLの説明 少し詳しいHTMLの説明 XHTMLから次世代ウェブへ 電子テキストで情報発信 簡単なHTMLの説明 だんだん説明の量が増えてきたので、コンパクトな入門ページを用意しました。 基がきちんと分かる30分間(X)HTML入門 HTMLを使った人間・コンピュータ双方にわかりやすい表現 (スライドのHTML版) 何のためのHTMLHTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束です。そこを正

  • アクセシビリティ CSS レイアウト

    ホームページ作成に使えるCSSレイアウトサンプル 最近よく使われるCSSレイアウトテクニックをいくつか集めてみました。 CSS2の規格に忠実に準拠したブラウザが増えてきていますので、CSSレイアウトもこれからはあまり ブラウザの違いやバージョンの違いを意識しなくてすむように徐々になってくるかと思われます。 [例1] ULタグをボタン風の横型メニューとして表示する方法 [例2] 1枚の画像を使ってボタン風の横型メニューを作成する [例3] 文字のサイズを変更してもデザインが崩れないタブメニューを作成する方法 [例4] テーブルを使わないで角丸ボックスを作成する [例5] テーブルを使わないで角丸ボックスを作成する (その2) [例1] ULタグをボタン風の横型メニューとして表示する方法 メニューにULタグを使用するとCSSを切られた場合でもリストとして 表示されるのでアクセシビリティにもよい

    jjzak
    jjzak 2010/08/24
    メニュー項目をタブレイアウトに
  • ホームページ作成 タブメニューの作り方(1) - WEBサイト作成 フリー素材コード の1uphp.com スタイルシート,htmlやFirefox,Operaなどのブラウザの表示結果まで。

    【概要】 選択されているタブの色が濃く、選択されていない方は薄い色を指定。 選択中の色■(#ff3333) ←→ 選択外の色■(#ffcccc) (その他のパターンの一覧はタブメニューのいろいろ(一覧)で見れます。) 【重要】 『タブ』の色と同色の帯びを、その直下に設置する事が重要です。 これは、2色の場合でも、複数色でも、画像を使用する場合でも共通に重要な事です。 (『現在訪問しているページが、メニューのどこと一致しているか。』を表現する為です。) 現在訪問しているページ自体のリンクは選択できない様にするのが一般的ですが、リンク自体の<a href="リンク先">~</a>を完全に取ってしまうと、スタイルシートを外した場合や、テキストブラウザなどでリンク部分が不明になってしまいますので、『マウスオーバー』時に『何も変化ない状態』が良いと思われます。

  • MdN Design|総合情報サイト

    的なWeb制作技術はあっても、「整理されていない」、「やぼったい」、「平凡でつまらない」、「メリハリがない」などといった難題に直面してしまったことはないだろうか。そこで特集は、Webデザインでつまずきやすい部分を、CSSで解決する実践的なアイデアを紹介する。また、ひと目でわかる「問題の危険度」も掲載。ここで紹介する多彩なテクニックを身につけて、Web表現の幅を広げよう!

    MdN Design|総合情報サイト
  • よりよいWebデザインにするための配色のセオリー :: Love & Design ::

    第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色(黄⇔青 赤⇔緑)の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。(色相対比)

    よりよいWebデザインにするための配色のセオリー :: Love & Design ::
  • ウェブリブログ:サービスは終了しました。

    「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧

    ウェブリブログ:サービスは終了しました。
  • スタイルシートによる崩れない 2カラム 3カラム・レイアウト

    このウェブサイトは販売用です! desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています!

    jjzak
    jjzak 2007/08/03
    CSSによる崩れない段組
  • CSSのセレクタをXPathに変換する - nazokingのブログ

    Warning! 2008/5/22追記:このエントリは情報が不十分だったり間違いが含まれてたりするので、下記URLのページを参考にするようにしてください↓ http://piro.sakura.ne.jp/latest/blosxom/mozilla/xul/2007-09-13_selector-to-xpath.htm CSS3あたりをXPath1.0あたりに変換する表 CSSXPath .class//*[@class="class"]*1 .class//*[contains(concat(" ",@class," ")," class ")]*2 tag//tag #id//*[@id="id"] tag.class#id//tag[@class="class"][@id="id"] .class.class2//*[contains(concat(" ",@class," "

    CSSのセレクタをXPathに変換する - nazokingのブログ
  • CSSによる段組(マルチカラム)レイアウト講座

    サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

  • 角丸テーブル簡単作成ツール

    角の丸いテーブルの作成ツール。 画像あり、画像なしのパターンを選択でき、 角のデザインなども自由にカスタマイズできます。 [ 画像あり版 - 画像なし版 ]

  • Academic HTML―HTML, XHTML and CSS Tutorials

    Academic HTML へようこそ。Academic HTML では,HTML・XHTMLCSS を中心に,WWW ページ作成のチュートリアルを提供します。 Hints of fonts on the web を増補しました。(2009/06/06) Orientation to CSS,Toward Accessible WWW,Academic HTML 3.2 紹介ページ を復旧し,再公開しました。(2007/10/08) Passport to XHTML 1.0,More about HTML を復旧し,再公開しました。(2007/10/07) Soar through HTML を復旧し,再公開しました。(2007/09/24) Yes, we love HTML,Always with HTML を復旧し,再公開しました。(2007/09/23) Take off

  • using CSS1 with HTML

    PR:日留學情報網 taiwan2japan 從台灣向日 2003年3月23日 ISBN4-7741-0622-4 C3055、1980円+税、技術評論社。1998年。 拙著[スタイルシートWebデザイン]の元データ。以下の条件で利用・活用してください。 そのまえに説明がきを。 ●なぜ公開するか 出版から5年たってほとぼりが冷めたため。無事に絶版になりましたし。 ●心残りメモ 私は担当編集者に次のようにお願いを出した。 紹介するCSSデザイン例は、わたしが考えると貧困だから、 プロのブックデザイナーが起こしたものを(画像要素つきで) 私にくれないだろか。CSSへの翻訳は私が行います。 基礎部分の説明図版は、仮原案として私が描くので、 それをプロが起こしなおしてくださらないか。 結果はどちらもNGだった。 紙面には私が考えたつたないデザインサンプルが掲載され、 また私が作った図がそのまま

    jjzak
    jjzak 2006/11/06
  • スタイルシートでマルチカラム・デザインを実現する方法

    スタイルシートでマルチカラム・デザインを実現する方法 TABLE要素の弊害 Webページで、左に見出しがあってその横に文があるようなデザイン(ここでは「マルチカラム・デザイン」と呼ぶことにします。下図参照)を実現しようとすると、現在最も一般的に行われている方法はTABLE要素を用いることです。数あるWebページやHTMLエディタの中には、すべてのデザインをTABLE要素を用いて行うものもあります。 図: マルチカラム・デザインの例 しかし、TABLE要素は来「表」のためのもので、レイアウトのための要素ではありません。また、レイアウトにTABLE要素を用いると以下のような弊害が生まれます: ページが表示されるまでに時間がかかる TABLEに対応していないブラウザでは何も表示されない 複雑なレイアウトを実現できず、画像を用いてその点を補完することになり、制作とメンテナンスにかかる手間と時間

  • tableを使用しない段組CSSによるマルチカラムデザインについての考察

    HTML文書の記述。 <div id="original"> 〜 </div> <div id="critical"> 〜 </div> <div class="status"> 〜 </div> CSSの記述。 div#original { float:left; width:50%; } div#critical { float:left; width:50%; } div.status { clear:left; } http://members.jcom.home.ne.jp/w3c/MediaMix/tntstyle.css float ブロック要素を左に順次floatさせる事で、疑似的に「段組」を表現する。 Navigator 4.x Navigator 4.xでは#fooをfloatさせないとダメ。 float:left;するセレクタをdiv#fooとすると、Navigato

  • 精密数控压装机,精密轴承压装机厂家-新乡胜性计算机应用科技有限公司

    地址:广东阳江阳东县名仕花园300号 电话:001-89612629 传真:001-89612629 邮箱:722114493@300.com 4、精密机精密机厂双辊上下双排杂专利(杂质排除大化棉胎整洁) 数控120008096精武鸭脖加盟费多少?精武鸭脖怎么做?在哪里学,压装压装厨代教您技术 厨代教您技术,轴承精武鸭脖味道,可电话了解【】武汉厨代鸭脖是武汉有名的小吃,精密机精密机厂源于武汉市汉口的精武路。鸭脖是将川味卤法改进后用在鸭脖上,精密机精密机厂具有四川麻辣风格,香味扑鼻,口感刺激,鲜美无比的特点,所以很快成为了武汉人喜爱的名小吃,仅在精武路一带就有十几家店。如今,鸭脖在全国各地随处可见,并且形成一些新的流派。正宗武汉鸭脖,谨防假冒!!数控培训详情: 压装压装培训内容 ★辣鸭脖 ★鸭头 ★鸭翅 ★鸭舌 ★鸭肠 ★鸭胗 ★鸭掌 ★鸭锁骨 ★半边鸭 ★鸭心 ★鸭肝 ★鸭架 ★海带

    jjzak
    jjzak 2006/11/06
  • floatは「回り込み」ではない:てんぽ

    てんぽ: floatは「回り込み」ではない CSSHTML、FC2ブログのカスタマイズ、共有テンプレートなど 「CSSのfloatプロパティは『回り込み』させるものである」とよく説明されますが、それは特定条件下での表示結果がそのように見えるだけであって、あまり正確ではありません。 「回り込み」という表現はfloatを使いこなすうえで、語弊になっていると思います。 floatとは、通常の流れ(normal flow)から取り除き、左(または右)に寄せるです。 floatは「回り込み」ではない <p> <img src="xxx.jpg" alt="floating image"> 「回り込む」テキスト </p> このときimg要素を左にフロートさせた(float:left)なら、後続するテキストはimgの右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素を

  • スタイルシートによる崩れない 2カラム 3カラム・レイアウト

    このウェブサイトは販売用です! desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています!

  • Lucky bag: : blog: CSS デザインギャラリー

    世の中には (X)HTML + CSS の素ん晴らしいデザインでレイアウトされている方なんつうのはそりゃ沢山いるわけで、そんなサイトを集めたデザインギャラリー(ショーケース)サイトってのを見ていると、おいおいフォトショップ腕自慢かよって感もあるけど、結構インスパイアされたりされなかったり。そんな CSS デザインギャラリーサイトで自分が知っているものをちょっとまとめてみた。(ちなみに順不同) CSS Vault » The Web's CSS Site CSS Beauty | CSS Design Showcase Unmatched Style | CSS Design Gallery and Design Inspiration. CSS Drive css thesis: sites, that's all. » screenspire.com | the leading full