7-054

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

7-054

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

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

    • 37本

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

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

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

7-054

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

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

      7-054

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

        最近チェックシートを見直すことがあったので「これ忘れっぽいよなー」とか「これ後回しにしがち」とか、作業している中で割と遭遇する出来事の掘り起こし。 主にソースコード関連titleタグ、descriptionタグの記述内容 コーディング作業期間中はコンテンツ部分に集中しているので、それ以外の部分は「落ち着いてから」と結構後に回されがちです。 特にdescriptionは、作業途中に内容決定することが多々あり、コーディング難度の高いページの作業後などは、燃え尽き気味でよく忘れ

        7-054

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

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

          7-054

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

        7-054

        マガジン

        • デザイン＆エンジニアリング
          37本

        記事

          おたメシ5

          スキレットを使ってアヒージョを作る。 具材コンビーフ カマンベールチーズ 長ネギ オリーブオイル 全部適量 使った道具スキレット ガスコンロ 手順長ネギを短め（1センチ程度）と長め（2センチ程度）に小口切り スキレットに、短めに切った長ネギを中央に敷き、上にカマンベールチーズをのせる 周りに長めのネギを敷き詰める コンビーフを隙間を埋めるように散らす オリーブオイルをネギが半分浸るくらいまで入れる 長ネギがクタクタになるくらいまで煮たら完成 風味付

          7-054

          おたメシ5

          7-054