7-054

株式会社YUIDEAで働く、マークアップエンジニア時々Webディレクター。インドア派で…

7-054

株式会社YUIDEAで働く、マークアップエンジニア時々Webディレクター。インドア派で凝り性ですが、腰痛で集中力が長く保ちません。

マガジン

  • デザイン&エンジニアリング

    • 37本

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

記事一覧

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

普段ロクに読みもしないメルマガの見出しに「モダンCSS」の見出しを見かけ、気にはなっていたけどちゃんと調べたことないなーという状態だったので、調査がてら学習。 その…

7-054
3日前
6

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

以前ポストした「コーディング視点からの、ウェブアクセシビリティ対応」を基に、実際どう組んでいたか、(自分が)特に忘れやすい部分を思い出すため用のカンニングコード…

7-054
1か月前
5

納品前チェック項目のアレやコレ

最近チェックシートを見直すことがあったので「これ忘れっぽいよなー」とか「これ後回しにしがち」とか、作業している中で割と遭遇する出来事の掘り起こし。 主にソースコ…

7-054
3か月前
12

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

ウェブアクセシビリティについて、コーディングするときに実際に意識した点、体感した点を以下に覚書。 HTML構造アクセシビリティのみならずSEO的にも必ず意識する、基本…

7-054
6か月前
9

おたメシ5

スキレットを使ってアヒージョを作る。 具材コンビーフ カマンベールチーズ 長ネギ オリーブオイル 全部適量 使った道具スキレット ガスコンロ 手順長ネギを短め(…

7-054
1年前
2
使い勝手は如何ほどか?モダンCSSの所感

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

普段ロクに読みもしないメルマガの見出しに「モダンCSS」の見出しを見かけ、気にはなっていたけどちゃんと調べたことないなーという状態だったので、調査がてら学習。
その中でも、業務ですぐに出番がありそうと思われるものを数点列挙してみます。

コンテナクエリ

レスポンシブデザインにおいてブラウザなど、メディア類の横幅に応じてスタイルを当てていたのが主流でしたが、この仕様で、入れ子など要素の大きさに応じ

もっとみる
アクセシビリティ対策用カンニングコード

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

以前ポストした「コーディング視点からの、ウェブアクセシビリティ対応」を基に、実際どう組んでいたか、(自分が)特に忘れやすい部分を思い出すため用のカンニングコードをまとめてみました。

フォントの相対指定直観的に記述するなら、ベースとなるサイズ指定の時点で10px相当のサイズを指定し、rem指定で調節。

/* CSS */html { font-size: 62.5%;}/* 10px = 16

もっとみる
納品前チェック項目のアレやコレ

納品前チェック項目のアレやコレ

最近チェックシートを見直すことがあったので「これ忘れっぽいよなー」とか「これ後回しにしがち」とか、作業している中で割と遭遇する出来事の掘り起こし。

主にソースコード関連titleタグ、descriptionタグの記述内容

コーディング作業期間中はコンテンツ部分に集中しているので、それ以外の部分は「落ち着いてから」と結構後に回されがちです。
特にdescriptionは、作業途中に内容決定するこ

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

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

ウェブアクセシビリティについて、コーディングするときに実際に意識した点、体感した点を以下に覚書。

HTML構造アクセシビリティのみならずSEO的にも必ず意識する、基本中の基本要素。
デザインにもよるが、構成は以下の流れを踏襲。

header

navigation

main-contents

footer

一通りコーディングが完了したら、バリデータにかけてエラーをつぶす。

ブロックスキ

もっとみる
おたメシ5

おたメシ5

スキレットを使ってアヒージョを作る。

具材コンビーフ

カマンベールチーズ

長ネギ

オリーブオイル

全部適量

使った道具スキレット

ガスコンロ

手順長ネギを短め(1センチ程度)と長め(2センチ程度)に小口切り

スキレットに、短めに切った長ネギを中央に敷き、上にカマンベールチーズをのせる

周りに長めのネギを敷き詰める

コンビーフを隙間を埋めるように散らす

オリーブオイルをネギが

もっとみる