発行
ピクセルグリッドで年2回行っている開発合宿は技術力向上のために行われています。どのようなスタイルで行われているのか、合宿を成功させるための場所選びのポイントなどを解説します。
シリーズの始めに登場した「使いにくいUI」の原因を突き止めながら、少しずつ「使いやすいUI」へと作り変えていきます。まずは、選択状態がよくわからない、反応がないタブの改良から。
行頭にある画像アイコンを行の真ん中に見えるように配置するために、vertical-alignをどのように指定すればよいか考えます。万能な設定はなく、画像要素と後続テキストの大きさのバランスが重要です。
発行
UIの持つ役割に対して、デザインで可能なことは何か？ 具体的なデザイン例から、両者それぞれの役割を解説します。デザインがどのような補助を行うかで、UIは大きく変わってきます。
行の中での位置はvertical-alignプロパティによってコントロールできます。このプロパティの値によって、画像や文字がどのように配置されるのか、余白はどのように発生するのかを詳しく解説します。
Webアプリで出くわす「共同編集」の場面。複数人が同一のデータを操作するので、当然、データの衝突が起こりえます。どのようにデータをハンドリングするのか、考えてみましょう。
発行
vertical-align: topの指定で、画像の余白はなぜ消えるのでしょう？ 要素がどのようにレイアウトされていくのかinline layoutの仕様を理解すると、なぜそうなるのかがきちんと説明できるようになります。
シリーズ第1回目では、UIの機能を改めて考え、そこでデザインが果たすべき役割と重要性を整理してみます。デザインとは一般的に言われているような単なる「美的要素」を担うだけではありません。
Web Componentsに外部からHTMLを流し込めるHTML TemplatesとHTML Importsについて解説します。また、現状のWeb Componentsでの実装上の注意点や、その解決方法についても触れます。
発行
borderプロパティの書き方と、その仕様を深く掘り下げます。おそらく使ったことがない人はいないプロパティですが、指定の意味を知ると、さらにメンテナンス性のある効率のよい書き方ができます。
コマンドラインのコマンドをgulpから実行する方法、使い勝手がよいおすすめのプラグインを紹介します。また最後に、目下開発中のgulpの次期バージョン4.0.0の変更ポイントを解説します。
Custom Elementsを用いて実装した独自の要素と組み合わせることで、要素の構造を隠蔽し、その要素の外にあるCSSなどの影響を制御できるShadow DOMの仕様と実装を解説します。