タグ

htmlに関するmtbtaizoのブックマーク (9)

  • Nagomi's memo - 表示比較 / ボックス内にimg要素を配置した時の余白

    対処法へ 表示比較 ボックス内にimg要素を配置した時の余白 img要素をボックス内に配置した場合、画像下部の余白の有無に違いが生じます (margin,padding共に「0」が指定されていても)。 img要素以外でも同様の症状が生じる置換要素があります。 以下に比較のためのサンプルソースと、表示比較を記します。 親要素のタグとimg要素のタグの間に改行がない場合 サンプルソース <html> <head> <style type="text/css"> body{ margin:0; padding:0; background:url("./grid.gif") repeat; } p{ margin:0; padding:0; background-color:orange; } img{ margin:0; padding:0; } </style> </head> <body>

    mtbtaizo
    mtbtaizo 2010/11/16
    imgタグの余分なスペース
  • HTMLとXHTMLの違い

    HTMLとXHTML 1.0の違い HTMLもXHTMLも,Webページを作るための言語です。XHTML(Extensible HyperText Markup Language)は,従来のHTML(HyperText Markup Language)と,構造化された情報を表すための新しい言語XML(Extensible Markup Language)の特徴を合わせ持つものです。 HTMLは,かなりいいかげんというか,書き方に自由度がありました。たとえば,HTML 4.01では <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <title>私のホームページ</title> </head> <body> <p>工事中 </body> </html> のように書きました。この段階ですでに <

    mtbtaizo
    mtbtaizo 2010/11/08
    XHTML1.0 STRICTがベター。
  • Zen-Codingのショートカットをまとめてみました - EC studio デザインブログ

    前回の記事ではZen-Codingの導入方法について解説しました。 今回はZen-Codingの機能とそれを実行するためのショートカットの解説をします。 ※2010/02/22現在の最新バージョン「Zen Coding for Aptana v0.6.0.1」を対象にしています。 なおAptana(Eclipse)の場合だとAptanaの方の機能に多くのショートカットが割り当てられているので、利用する環境によってはショートカットを変更する必要があります。Zen-Codingのデフォルトのショートカットが機能しない場合は、記事最後にまとめる変更方法を参考にしてください。 Expand Abbreviation(省略コードの展開) Win:Ctrl+E mac:Command+E Zen-Codingの主な機能のひとつです。

  • 永久保存版!?携帯コーディング、これだけ読めばすぐできる! | KAYAC

    マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 (いつもありがとうございます!) そんなワケで、格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ! 携帯コーディングの基 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定(タグに直接style属性を追加する) 画像を含むページ容量100KB以内(HTML自体の容量は9KB以内) 画像はgifか

    mtbtaizo
    mtbtaizo 2010/09/07
    携帯用のHTMLの書き方
  • 第3回 HTMLとXHTML、HTML5 | gihyo.jp

    HTML5という新しい仕様がでてきましたが、既存のHTMLやXHTMLとはどのような関係があるのでしょうか。簡単にHTMLとXHTML歴史を振りかえりながら、両者が抱えた問題や、HTML5の目的について説明しようと思います。 HTML ― 拡張のなかで進化していった言語 HTMLはWeb上での情報交換フォーマットとして、Tim Berners-Leeにより生み出されました。「⁠シンプルなハイパーテキストを記述する」という目的があったため、定義されている要素は見出しやリスト、リンクなど、文書構造や文章の意味を記すものに限られていました。 ところが、Webが普及するにつれ、視覚表現をコントロールする要素(いわゆる「タグ⁠」⁠)がブラウザーベンダーにより追加されていき、語彙が膨れ上がってしまいました。さらには、要素の意図とは異なった使われ方をされる例(blockquoteやtableなど)が増

    第3回 HTMLとXHTML、HTML5 | gihyo.jp
  • HTMLとXHTMLの違いはなんだろう?

    HTMLとXHTMLについて HTML4.01 Hyper Text Markup Languageの頭文字を取ったもので、文書を意味付け(マークアップ)しWWW上に発信する共通言語です。HTML4.01はその最新版です。 XHTML1.0 上記のHTMLをXMLの文法に基づいて再定義したものでHTMLに比べ文法が厳密になっていています。現在では、HTMLに変わりほぼ主流となっています。 HTMLとXHTMLは同じハイパーテキストマークアップ言語であり、文法もよく似ています。そのためHTMLを知っている人なら今直ぐにでもXHTMLでWebページを作ることができます。しかし、似ているせいで「どこが違うのか・何が違うのか」があまり分かり易くありません。そこで、HTML4.01とXHTML1.0の相違点を比較します。 ソース例 ■ HTML4.01(Strict) 01: 02:<!DOCTYP

  • エンジニアのためのWebデザイン教室:ITpro

    Webプログラムを手がける企業であっても,必ずしもWebデザイナが存在しているとは限りません。プログラマが自分でデザインを適用しなくちゃならないことも少なくありません。 技術者の人と会話をすると「僕にはデザインのセンスがなくてね」という自嘲的な発言をよく耳にします。しかし,Webデザインにセンスは必ずしも不可欠ではありません。ちょっとしたポイントを学習することで,誰にでもしっかりデザインされたページが作れます。HTMLCSSによる実装を通して,デザインの基礎を学んでいきましょう。 第1回 Webデザインに必要なのはちょっとした知識と訓練 第2回 Webデザインの基礎はHTMLの構造にあり 第3回 文書を装飾するのはCSSの役目 第4回 Webデザインの基を学ぶための環境について 第5回 HTML文書を装飾するCSSの基礎(その1) 第6回 HTML文書を装飾するCSSの基礎(その2)

    エンジニアのためのWebデザイン教室:ITpro
  • MOONGIFT: » WYSIWYGなHTMLオーサリング「KompoZer」:オープンソースを毎日紹介

    個人的にAdobe GoLive(今は既にないだろうか)とDreamweaverは前者が高く、後者が安いイメージがあった。が、全く違っていたようだ。Adobe Dreamweaverは4万円以上する高価なソフトウェアに変わっていた(元々?)。 こうなると個人ではおいそれと手を出しづらくなる。最近はDivタグ+CSSでデザインする事が多くなっているとは言え、オーサリングツールはデザイナー/コーダーの人にとっては便利な存在だ。思い切ってオープンソースで代替えを探してみてはどうだろう。 今回紹介するオープンソース・ソフトウェアはKompoZer、Nvuの後継になるHTMLオーサリングソフトウェアだ。 KompoZerはその根幹がNetscape Composerにある。それもあって、レンダリングエンジンにはGeckoが使われており、表示の信頼性は高い。 また、アドオン機能やテーマ機能、JavaS

    MOONGIFT: » WYSIWYGなHTMLオーサリング「KompoZer」:オープンソースを毎日紹介
  • AptanaでWebページ作成はここまでできる!(1/3) ― @IT

    AptanaでWebページ作成はここまでできる!:どこまでできる? 無料ツールでWebサイト作成(1)(1/3 ページ) 以前、無償版のWebオーサリング(サイト作成)ツールを特集でカタログ的に紹介したが、皆さまの興味は「業務レベルでどの程度使えるのか」という部分にあるのではないだろうか? そこで、連載では各ツールを使用したサイト開発を掘り下げていこう。 まずは第1弾として、2回にわたり「Aptana」の紹介を進めていく。第1回では静的なサイト構築を想定した開発、第2回ではプラグインの追加により可能となるAdobe AIRなどの動的コンテンツ開発を中心に紹介していこう。 無料Webサイト作成ツールの最有力候補「Aptana」 EclipseベースのIDE(統合開発環境)であるAptanaは、コード補完機能やリファレンス機能など、充実度の高さが売りのオーサリングツールである。 オープンソー

    AptanaでWebページ作成はここまでできる!(1/3) ― @IT
  • 1