refirio.org

情報デザインとコーディング

■情報デザインの基本 以下を常に意識する。（HTMLコーディングを何度かしてもらってから、の方が実体験が伴っていいかもしれない。） ・情報はグループ化する。 ・揃えるところは揃える。 ・余白を意識する。 ・原色は基本的に使わない。 ・見出しは大きく太字に、本文は見出しよりは小さく。など。 ・行間は詰めすぎない。 伝わるデザイン｜研究発表のユニバーサルデザイン https://tsutawarudesign.com/ 以下はスライド資料の作り方に関するものだが、デザインの基本として参考になる。 伝わりやすいスライド資料の作り方。資料作成の流れからデザインのコツ、初心者さんにおすすめの本まで紹介｜fuyuna blog｜デザインとライフスタイル、キャリアをアップデートし続けるデザイナーのブログ https://fuyuna.net/making-slide-document 以下についても意識する。 ・企業ロゴの取扱いは慎重に。 歪めたり色を変えたりはNG。最小サイズや周囲に置いていい色が指定されているなど、諸々のルールが決められている場合もある。 ・トンマナを意識する。 何かしらパーツを作成するときなど、他ページを参考にしてトーン＆マナーを合わせる。 トンマナの意味とは？トンマナを作成する方法や事例を分かりやすく解説 | 株式会社パンタグラフ https://pantograph.co.jp/blog/uiux/tone-manner.html 以下も具体例として参考にできそう。 なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita https://qiita.com/mskmiki/items/544149987475719e417b ただし案件によってはAさんの画面が求められる可能性もあるので、同意を取りつつ進めるのは必須。 今回のAさんBさんの比較は、ターゲットが異なるシステムを無理矢理比較しているとは言えるのは注意。 （今回の場合は「フィットネストレーナーが使うアプリ」とあるので、Bさんデザインの方が好ましいとは思う。） デザインはアートと異なり、「誰が何のために提供したい内容なのか」が重要となる。 また特に業務システムでは、Bさん手順の「まずはどう使われるかをじっくり考える」がとても難しい。 誰も全体像を把握していないこともあるので、最適化したつもりが必要な項目を削ってしまう可能性はある。 ■HTMLコーディング ・書籍をもとに基本的なコーディングを習得。 ・課題をこなして実践に備える。 ・下層ページのコーディングを何度かこなしてもらう。 ・ある程度できるようになったら、トップページのコーディングも含めて対応してもらう。 とするか。 以下は練習に良さそう。 最初は「【入門編】ウォーミングアップ用の模写サイト」を進めるのがいいか。 ただしHTMLの基本が解った上での内容なので、それは別途書籍などで学んでおく必要がある。 「【中級編?】少し複雑な2カラムの模写サイト」をすんなり組めるなら、ちょっとした仕事はできるかもしれない。 これを、ページ自体は渡さずに素材だけ渡して。 ・1枚画像からコーディングしてみてください。 ・作業時間も意識して「これくらいのページなら〇時間でできます」を言えるようにしてください。 とするのがいいか。 【模写コーディング】おすすめの練習サイト【入門編〜上級編】 | Codestep（コードステップ） https://code-step.com/coding-recommend/ 以下も練習に良さそう。 上記ページよりも難易度は高そう。 無料コーディング練習所 https://webdesigner-go.com/coding-practice/ ■＋αのHTML, CSS, JavaScriptコーディング。 http://refirio.org/memos/study/20170210_html_css_javascript/slide/ 追加メモ。 ・テキストが増えたとき、減ったとき、無いときのデザインが判るように。 ・要素が増えたとき、減ったとき、無いときのデザインが判るように。 ・状態が複数あるときのデザインが判るように。 ・下層ページの場合、p ul li table form など、基本的な要素はひととおり定義済みになっているとありがたい。 どんな順番で追加してもレイアウトが破綻しないとありがたい。後付ではなく、最初に考慮されているとスムーズ。 つまり、汎用的な下層ページが作れるものだといい。 ・フォームを組み込むときはformタグも書く。（formタグなしにinputタグなどが配置されていることがある。） フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note https://note.mu/pittan/n/n5789d09c5575 ■BEM（Block Element Modifier・ベム）による命名規則 【命名規則】BEMを使った書き方についてまとめてみた【CSS】 - Qiita https://qiita.com/takahirocook/items/01fd723b934e3b38cbbc なぜBEMはアンダースコア__、またはハイフン--と2個必要なのか│Design Note https://desnote.com/block__element-modifier/ SASS(SCSS)とBEMのお話 - Qiita https://qiita.com/pe-ta/items/67d0e3a72f30e9dda59c BEMとSassの「&__Element」記法を使わない派に転向した理由 | oshin.tokyo https://oshin.tokyo/entry/2020-bem-ampersand ■HTMLコーディングの諸々 基本HTMLの例。 HTML Starter Template - A Basic HTML5 Boilerplate for index.html https://www.freecodecamp.org/news/html-starter-template-a-basic-html5-boilerplate-for-index-html/ 以下にGoogleのコーディング規約があるので、HTMLコーディングに慣れてきたら参考にするといい。 ただしあくまでもGoogleの独自ルールなので、必ずしもこれに従う必要は無い。（例えば「インデントは半角2スペースではなく、半角4スペースにする」など。） また、制作会社によっては独自にコーディング規約が定められているので、コーディングの仕事で指定されればそちらを優先する。 Google HTML/CSS Style Guide https://google.github.io/styleguide/htmlcssguide.html 現在のGoogleのHTML・CSSガイドに沿ったコーディング規約/日本語訳 - FUERU https://fueru.info/design/html-css/google-styleguide/ マークアップ全般。 HTMLのタグちゃんと使おう https://zenn.dev/team_delta/articles/a54d642ca3c6be HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA https://ics.media/entry/230622/ 【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita https://qiita.com/degudegu2510/items/6d5d53ca9833aef7ec83 古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset | コリス https://coliss.com/articles/build-websites/operation/css/a-more-modern-css-reset.html いいこと聞いた！ CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ | コリス https://coliss.com/articles/build-websites/operation/css/sensible-defaults-for-img-elements.html ヘッダの記述内容。 2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ | コリス https://coliss.com/articles/build-websites/operation/work/html-head-elements.html スクロール時にヘッダサイズを縮小。 スクロールするとヘッダーサイズが変わるアニメーションを実装する方法 | Webサイト制作会社・ホームページ制作会社 | 株式会社296 | 川崎・横浜 https://296.co.jp/article/37481620193001693 ボタンの配置場所。 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | 「HTML5(HTML)」カテゴリー | Design 0 http://design0.w4c.work/status/287 メディアクエリでの分岐は flexbox と grid に置き換わろうとしているみたい。 CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ | コリス https://coliss.com/articles/build-websites/operation/css/media-queries-probably-dont-need.html FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ | コリス https://coliss.com/articles/build-websites/operation/css/grid-for-layout-flexbox-for-components.html CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose... flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita https://qiita.com/hashrock/items/189db03021b0f565ae27 CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう - Speaker Deck https://speakerdeck.com/tonkotsuboy_com/css-subgridgasui-niquan-burauzadui-ying-xin-shi-dai-noguritu... 以前は画像やJavaScriptを使わなければならなかったようなことも、CSSだけで対応できるようになってきている。 2022年のモダンCSS改 - Speaker Deck https://speakerdeck.com/tonkotsuboy_com/2022nian-falsemodancssgai 【CSS】CSSの擬似クラス :toggle()を使ってToggle Switchを作る - Qiita https://qiita.com/degudegu2510/items/78c0fd5976f62f6ddcea CSSで文字詰めができる【font-feature-settings】を使用してサイトの見栄えを良くしよう！ | ウェブカツBLOG https://webukatu.com/wordpress/blog/14713/ font-feature-settingsが効かない時の確認点 - Qiita https://qiita.com/kakuta_yu/items/97b86353582f444fb47f 2023年モダンCSSの最新トレンド - Speaker Deck https://speakerdeck.com/tonkotsuboy_com/2023nian-modancssnozui-xin-torendo あっ、そうだ！モダンCSSをまとめておこう https://zenn.dev/hiraoku/articles/926cbb8bc35eaa ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る! - Speaker Deck https://speakerdeck.com/myzkyy/koko1-2nian-kuraide-shi-eruyouninatuta-zhu-yao-burauzanozui-xin-ban-g... そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています | コリス https://coliss.com/articles/build-websites/operation/css/goodbye-sass-welcome-back-native-css.html 令和のHTML / CSS / JavaScriptの書き方50選 https://zenn.dev/necscat/articles/bc9bba54babaf5 コンテナ。 全ブラウザ対応した container queryは何がスゴイのか？ - Speaker Deck https://speakerdeck.com/tonkotsuboy_com/quan-burauzadui-ying-sita-container-queryhahe-gasugoinoka テキスト。 CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ | コリス https://coliss.com/articles/build-websites/operation/css/css-4-features-for-i18n.html 下線。 CSSで下線を引く方法まとめ - 様々な装飾方法とアニメーションに適した指定まで - ICS MEDIA https://ics.media/entry/230123/ リンク。 【CSS】まだホバー時のスタイルを :hover だけで指定してるの？ https://zenn.dev/kagan/articles/css-hover-style <a href="tel:">のリンクをPC表示時に無効にするCSSの書き方 | 福岡のホームページ制作会社 | シンス株式会社 https://since-inc.jp/blog/4481 全画面表示。 なぜYouTubeでは動画を全画面表示しながらスクロールが可能なのか？ https://zenn.dev/popopon/articles/scrollable-fullscreen-video IEは2022年6月15日に終了されるので、IE対応のために使えなかったCSSが使えるようになる 詳細は後述の「Internet Explorer 11（IE11）への対応」を参照 【CSS】IE環境では使うの躊躇していた、便利なCSS。 - Qiita https://qiita.com/degudegu2510/items/2939294031cdf6fc23b5 IEよ、さようなら IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ | コリス https://coliss.com/articles/build-websites/operation/css/css-properties-ie-is-not-supported.html IEサポートやめます！で使えるようになったもの https://zenn.dev/vava/articles/0c49c99f0e7b03 【第5弾】少しのコードで実装可能な10のCSS小技集 | Webクリエイターボックス https://www.webcreatorbox.com/tech/css-tips-5 以下は公式の終了告知。 Internet Explorer 11 はサポートを終了しました。長年のご愛顧ありがとうございました。 - Windows Blog for Japan https://blogs.windows.com/japan/2022/06/15/internet-explorer-11-is-no-longer-supported/ ■ブラウザの訪問済みリンクの色 【Chrome135】訪問済のリンクが訪問済になったりならなかったりする #CSS - Qiita https://qiita.com/rana_kualu/items/b74b7160389b9c8f3928 Chromeで「:visited」のリンク色が変化しない問題 / 訪問済のリンク色 | PersonWriter′s Room https://ameblo.jp/personwritep/entry-12891705761.html 訪問済みリンクの色が変わらない - Google Chrome コミュニティ https://support.google.com/chrome/thread/328803210/%E8%A8%AA%E5%95%8F%E6%B8%88%E3%81%BF%E3%83%AA%E3%... Googleで、訪問済みリンクの色が、翌日または起動時にリセットされて... - Yahoo!知恵袋 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10294206045 ■ブラウザ依存対策 昔ほどでは無いが、今もブラウザごとの挙動の違いには悩まされる。 Safari･Chrome･Firefoxでありがちなバグの対処法について(主にCSS) | Blog | 株式会社イロコト | アニメ･ゲームなどのエンタメ系Web制作&運用会社 https://irokoto.co.jp/blog/20201228/post-17 【2021年】Chromeで画像がぼやける場合のCSS対処法 | Sho-log https://sho-log.com/chrome-image-blurred/ レスポンシブ対応でコーディングする場合、「box-sizing: border-box;」を指定しておくといいみたい。 コーディングの際に検討したい。 【CSS】box-sizing:border-boxの使い方｜効かない時は？ https://saruwakakun.com/html-css/reference/box-sizing 【CSS】box-sizingの意味は？スマホ対応に必須の理由を解説 | ZeroPlus Media https://zero-plus.io/media/box-sizing/ 特定ブラウザでの表示は、以下のツールが使えそう。 Browserling - Online cross-browser testing https://www.browserling.com/ ■HTML Living Standard HTML5は2021年の1月に廃止された。 これからは HTML Living Standard が標準となるが、HTML5と仕様が大きく変わるわけでは無い。 HTML Standard 日本語訳 https://momdo.github.io/html/ HTML Living Standard - とほほのWWW入門 https://www.tohoho-web.com/html/memo/htmlls.htm どうしてHTML5が廃止されたのか | フューチャー技術ブログ https://future-architect.github.io/articles/20210621a/ ■Internet Explorer 11（IE11）への対応 2022年3月時点でのメモ。 ・Windows11では、すでにIE11を起動することはできない。 ・Windows10では起動するが、2022年6月15日以降は起動できなくなるとされている。 ・Windows8.1は、OS本体と同じく2023年1月10日でIEのサポートが終了する。 ・Windows8は、OS自体のサポートが終了しており、IEもサポートが終了している。 ・Windows7は、OS自体のサポートが終了しており、IEもサポートが終了している。 いよいよ完全終了へ。Internet Explorer（IE）サポート終了スケジュール：Tech TIPS - ＠IT https://atmarkit.itmedia.co.jp/ait/articles/1503/11/news134.html ヤフーのIE11 サポート終了の進め方 - Yahoo! JAPAN Tech Blog https://techblog.yahoo.co.jp/entry/2022021630265506/ 「IE 11」デスクトップアプリ、サポートが継続されるOSも - 窓の杜 https://forest.watch.impress.co.jp/docs/news/1415886.html 2022年6月15日以降にIE11をサポートしたければ、Windows8.1のパソコンを入手する必要がありそう。 Edgeの「IEモード」で、どこまでIE11が再現されているかは要検証。 「Windows8.1上のIE11でしか再現しない現象」などが無いとは言い切れないので、対応するならWindows8.1を用意しておく必要がありそう。 Edgeの「IEモード」を、サポートが終了するIE代わりに使う方法：Tech TIPS - ＠IT https://atmarkit.itmedia.co.jp/ait/articles/2009/02/news022.html 2023年2月のパッチで完全無効化されるらしい。 Internet Explorerよ永遠に（眠れ） 〜2023年2月の完全無効化を前に「Microsoft Edge」とともに振り返る【特集・集中企画】 - 窓の杜 https://forest.watch.impress.co.jp/docs/special/1452848.html