HTMLを15年書いてる僕が語ってみる vol.1 - Qiita
僕はHTMLを書き始めて約15年。割と年齢は若い方で、いわゆる「ベテラン」という感じではないのですが、 長く付き合ってきたこの言語について、最近思うことが多いので語らせてください。 元W3Cメンバーとして考えていたことなので、 マークアップエンジニア、フロントエンドエンジニアには刺さるかもしれません。 以下が今回のお話です。 語りたいこと HTMLの変遷 HTMLってそもそも何 僕が書いた15年間 1. HTMLの変遷 1-1. 僕のマークアップの始まり 約15年前、僕は自分が産まれる前にできたファミコンのスーパーマリオブラザーズが大好きで、 なんとなく勢いで「ホームページ」を作ってみました。 母親がドリームキャストでホームページを作っていたので、「あ、なんかできそう」みたいな感覚で。 1-2. テーブルレイアウト 当時はHTMLが主に大文字で書かれていて、ほとんどがtable要素でマーク
「blinkタグ」の開発者が明かすテキスト点滅タグが生まれた知られざる理由とは？
By Steven Martin 「blinkタグ」とはテキストを点滅させる効果を持つHTMLコマンドの1つで、多くの人々に最も嫌われるタグの1つとして知られています。Netscape Navigator 2.0に独自に実装されていたものですが、IEはもともとサポートしておらず、2013年にFifefoxがblinkタグのサポート廃止したこともあり、近頃は見かけることもなくなっています。そんなBlinkタグの発明者自らが、「なぜblinkタグを開発したのか？」というおもしろおかしな開発秘話を語っています。 the origin of the tag - www http://www.montulli.org/theoriginofthe%3Cblink%3Etag 1994年当時、ルーさんはNetscapeを設立したエンジニアの１人であり、現在のポピュラーなブラウザの先駆けとなったテキスト
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました！ | HTML5でサイトをつくろう
【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました！ ウェブ・ページのフォームではテキスト入力フィールドやチェックボックスなどのユーザーインターフェースを使用しますが、HTML5ではユーザーインターフェースがさらに追加されたことで注目されています。 特にinput要素ではさまざまなtype属性が追加されました。今回は新たに追加されたtype属性をソースをみながら表示を確認していきたいと思います。 HTML5でinput要素に追加されたtype属性 下記に各属性ごとの特徴をピックアップし、現状で対応しているブラウザの画面キャプチャを掲載しました。だだし、現状(※2011年9月)の対応状況になります。 search 『type=”search”』の主な特徴 1行テキストの入力フィールドで表示され検索向けであることを表します。 input要素の
HTML5、これからは「HTML」へ変更? | エンタープライズ | マイコミジャーナル
A vocabulary and associated APIs for HTML and XHTML HTML5という名称が使われずに、かわりに「HTML」が使われる可能性が出てきている。WHATWGブログのHTML is the new HTML5にその説明がある。今後WHATWGはHTML5のようにバージョン番号を指定した開発モデルを破棄し、最新版を示す言葉として「HTML」のみを使用するという。この方針がほかのコミュニティやユーザにも浸透するのであれば、現在策定が進められているHTML5を指し示す意味としてHTMLが使われることになる。 HTML5は現在ラストコールへ向けて作業が進められている状況にある。当初の計画によれば仕様の策定は2011年には終了させ、2012年にはHTML5が公開されることになる。しかし実際のところ、HTML5に求められる新機能に関する動きはその流れに留まる
divタグが多用されている経済産業省のページのdivタグを可視化してみた - Pastalablog in はてな
はてなブックマークとかで盛り上がってたのを見て、せっかくなので、divにborderかけてみたらすごいことになった。 話題なのはこのページ 経済産業省 会見・スピーチ 大臣記者会見 ページ自体は古め*1 divの数は下のコードで数えたらページ全体で309個あった。 検証方法 firebugにjQuery検証機能を付けるFireQueryというのを使ってjQueryで適当に以下のコードを実行した。 var c=new Array("red","yello","blue","green","black","pink"); $("div").each(function(i){ $(this).attr("style",("border:1px solid "+c[i%6])) }) 結果 こんなHTMLどうやって作ったんだろうか。 もし手打ちなら根気の居る作業だったんだろうなぁと思いました。 追
ユーザーが簡単にHTMLを入力できるWYSIWYGエディタ ベスト3 - リート開発者ブログ
こんにちは。リートの satoshi です。 前回の投稿より、少し時間が空いてしまいましたが、今回はWYSIWYGエディタについてご紹介したいと思います。 WYSIWYGエディタって WYSIWYGエディタというのは、ブログ記事を書くときにフォントサイズを大きくしたり、見出しや色を変更したり…といったことをボタン一つで簡単に操作ができるとても便利な機能です。 今回はその中でも使えるエディタベスト3をご紹介します！ WYSIWYGエディタベスト3 私が選んだのは TinyMCE, CKEditor, NicEdit の3つです。3つともデザインはもちろんのこと、使い勝手がとても良かったです。 それでは3つのエディタについて詳しく紹介していきます。 TinyMCE TinyMCE は社内や個人的な利用用途では制限無く使えるエディターです。商用利用の場合は、$345 から利用出来ます。こちらは、
?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clockmaker+%28ClockMaker+Blog%29
アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議が現実味を帯びて論じられるようになりました。 「なぜAppleはiPadにFlashを載せるべきではない」のか AdobeのCTO、Kevin LynchがFlashを擁護―「HTML5はウェブビデオを暗黒時代に投げ戻す」 そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。 (上の画像はクリックで拡大できます) 左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理、デバイス機能ではまだ Fl
alt属性の使い方が厳密に規定されたHTML5のimg要素
HTML5では、新要素が追加されただけではなく、HTML4からある既存の要素についても、再定義しているのが特徴です。その中でも、img要素は、他の要素に比べても、すごい力の入れようで、定義されています。 特筆すべき点として、alt属性が挙げられます。 HTML4のimg要素の仕様では、alt属性は、イメージをレンダリングできないブラウザーの場合に表示する代替テキストとして使われ、イメージの簡単な説明を入れる、という程度にしか、定義されていませんでした。そして、もし詳細な説明を入れたい場合は、オプションで、longdesc属性を使うこととなっていました。これまでは、アクセシビリティの観点から、alt属性の使い方についてガイドラインや、業界のコンセンサスはありましたが、HTML準拠要件という形では存在していませんでした。 ところが、現時点でのHTML5のimg要素の仕様では、longdesc属
tableレイアウトとdivレイアウト…どっちも地獄? | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Geir Wavik氏がSmashing MagazineにおいてTable Layouts vs. Div Layouts: From Hell to… Hell?においてtable要素とdiv要素、それにCSSに関する興味深い内容をまとめている。WebデザイナやWebデベロッパは一度チェックしておきたい内容だ。タイトルが示しているとおり、table問題からもしかしたらdiv問題に移行してしまっていないか、という内容になっている。 Webページの作成にtable要素を使わずに、かわりにdiv要素とCSSを使った方がいいという指摘はだいぶ以前から登場している。table要素で構築されたHTML/XHTM
画像などのファイルへの直リンクを禁止する方法
.htaccessを使用して、他のサイトが画像などのファイルを無許可で使用するのを禁止する方法をThe Web Squeezeから紹介します。 Stop Image Hotlinking with .htaccess 「.htaccess」に、下記を記述します。 ※必要の無い箇所は、削除・修正して使用してください。 ※「.htaccess」を修正する場合は、必ずバックアップをしてください。 ※有効範囲は、設置ディレクトリの配下です。 <textarea name="code" class="html" cols="60" rows="5"> #Stop Image Hotlinking RewriteEngine on RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC] RewriteCond %{HTT
【ハウツー】FirebugにHTML/CSSリファレンスをアドオン! - FireScope (1) あのプロパティの使い方なんだっけ? これからはFireScopeで一発! | エンタープライズ | マイコミジャーナル
あのプロパティの使い方なんだっけ? これからはFireScopeで一発! SitePoint.comは1月27日(米国時間)、Firebug上で動作するアドオン「FireScope v1.0.1」をリリースした。FireScopeはFirefox2-3のFirebug1.2以降で動作するアドオン。各種HTMLエレメントやCSSプロパティといった要素のリファレンスと各種ブラウザの対応状況、サンプルコードを表示してくれるアドオンだ。SitePointが公開している各種HTML, CSSリファレンスの一部をまとめた内容となっている。 主な機能は次のとおり。 HTML Elements Reference HTML Attributes Reference CSS Properties Reference サンプルコード リファレンス内検索 W3C勧告に準拠しているかどうか 各種ブラウザ対応状況(
はてなダイアリーがmarqueeとblinkに対応したので、愛生会病院してみた。 - 新しいTERRAZINE
今回の機能追加に伴い、はてなダイアリー利用可能タグにmarqueeタグとblinkタグを追加しました。 最近携帯電話でよく利用されているデコメに対応したことにより、はてなダイアリーの表現力がより向上しました。普段とは趣を変えた日記の作成に、どうぞご利用ください。 はてなダイアリーがデコメの投稿に対応しました - はてなダイアリー日記 普段とは趣を変えた、表現力豊かな日記に挑戦してみました。どうぞご覧ください。 （閲覧注意） 推奨する Browser は Microsoft Internet Explore（Ver 6.0）で、全画面表示とするのが至適の様です。Home Page を Microsoft FrontPage で作成しました。その関係で、Netscape とは相性が悪く Version によっては全く受け付けないモノもある様です。同最新版（Ver 6.2）でも、「スクロール文字
直リンクを防ぐには？…禁止と言っても無駄 [ホームページ作成] All About
直リンクを防ぐには？…禁止と言っても無駄画像ファイルなどへの直リンク(外部サイトからの直接参照)や、特定ページへのディープリンクを防ぎたい場合に、「禁止します」と宣言しても意味がありません。どうしてもリンクを阻止したい場合は、技術的にアクセス制限を施すしかありません。リンクを技術的に防ぐ(リンクされてもForbiddenエラーを表示する)方法をご紹介。 直リンク禁止、ディープリンク禁止、無断リンク禁止、と言っても無駄 「直リンクは禁止します」・「ディープリンクはしないで」・「無断リンク厳禁」などと表記しているウェブサイトを見かけることがあります。禁止しようと思うことは自由ですが、「禁止します」と宣言しただけでは効果はありません。誰でも自由にリンクできるのがウェブの仕様ですから、「リンクは禁止します」と言ったところで強制力はないからです。どうしてもリンクを禁止したい場合には、技術的な手段でア
![直リンクを防ぐには？…禁止と言っても無駄 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/05201772d5f5c34a6ad488695fdd47de97765868/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F1%2F5%2F201610242253%2Ftopimg_original.jpg)
続・FireFoxのテキスト自動改行 - Affamative Way
昨日の続き ちょっと調べたらそっこーで公式見解が見つかった。 Firefox 3 の修正内容のご紹介 その3 — URLも改行されるように | Mozilla Japan ブログ とにかく意図しない場所での改行が発生しないように、極力制限をかけている仕様になっています。これは、単純に文字だけを見て改行するかどうかを決定すると、日付の書式や、時間の書式等まで改行してしまったりすると、Web ページの内容自体を壊しかねないためです (日本語以外の言語圏では単語の途中で改行するという発想自体があまりないことの方が多いことに注意してください)。将来のバージョンではより改行の発生パターンは制限されるかもしれませんが、これ以上、改行可能位置が増えることはないと考えて頂いて良いと思います。 ﾏｼﾞｯｽｶ。。。増えないんすか。。 そして、この修正が完了した今、Web デザイナの方々にひとつお願いしたいこと
Mozilla Re-Mix: webページ上で選択部分のHTMLソースをその場で編集することができるFirefoxアドオン「SourceEditor」
FirefoxやThunderbirdはWEBユーザーの必須アイテム。 初心者からヘビーユーザーまで使える！便利でクールなFirefox拡張機能（アドオン）の使い方やカスタマイズ、Mozilla関連情報をどうぞ。 Adobe 「Flash Player」を緊急アップデート。 by hoge (07/16) Adobe 「Flash Player」を緊急アップデート。 by H.I. (07/16) ウェブページから余計なコンテンツを排除して読みやすく表示できるFirefoxアドオン「Tranquility Reader」 by しんちゃん (07/11) YouTubeのHTML5動画に表示される広告をブロックしてくれるFirefoxアドオン「YouTube Advertisement Blocker」 by はち (06/17) ウェブページ上の不要なリンクを非表示にできるFirefox
Firefox 3.1で強化されるHTML 5対応--Canvas Text APIを検証 - builder by ZDNet Japan
全世界22万以上の企業・組織で採用 DX時代の顧客価値創出に大きな役割を担う CI/CD環境の現実解を紐解く リモートワークを成功させる方法 必須となるセキュリティをどう強化するか 必要な対策5つを紹介 AWSとAzureを更に使いこなそう イマドキのマルチクラウドセキュリティを MS担当者が徹底解説 現場主導のデジタル変革 ビジネス変革のための“ITの民主化” そして 変わるIT部門の役割 Kubernetes活用の最適解とは？ 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 コマース広告の大変動 プライバシー保護とパーソナライズの狭間で マーケティングの効果を最大化するためには A Business New Era あらゆるモノ・コトが変化している今 デジタルでビジネスは生まれ変わる サステナビリティの今と未来 企業戦略としてのサスティナビリティ推
HTML 5では「article」タグでページの「本文」が取れる - モジログ
次世代HTMLの「HTML 5」について、そのウワサは以前から耳にしながらも、中身については知らなかった。 仕様や解説記事（末尾にまとめた）をいくつか流し読みしてみて、驚いた。これこそ、私の求めていたものだ。 私は以前より、Webページの「本文」がどこからどこまでなのか、ソフトウェアで判定できる標準的な方法があればいいとずっと思っていた（「フィードをアイテム単位に区切れば、セマンティック・ウェブが一気に現実化する」）。HTML 5では、いくつか導入される新しい要素（タグ）の中に「article」というものがあり、これがまさに「記事」の範囲を示すものなのだ。 これさえあれば、プログラム的にWebページを取得して、その「article」タグの部分だけ抽出すれば「本文」になる。あらゆるWebページにこの「article」タグが入ってくれば、もうフィードに頼る必要もなく、どんなページの「本文」でも
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web ページを高速化する
