これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。 最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。 ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroid
画像に続けてfigcaptionをそのまま普通に表示するといまいちなことが多いです。それでも英語ならイタリック体にするとかでなんとなくその文字列がfigure要素に係っているものだということが表現できるような気がしますが、日本語の斜体はいろいろアレなので使いたくないです(よね！)。そこで画像にキャプションを綺麗に重ねる方法を模索してみました。 Demo: Smooth Caption まずは画像のHTMLです。 <figure> <a href="http://example.com/"> <img src="http://example.com/images/logo.png"> </a> <figcaption>Example.com's Logo</figcaption> </figure> このHTMLに対してどんなサイズの画像にも対応できるようにCSSを書いていきます。a要素には
HTML5の花火大会が始まりました。 JavaScriptやCSS3で書かれたコードが美しい花火となって 夏の夜空を鮮やかに彩ります。 START
Webコンテンツの企画開発を事業とする株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、以下「カヤック」 ）は、2011年7月7日、コーポレイトサイトを全面リニューアルいたしました。 近年注目が高まる、HTML5、CSS3、JavaScript、SVGの技術を使い、リッチなデザインを保ちながらも、快適な操作性の実現すること、また、リニューアル前のサイトの特徴でもあった「漫画表現」を要所に取り込み、オリジナルの世界観をつくりだすことを意図して設計しています。 企画コンセプト 1）世界一更新頻度の高い、スピーディなコーポレイトサイトを目指す TOPページを一覧するだけで、最近のカヤックの動向がわかるようニュースでTOPページを構成。リリース情報、講演情報、メディア掲載情報など、日々、リアルタイムにカヤックの最新の情報を発信します。 2）漫画表現を各所で活用して、世界に「漫画
The Internet Explorer 9 Guide for Developers provides a look at the features and improvements in Internet Explorer 9. By using this guide, web developers and designers can take full advantage of these enhancements. Developers can also experience the platform in action using the Internet Explorer Test Drive. Introduction Welcome to Windows Internet Explorer 9. As a developer, you want to know the l
HTML5のstyle要素には、scopedという属性があります。 この属性を持ったstyle要素は、フローコンテンツが期待できる場所に記述する事ができます（フローコンテンツの中って意味じゃ無いです）。 フローコンテンツには、div要素やsection要素やtable要素などがあります（詳しくはコンテンツ・モデル - HTML5タグリファレンス - HTML5.JPとか見てください）。 scoped属性を指定したstyle要素に記述されたスタイルは、ページ全体ではなく、そのstyle要素の親要素の中にあるコンテンツにのみ適用されます。 以下がサンプルコードです。 <p>example text</p> <!-- 赤くならない --> <section> <style scoped="scoped"> p { color: red; } </style> <h1>example title<
本連載では、Webデザイナーに向けて、HTML5／CSS3でWebデザインや制作手法はどう変わるのかを解説していきます。主なHTML5／CSS3の役割や機能を学んでいただくとともに、サンプル作成を通してコーディング手法を習得していただくことを目的としています。なお、サンプル作成のツールとして「HTML5 パック for Dreamweaver CS5」を使用します（詳しくは、「HTML5 Pack for Dreamweaver CS5 の使い方」をご覧ください）。HTML5 パックをインストールするには、Dreamweaver CS5のアップデータ11.0.3を適用する必要があります。 ※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。 これまでの記事では、CSS3で新たに登場する border
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: 12歳からはじめるHTML5とCSS3: TENTO: 本
