デザイン＆エンジニアリング

本

YUIDEAのデザイナー・エンジニアによる共同マガジンです。クリエイティブの考え方、ノウハウ、制作ストーリーなど発信していきます。

運営しているクリエイター

#コーディング

使い勝手は如何ほどか？モダンCSSの所感

普段ロクに読みもしないメルマガの見出しに「モダンCSS」の見出しを見かけ、気にはなっていたけどちゃんと調べたことないなーという状態だったので、調査がてら学習。その中でも、業務ですぐに出番がありそうと思われるものを数点列挙してみます。コンテナクエリレスポンシブデザインにおいてブラウザなど、メディア類の横幅に応じてスタイルを当てていたのが主流でしたが、この仕様で、入れ子など要素の大きさに応じてスタイルを切り替えることが可能になります。詳しくは、この共同マガジンにも投稿

知っていると便利！？お助けツール

こんにちは。YUIDEAでマークアップエンジニアをしているtanabeです。この記事を公開するのは５月中頃で、初夏と言われる季節ですが過ごしやすい気温が続いていてやたら眠くなっております。なのでお仕事を少しでも楽に進められるようなツールって重宝するよなぁ、と今更ながらに思ったので、今回の記事ではコーディングの時に知っていると便利なツールをご紹介します。レイアウトを表示させる方法を自分で考えて頑張るのも大事ですが、お仕事上でのタイムパフォーマンスを考えるのも必要です

アクセシビリティ対策用カンニングコード

以前ポストした「コーディング視点からの、ウェブアクセシビリティ対応」を基に、実際どう組んでいたか、（自分が）特に忘れやすい部分を思い出すため用のカンニングコードをまとめてみました。フォントの相対指定直観的に記述するなら、ベースとなるサイズ指定の時点で10px相当のサイズを指定し、rem指定で調節。 /* CSS */html { font-size: 62.5%;}/* 10px = 16px * 0.625 *//* 以降 10px = 1rem *//* 14px

コーディング視点からの、ウェブアクセシビリティ対応

ウェブアクセシビリティについて、コーディングするときに実際に意識した点、体感した点を以下に覚書。 HTML構造アクセシビリティのみならずSEO的にも必ず意識する、基本中の基本要素。デザインにもよるが、構成は以下の流れを踏襲。 header navigation main-contents footer 一通りコーディングが完了したら、バリデータにかけてエラーをつぶす。ブロックスキップの追加スクリーンリーダー使用するユーザー等に対して、「本文へ」といったメ