どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた | DevelopersIO
ちょっとした備忘録といったメモには Evernote を使っています。一時期に比べると使用頻度は少し落ちましたが、それでも使っています。地味なところですが、Evernote のタグ登録 UI が結構好きなのが理由の一つでもあります。 Web メールにおいては基本的に受信がメインで送信といっても殆どが返信で済んでしまっていますが、 Gmail を使っています。Gmail は非常に早いサイクルで機能や UI が刷新されまくっていますが、いつの頃から送信先、Cc、Bcc 入力のUIがまるでタグのような見た目とインタラクションになりました。この両者の UI はとても良く似ており、単純なカンマ区切りの文字列よりも視認性が高くて個人的に気に入っている UI の一つです。 そんな訳で、このタグ登録のUIコンポーネントを作ってみました。前回、jQuery UI Widget の作り方について学んだわけです
IE6～IE8でCSS3が使える「CSS3 PIE 1.0.0」登場
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. 15日(米国時間)、「CSS3 PIE」初のメジャーバージョンとなる「CSS3 PIE 1.0.0」が公開された。CSS3 PIEは、CSSレベル3に対応していないIE 6/IE 7/IE 8に対して、いくつかのCSS3プロパティをレンダリングする機能を提供するプログラム。Apache License v2およびGPL v2のデュアルライセンスのもとオープンソースで公開されている。 CSS3 PIEは、既存のCSSスタイルシートに「behavior: url(PIE.htc);」の1行を追加するだけでCSS3が利用できるようになるユーティリティツール。現在サポートされているCSS3
CSSだけで必殺技を作るコンテストのクオリティーが高すぎる件
jsdo.itで「SPEC」というコーディングコンテストを開催しています。 今回のテーマは以下の二つ。 CSSだけを使って必殺技の演出を加えてください ローディングの演出を考えてください 「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…！」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。 開催期間中ですが、ぼくが個人的に「これは！」と思った作品をピックアップして紹介したいと思います。（コンテストの審査とは関係ないですよ！） CSSだけを使って必殺技の演出を加えてください スーファミのRPG風 えい！：forked: CSSで必殺技！ - jsdo.it - share JavaScript, HTML5 and CSS 光が集まる必殺技 forked: CSSで必殺技！第2弾！ - jsdo.it - share JavaScript, HTML5 a
【レポート】Googleが薦めるWebデザイン手法/フレームワーク - Chrome+HTML5 Conference | エンタープライズ | マイコミジャーナル
グーグルおよびHTML5 Developers JPは8月21日、グーグル東京オフィスにおいてHTML5関連技術勉強会の第20回目の記念カンファレンスとなる「Chrome+HTML5 Conference」を開催した。 「Chrome+HTML5 Conference」はWebデベロッパおよびHTML5/CSS3に関して初心者～中級者クラスのマークアップエンジニア/Webデザイナを対象とした規模の大きな勉強会だ。デザイナートラックとプログラマートラックの2つのトラックが併設され、基礎から応用まで幅広く学べる内容となった。ここでは、グーグル 小久保浩大郎氏のセッション「実践CSS3デザイン」から特に興味深かった部分を紹介しよう。 Webデザインの基本 グーグル - 小久保浩大郎氏 まず小久保氏はこれまでの開発経験から、Webデザインが達成すべき3つのゴールを次のように紹介した。 アクセシブル
マピオン、スマホ向けサイトをHTML5/CSS3を採用してリニューアル | ネット | マイコミジャーナル
マピオンは8月9日、地図情報検索サービス「マピオン」のスマートフォン向けサイトをリニューアルしたことを発表した。 新しくなった地図ページでは、HTML5やCSS3の採用により、地図周辺のスポット情報の検索ワンタッチで行えるようになるなど、利便性が向上されている。 さらに、新機能としてHTML5のCanvasを使用し高速な描画を実現した「ドライブ・徒歩ルート検索」機能の提供も開始。同サービスは、出発地・目的地・経由地と検索条件を指定することにより、道のりを検索することが可能。また、GPSやWi-Fiを使い、定期的に現在地を取得するナビ機能にも対応している。 リニューアルされたマピオンのスマートフォン向けサイト 同アプリケーションの利用料は無料だが、「ドライブ・徒歩ルート検索」を利用するには、月額315円のプレミアムサービスへの登録が必要となる。 同社は今後、「ドライブ・徒歩ルート」の機能を強
PIE version 1.0 beta3
この記事は1年以上前の記事のため、内容が古い可能性があります。 いつくらいに更新されたのか正確にはわからないんですが、去年の年末あたりにPIEが更新されていたようです。 具体的な変更点はまだ調べてませんが、レイアウトの崩れがなくなった代わりに、印刷ではCSS3が表現されなくなりました。 というか、印刷プレビューを開くとスクリプトエラーが・・・（でも出ない場合もある、この差がわからない・・・）※beta4でこの問題点は改善されました。 それでもレイアウトが崩れない分、beta3の方が使えそうなので、当ブログのPIEはこちらに差し替えました。 ついでにbeta2の印刷時のレイアウト崩れがどれくらいひどかったかというと、こちら PIE version1.0 beta2の場合のサンプル PIE version1.0 beta3の場合のサンプル 上記のサンプル画面で印刷プレビューを見てみてください。
CSS3 PIEが動かない、そんなとき。 | Liglog
基本的にIEはCSS3に対応していませんが、スクリプトを追加することで角丸やボックスシャドウなどのCSS3のプロパティをいくつか使用することができるようになります。案件で、画像ではなくフォームのボタン等で角丸を実装したい場面がありまして、今回そういったスクリプトの一つであるCSS3 PIEを使用してみました。 設置方法はごくごく簡単で、PIE.htcをダウンロードしてサーバに置き、実装したいCSSの末尾にbehavior: url(PIE.htc);と書き加えるだけです。さらに詳しい説明は、下記リンク先などでご覧になれますので割愛します。 簡単に実装できるCSS3プロパティ…しかもIEにも対応できる さてさて、上記サイトにあるやり方で実装し、いざ見てみたら全然効いていない、なんてことでこのエントリにたどり着いたりしたのではないですか？ 実際僕も動かなくて困った口です。まず設置してみ
CSS3 PIE: CSS3 decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
CSS3 PIEを使ってみた – 放置演算子
機会ができたので、以前から気になっていたCSS3 PIEを使ってみた。 それほど頑張ったわけではないが、どこまでできて何ができないか、なんとなくわかったような気がするのでメモ。 CSS3 PIEとは？ IE独自拡張のbehaviorプロパティを使いPIE.htcファイル（中身はjavascript）を読み込んで、ie6,7,8でcss3の視覚効果を実現しようというものである。 対応しているプロパティは、 border-radius box-shadow border-image multiple background images linear-gradient as background image である。 opacityやtext-shadowはできない。 使い方 公式サイトよりPIE.htcをダウンロード。任意の場所に配置する。 css3のプロパティを適用したい要素のスタイルについ
FirefoxとWebKit、CSS3グラデーションの指定方法統一 | エンタープライズ | マイコミジャーナル
The WebKit Open Source Project CSS3は策定段階にあり、ブラウザ側で同じ実装が実現されている機能と、そうでない機能が混在している。それは実装をはじめた時期や経緯などにも依存している。たとえば標準化作業が進められる以前に実装された機能は、のちに標準化を目指して策定がはじまった機能とは考え方やシンタックスが大きく違っていることがある。 そうした機能のひとつにグラデーションがある。グラデーションは便利な機能だがサポートしているFirefoxとSafari/WebKitでフォーマットが違っていた。しかしCSS3の策定は進んでおり、こうした差異も徐々に統一が進められている。WebKitのブログCSS3 Gradientsにおいて、最近進められたグラデーションに関する議論と、その実装状況が報告されている。 報告によれば、CSSのワーキンググループはここ数ヵ月の間、グラデ
EPUBやCSSと日本語レイアウト、HTML5と電子書籍
EPUB や CSS と日本語レイアウト HTML5 と電子書籍 アンテナハウス 村上 真雄 @MurakamiShinyu 2010-07-14 「第８回HTML5とか勉強会」での講演資料 [HTML5プレゼンツールNerine版もあります] 村上 真雄 (@MurakamiShinyu) 自己紹介 Twitterで公開しているプロフィール： XML/HTML+XSL/CSS 自動組版ソフト Antenna House Formatter 開発者 アンテナハウス取締役 W3C会員としてXSLとCSS3仕様に関わる HTML5 IG JP共同議長 JEPA EPUB研究会員 世界標準仕様（特にHTML+CSSとその応用のEPUB）で、まともな日本語組版を可能にしたい Antenna House Formatter 1999年、当時W3Cドラフトだった XSL (Extensible Sty
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
CSS3だけでアクションを実現するフレームワーク·CSS3 Action Framework MOONGIFT
CSS3 Action FrameworkはCSS3製のオープンソース・ソフトウェア。HTML5に注目が集まっているが、同時に見逃せないのがCSS3だ。良く角丸やドロップシャドーがCSSだけでできるようになると言われているが、他にも様々な効果がCSSのみで可能になる。 CSSだけでオブジェクトの回転 これまでは同様の効果を出すためにはJavaScriptの利用が必須だった。だがこれからは簡単なアクションであればCSSだけで実現できるようになる。そのサンプルとして注目したいのがCSS3 Action Frameworkだ。 CSS3 Action FrameworkはJavaScriptを使わずCSSのみで作られている。だがマウスをオブジェクトの上に載せたり、クリックによって効果を出せるようになっている。効果はサイズの変更や回転とその組み合わせ、ドロップシャドー、さらに消失などだ。 Goog
MicrosoftがIE9披露 新JavaScriptエンジン搭載でHTML5をサポート
米Microsoftは3月15日、次期版Webブラウザ「Internet Explorer（IE）9」を自社のMIXカンファレンスで披露した。開発者向けプレビュー版もリリースした。 プレビュー版はMicrosoftのサイトからダウンロードできる。開発者にIE9の進捗を知ってもらうため、β版リリースまで8週間ごとにアップデートする（ただしMicrosoftは、プレビュー版はレンダリングやスクリプトエンジンなどプラットフォームのコア部分に軽量フレームを載せたもので、あくまでもテスト用であって日常的に使っているブラウザの代わりになるものではないと注意を促している）。IE9のデモを体験できるIE9 Test Driveサイトも設けた。 IE9の大きな特徴の1つは、Microsoft社内で「Chakra」と呼ばれる新しいJavaScriptエンジンだ。マルチコアを活用する設計になっており、JavaS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの素晴らしいアイデアが満載！2015年スタイルシートのテクニックのまとめ
制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現
短期間＋大規模ゲーム開発でも破綻しないHTML・SCSS