これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2

【速攻レビュー】よりモバイルフレンドリーになった「Twitter Bootstrap v4」 佐川 夫美雄（Ashiras, inc.） Twitter Bootstrapバージョン4アルファ版が8月19日に公開されました。既にご存知の通りTwitter BootstrapはレスポンシブでモバイルファーストなCSSフレームワークです。さっとレスポンシブなサイトを構築するのに多くの方が利用しているのではないかと思います。この記事ではTwitter Bootstrapバージョン4の変更点について、筆者が「これは！」と思ったところをピックアップしてまとめます。 バージョン4の変更内容はGitHub上のissueで確認することができます。この中で筆者が注目している事項は LESSからSASSへの変更 アイコン（グラフィックアイコン）の削除 IE8のサポート終了とjQuery1系からjQuery2系

本記事は2015年1月に開催されたHTML5 Conferenceでお話させていただいた、 「Beyond CSS Architecture」というCSS設計のセッションをフォローアップする記事です。 本記事では、このセッションの概要と補足、またセッション中に説明できなかった点などについて書いていきます。 ※当日のセッションの動画・スライドも公開されているので、文末からご覧ください。 CSSの難しさと、昨今のCSS設計事情 この近年、CSSにおける設計論というのが話題に出てくるようになりました。筆者も拙著『Web制作者のためのCSS設計の教科書』を書いたり、各地でCSS設計をテーマとした講演をする機会が多くありました。 CSSの難しさというのは、石本氏によるCSSコードの評価についての記事にも書かれているのですが、CSSは良くも悪くも厳格なコード規約は少なく、ただ宣言的に書けばいいだけです

理解しておきたい、CSSによるインラインレイアウトの仕組み（inline-block編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第4回目、最終回です。 背景画像でリストのビュレットを配置した場合の問題 今回は、前回までの内容を踏まえ、主にインラインブロックについて見ていきます。まずは、以下のようなリストを「HTMLとCSSで作りたい」と思います。この時、リストのビュレットはオリジナルの画像にしたいです。 こんな時、背景画像を利用し、以下のような方法でこの見栄えを再現するという方は多いでしょう。筆者も昔からずっと、この方法で実装してきました。

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚

ここ数年、従来のJavaやObjective-Cでのモバイルアプリ開発以外に、HTML5を使ってモバイルアプリを開発する手法、HTML5ハイブリッドアプリ開発が注目を浴びています。この記事では、第48回HTML5とか勉強会（ハイブリッドアプリ開発最新動向）で発表した「はやわかりHTML5ハイブリッドアプリ開発事情」での内容を解説することで、HTML5モバイルアプリについての基本的な知識を簡単に紹介します。 HTML5ハイブリッドアプリとは? それでは、まずHTML5ハイブリッドアプリの構造についてご紹介します。ハイブリッドアプリではアプリの画面としてWebViewというネイティブのコンポーネントを使います。このWebViewの中でHTMLの画面を表示するモバイルアプリがハイブリッドアプリです。図で表現すると、以下の画像でハイブリッドアプリの構造を表現することができます。 なぜハイブリッドア

HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光

JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 佐川 夫美雄（Ashiras, inc.） フロント開発の現場では、Java中心の開発から、HTML、CSS、JavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。 はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLやCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTML、CSS、JavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明