コーディング

z-indexチートシート

2022.7.1 by masahiko

CSSのプロパティの1つ、z-indexのチートシートです。それぞれの行はレイヤーを表しています。z-index:0;〜z-index:-1;まで実はレイヤーがあります。またスタックコンテキストが発生するもの（発生する … 続きを読む

2022.1.202021.8.24 by masahiko

HTMLとCSSの練習課題を作成しました。ある程度書けるようになってきた方のレベルアップとして利用していただくことを想定しております。模範解答のようなものは用意しておりませんので、コーディングの得意な方をご準備ください … 続きを読む

2022.2.132019.7.30 by masahiko

column-count: 3 等を使ったCSSでの段組をして、印刷物をデザインする際にハマったことを共有します（ある程度段組CSSと印刷用CSSを知っている方を対象に書いています）。バックグラウンド行程さん「行程 … 続きを読む

2020.5.32018.11.25 by masahiko

この記事は、HTML5 Conference 2018で行なった登壇内容を加筆修正したものです。 CSS設計とは CSS設計設計思想（コンポーネント設計）命名規則等々 CSS設計 Predictable 予測しやす … 続きを読む

2021.9.92018.11.9 by masahiko

固定幅の要素内で、連続した英字をはみ出させずに折り返したいとき、次のプロパティを使うことが多いと思います。 word-wrap: break-word （または、overflow-wrap: break-word） wo … 続きを読む

2018.6.302018.6.30 by masahiko

CSSで組版（印刷打つの紙面を構成）を行うCSS組版が、技術系同人誌（主に技術書典）界隈や、一般の出版業界でも盛り上がりを見せています。今回、CSS組版・パブリッシング交流会というところで登壇した内容を記事にいたしまし … 続きを読む

2017.6.192017.6.19 by masahiko

JavaScriptをあまり使いたくない、使えない。速度の面やSEOとして、CSSで実装したい。そんな方のために、JavaScriptで実装されがちなものを、HTML・CSSのみで実装してTipsにしてみました。 I … 続きを読む

2016.12.31 by masahiko

CSS Nite「Shift10：Webデザイン行く年来る年」というイベントに行ってきたので、自分の感想も込みで、2016年のweb界隈・web業界にはどういったことがあったのか、まとめたいと思います。量が量なので、け … 続きを読む

2016.9.122016.9.12 by masahiko

正規表現のチートシート（早見表）を作りました。「Dreamweaver」「Sublime Text 3」「PhpStorm」「Atom」の4つのテキストエディタに対応しています。 Webデザイナー、フロントエンドエンジ … 続きを読む

2015.11.30 by masahiko

JavaScriptでクリックなどのイベントを取得できますが、その発生（発火）タイミングは実装方法によってまちまちです。同じブラウザでもOSが違えば順番などが違ってきます。特に右クリック時（ここでは利便上そう呼びます）な … 続きを読む

2015.10.31 by masahiko

Sublime Text 3 の普段使っているオススメのプラグイン（パッケージ）を紹介いたします。必須プラグイン ConvertToUTF8 ファイルをUTF8に変換して開いてくれる。 Sublime Text 3 の … 続きを読む

2020.1.92015.4.20 by masahiko

HTMLが、HTML5になってから、ありそうでなかったツール。作りました。 HTML5 入れ子チートシート。どういうツールかたとえば、「a要素ってsection要素を子要素にすることってできるんだっけ？」とか「h1要 … 続きを読む

2018.6.62015.2.10 by masahiko

使いどころが難しい「em要素」「strong要素」「mark要素」「b要素」。どれも強調したいときに使う、程度にしか感じていない人も多いかと思います。 HTML5でのそれぞれの要素の違いは、どのような仕様なのでしょうか … 続きを読む