はてなブックマーク

column-count: 3 等を使ったCSSでの段組をして、印刷物をデザインする際にハマったことを共有します（ある程度段組CSSと印刷用CSSを知っている方を対象に書いています）。 バックグラウンド 行程さん 「行程さん」という、旅のしおりをウェブ上で簡単に作るサービスを作っています。今回はそのしおりをアナログ回帰させて、簡単に印刷してもらうために印刷専用のプレビュー画面をウェブ上で作ろうとしたのが始まりです。 機能 二つ折り用と三つ折り用 印刷されるものと同じ 考慮すること 特定の誰か、というものをあまり考えず、なるべくすべての環境で印刷可能にしたいと考えました。 日本、日本人 年齢 10代〜60代くらい ネットリテラシー ある ない 通信速度 遅い 速い OS、端末 Windows macOS Android iOS 印刷するプリンター 所持 コンビニ 対応ブラウザの決定打になった

固定幅の要素内で、連続した英字をはみ出させずに折り返したいとき、次のプロパティを使うことが多いと思います。 word-wrap: break-word （または、overflow-wrap: break-word） word-break: break-all ↑こういうやつ 結局どっちがいいのか、ということを解決します。 結論 基本的には word-wrap: break-word のみを使用 部分的に word-break: break-all を使う。もしくはなにかプロパティを付加して解決する を推奨します。 word-wrap: break-word と word-break: break-all の2つのざっくりした違い word-wrap: break-word◆（overflow-wrap: break-word） 単語があふれないように適切な位置で改行（適切、がポイント） w

CSSで組版（印刷打つの紙面を構成）を行うCSS組版が、技術系同人誌（主に技術書典）界隈や、一般の出版業界でも盛り上がりを見せています。 今回、CSS組版・パブリッシング交流会というところで登壇した内容を記事にいたしました。また、記事の最後には、同イベントでのCSS組版について感じたことも報告としてまとめました。 実際に行ったCSS組版の方法 MarkdownからHTMLにどう変換するかの模索結果 が今回の記事の内容です。そのため、ベストプラクティス、というわけではないです。CSSで組版を行うということは、必然的に、HTML等で書かれた文書が必要になるので、それをどうやって生成しようという話です。 目次 バックグラウンド なぜMarkdown＋CSS組版なのか Markdown＋CSS組版の作業の流れ エディタ Atom エディタ Typora HTML出力 印刷画面プレビュー Tips

『IE11以上対応できもちよく書くCSS』というタイトルで技術系同人誌を作り、2018年4月22日の技術系同人誌即売会の「技術書典4」に出展しました。 制作編と出展編で分けて記事を投稿したいと思います。 テーマ 技術書典の出展は前回が初めてで、今回で2度目。 今回もいろいろ案を出しました。最終的に、元同期と話していたときにもらった案が需要ありそうだったのと、自分でもそういう本が欲しかったので「IE11以上対応することで良くなること」をテーマにしました。 当初は、「IE11以上対応にすることで、これだけのコストが下がる」というざっくりした数字まで出せたらいいなと思っていましたが、数字を出すのがそんなに簡単ではなかったのでやめ、特にCSS3以上でIE11以上に対応している便利できもちいいものをリファレンス的に紹介する本にしました。 執筆方法 CSS組版で行いました。 環境 テキストエディタ（M

グッズのフォトブックはPhotobackというところで作りました。1冊が一番安いもので1,000円＋αなので、それを1,000円販売。こちらはほとんど手に取ってすらもらえなかったですね。5冊作って、2冊買っていただき、残り3冊はモデルになっていただいた人の親御さんに買っていただきました。 値段設定 物理本 700円 電子書籍（PDFとHTML） 700円 両方セットで1,000円 ページ数は40ページ（表紙含まない）です。値段はすごく悩みました。前日まで悩んでいました。ほとんどの人が40〜50ページで500円を設定していたからです（しかも、電子版は無料でつけるという人も多い）。 私が調べる限り、同人誌というもの自体、普通の商業誌の倍程度の値段に設定していることが多いように思いました。技術書の商業誌が10ページあたり100円程度のため、40ページで800円ほどが適正だと判断しました。感覚的に

JavaScriptをあまり使いたくない、使えない。 速度の面やSEOとして、CSSで実装したい。 そんな方のために、JavaScriptで実装されがちなものを、HTML・CSSのみで実装してTipsにしてみました。 IE11〜、iOS Safari 9.2〜、Androidブラウザ4.4〜でだいたい動きます（ベンダープレフィックスが必要な場合も）。 デメリットもあるので、合わせて確認してみてください。 バルーン表示

使いどころが難しい「em要素」「strong要素」「mark要素」「b要素」。 どれも強調したいときに使う、程度にしか感じていない人も多いかと思います。 HTML5でのそれぞれの要素の違いは、どのような仕様なのでしょうか。 そのぞれの要素の違いのまとめ 長くなるので結論から述べます。簡単にまとめると以下です。 strong要素 重要性、深刻性、緊急性など、まっさきに見てほしいテキスト em要素 強調させることによって文章の意味を変えたいとき mark要素 引用文や別の文脈の文章などから目立たせたい箇所 b要素 上記以外で目立たせたいとき HTML 4.01 の場合のおさらい まずは、おさらいです。 em要素 Indicates emphasis. HTML 4.01 では「強調（重点）を示す」でした。 strong要素 Indicates stronger emphasis. HTML 4

自分のサイトにメールフォームを設置したい。PHPが動作するサーバで、PHPもほんの少しならわかる、っていうときに無料のメールフォームを使うことがあると思います。 いくつか、実際に使って調べた中で良さげなメールフォームを3つ紹介いたします。 PHP工房 PHP多機能メールフォーム TransmitMail Responsive Mailform

正規表現のチートシート（早見表）を作りました。 「Dreamweaver」「Sublime Text 3」「PhpStorm」「Atom」の4つのテキストエディタに対応しています。 Webデザイナー、フロントエンドエンジニアが、テキストエディタを使って検索や置換をするとき用に作りました。もちろん、資料をよく作るディレクターや、Web制作関連ではない人でも積極的に使ってほしいです。 よく使うものばかり載せているので、だいたいのプログラミング言語でも使えます。 正規表現 画像版・PDF版 PDF版が一番見やすいと思います（軽いし）。 正規表現チートシート PNG画像 正規表現チートシート PDFファイル 正規表現とは 正規表現とは、文字を集合（パターン）で表す方法です。 検索を例にとると、通常の検索は入力した文字のみの検索ですが、正規表現を使うと「aからzまでの文字」というパターンなどで検索で

HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he

HTMLが、HTML5になってから、ありそうでなかったツール。作りました。 HTML5 入れ子チートシート。 どういうツールか たとえば、「a要素ってsection要素を子要素にすることってできるんだっけ？」とか「h1要素ってdtのタグで囲んでいいんだっけ？」とか思ったときに調べるツールです。 使い方 以下にアクセス。 調べたい要素にマウスポインタを合わす 「親」と「子」が出てくるので、どちらかを押下 色が変わった要素が、その要素が取り得ることのできる要素 ガラケー以外の、だいたいの端末やブラウザで動くはずです。 制作経緯 こういったことが簡単にわかるサイトが見つからず（探しきれていないだけかもですが）、仕様書を見てもわかりづらい。 HTML 4.01 は、ブロック要素とインライン要素さえ覚えていれば、なんとかなりましたが、HTML5からは複雑になってしまいました。 そこで、「なければ作れ

2025年1月28日更新 最近のリセットCSSを比較しました。 選ぶにあたっての観点 変更が容易か（将来的に「バージョンアップ」「他のリセットCSSに変更」をしたときに、工数があまりかからない） ブラウザの「UA sty … 続きを読む