CATEGORY

HTML/CSS

  • 2020年6月13日
  • 0件

ドメインを取得するなら毎週金曜日にエックスドメインが一番安い

ドメイン を取得する代表的なサービス ドメイン を取得するサービスといえばここら辺が有名です。 どこで購入したとしてもしっかりとした会社なので安心です。 エックスドメイン 普段エックスサーバーでサイト運用している方も多いのでは無いでしょうか。 そんな方には同じサービスで完結できるエックスドメインを使 […]

  • 2020年6月13日
  • 2020年6月13日
  • 0件

なぜBEMはアンダースコア__、またはハイフン–と2個必要なのか

BEMとは何か の詳しい話はせず、簡単にだけ説明します。詳しくはこちらを確認ください。 https://en.bem.info/ BEMを利用する上で、BEMは気持ち悪いと感じる理由の1つ 「なぜBEMはアンダースコア(アンダーバー)やハイフンを2つ連続でつける必要があるのか」 それに対し、別の少し […]

  • 2020年6月13日
  • 2020年6月13日
  • 0件

アクセシビリティに必要なWAI-ARIAの正しい使い方

WAI-ARIAの役割 下記以外にもたくさんの機能がありまるが代表的なカテゴリを紹介。 ここにほとんどの物が網羅されており、参考になります ARIAを利用するロール、ステート、プロパティ  ロール(role) この要素の意味を定義する。 ex) role=“navigation”, banners […]

  • 2019年10月13日
  • 2020年3月12日
  • 0件

HTMLメールの作成の仕方と注意点 【2019年 → 2020年度版】

HTMLメールの場合、開封率がわかり、またテキストメールに比べてクリック率(CTR)や購買率が高いと言われている。 ただ、ユーザがHTMLメールを見る環境を考えると100パターン以上存在し、書く環境に対応するのは難しい。 今や環境は、outlook(アウトルック)、thunderbird(サンダーバ […]

  • 2019年10月8日
  • 2020年5月29日
  • 0件

「テーブルレイアウト」はなぜだめか、使わない理由を説明できますか?

「テーブルレイアウトはするな」 仕事で当たり前の用によく言われること。 しかし、実際なぜ使ってはいけないのかを、具体的に説明できる人が少ない。 なので、その理由と、本当に使ってはいけないのかをまとめてみました。 メリット 崩れづらい 昔ながらのタグな故、tableタグで組むと崩れが起きづらい 組みや […]

  • 2019年7月5日
  • 2020年3月12日
  • 0件

「CSS Modules」or「Scoped CSS」or「Styled Component」

BEMやMCSS、SMACSSとかはもう古い。 といっても、正直まだあまり理解指定ない。とりあえずStyled Componentが今人気ということは聞いた。 そしてどれもvueやreactで利用する。 CSS Modules vue ファイルで<style module> と記載。 装 […]

  • 2019年7月3日
  • 2020年3月12日
  • 0件

コーディング時によく使うツール一覧

私がコーディング時によく使うツールを紹介します。 もし「こんなツールもあってよく使っているよ。」というのがあれば教えてください! autoprefixer nodeでautoprefixerを使っていたが、node.jsを使わないケースでこれを使いたいと感じて探したらツールも提供していた。 指定した […]

  • 2019年6月30日
  • 2020年6月13日
  • 0件

人気サービスのfont-familyを調べてみた【2020年度版】

新しくサイトを作る際に検討するものの1つ。 それは「font-family」。要はフォントに何を選ぶか。 参考に人気サービス各社のcssを調べてみました。 note 最近流行りのブログサービスのnote。読みやすい文章を意識されているはず。 font-family: -apple-system,Bl […]

  • 2019年6月29日
  • 2020年6月18日
  • 0件

リセットCSSのおすすめと非推奨【2020年度版】

リセットCSSはブラウザのデフォルトで設定されたCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイル。 新規サイトを作成するとき、コーディングルールを考えるとき、絶対に考えるreset.css。 決定版が欲しいところなのでまとめました。 実際、毎年大きな差分もなく、古いブラウザの最適化がさ […]

  • 2019年6月19日
  • 2020年3月12日
  • 0件

コーディングガイドラインまとめ【2019年 → 2020年度版】

新規サービス開発や、古びたシステムを担当した時に毎回調べるHTML, CSS, Javascriptのコーディングガイドライン。こちらをまとめてみました。 Javascript google 英語版ですが、Good / Badで例が全パターンまとまっているのでとてもわかりやすいです。 これを例にレビ […]

  • 2019年6月7日
  • 2020年3月12日
  • 0件

CSS Modulesとは?

大規模化するCSSの問題点 Christopherは以下をあげています。 1. グローバルネームスペース  -> スタイルはグローバルスコープなので、全てに影響がある。JSでグローバル変数は懸念されるのにCSSは許容されている。 2. 依存性  -> ネストすることによるスコープ。パフォ […]

  • 2019年6月2日
  • 2020年3月12日
  • 0件

javascriptのコメントアウトの記述方法ってまだ必要?

<script><!-- console.log("hogehoge"); --> </script> これってまだ使っている人が多いけど、なぜ使ってるんだっけと改めて確認しました。   なぜ利用していたか   Javascript非対応ブラウザに、コードをそのま […]

  • 2019年5月3日
  • 2020年3月12日
  • 0件

cssのスタイルガイドライブラリ

はじめに CSSのコメントに書く cssが膨大になるのでミニマイズは必要 環境によっては難しい ペラ1ページには向かない 目的 モジュールの一覧化 デザインの一貫性 新モジュールが追加されたらすぐわかる マークアップのルールがわかる 他のコードをパクりやすい スキルや感性に頼らないコーディング 種類 […]

  • 2019年5月3日
  • 2020年6月13日
  • 1件

OOCSS、BEM、SMACS、MCSS、FLOCSS、一番良いCSS設計手法はなにか。

一番良いCSSの設計手法とは 過去にまとめたCSS設計についての考えをまとめてみた。 今は、どういった設計をすべきだろうか。 ReactやVueを使う場面も増えていく環境で、どの設計手法が一番運用しやすいのか。 CSS設計手法の歴史 2009年 OOCSS レイアウトと見た目のclassをわける 主 […]

  • 2019年4月29日
  • 2020年3月12日
  • 0件

レスポンシブデザインのメリットデメリット

メリット 運用ベースであれば1箇所変えれば全デバイスに対応できるので、更新は楽(記事の内容だけとか) googleがレスポンシブを推奨しているため、SEOに強いらしい スマホファーストな設計ができる 端末の大きさに影響されなくなる URLがおなじになる デバイス判定が不要 デメリット 複雑なサイトに […]

  • 2019年4月27日
  • 2020年3月12日
  • 0件

flexboxの使い方一覧

ツール 試せる https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/ 親要素 display: flex; flex-direction:子要素の配置方向 row:左から順に。デフォルト。 row […]