はじめに 突然ですが、皆さんはCSSのmargin（マージン）をよく使いますか？ 私はマージンを多用しないように気をつけています。というより、あまりマージンと関わりたくないと思っています。今回の記事では、「どうして避けているのか」について自分なりの考えをまとめてみたいと思います。 あくまでも個人の意見なので、こういう考えの人もいるのだなと捉えていただけますと幸いです。もっとこうしたら良くなるのに！というご意見は大募集しているので、どんどん教えてください。 マージンを使いたくない理由 マージンを使いたくない一番の理由に、スタイルが崩れるというものがあります。「崩れる」と一言で言っても、わかりずらいと思うので落ち着いて考えをまとめてみました。その結果、下記の2パターンに分かれるという結論に行きつきました。 マージンが不可解な挙動をする コンポーネントとして使い回しずらい この二つの観点から、マ

タイムラインを見ていると「flexとgridの使い分けがよく分からないよ」という人が多く散見されるので、今回は僕が普段意識していることを皆さんに紹介します。 これから紹介することはあくまで僕のやり方で、絶対的な正解とかではないので参考程度に留めておいてください。実装において頻出するレイアウトをサンプルに、どのように考えてレイアウトを組んでいけばよいかを自分なりに説明できたらなと思います。 はじめに僕がレイアウトを組む上で大事にしていること、および意識していること。それは、レイアウトに変化が起こった際に崩れが生じないことはもちろん、将来的な変更に対して柔軟に対応できることです。 極論を言ってしまえばgridは使わなくても大抵のレイアウトは組めてしまいます。Internet Explorerに苦しめられていたあの頃を思い出してみてください。現在でもgridは難解だからflexだけ使用するって方

入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders

dl や ul で組むべきでないという主張ではありませんので誤解のなきよう！ dl で書くんだ！と思える人はそれがいいと思います😉👍 私自身は dl と table が HTML の使い方としてはどちらも正解で差がないように感じられて、どちらを使うべきか判断がつかず悩んだ末、具体的なメリットの部分を見て table にしたという話です。 同じように迷った人の参考になれば幸いです。 詳しくは以降で説明します。 想定する表の内容 この記事の議論では、名前と値の組が複数並んでいる、メタデータの表を想定します。 プログラミング言語でいうところの、連想配列 (Map, Dictionary, JS では Object) の構造に相当します。 具体的には以下のようなものです。 会社概要（「会社名：〇〇、所在地：〇〇、資本金：〇〇、…」） 商品の仕様表（「商品名：〇〇、価格：〇〇、サイズ：〇〇、…」

HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。 21日追記 ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た

Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio

PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。 https://phpcon.connpass.com/event/224128/

CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整

リンクを別タブで開くためにHTML上でリンクにtarget="_blank"を指定することには「セキュリティとパフォーマンスの点で問題がある」と、グーグルのエンジニアが注意している。 一般的な書き方だと思うのだが、どういうことなのだろうか。何が問題なのか、どうすればいいのかを、わかりやすく解説する。 ほかにも今回は、SEOコンサルタントを採用するときのポイント、グーグル検索に有利なCMS、AMPストーリーのSEOなどなど、幅広い観点からSEOの理解を深められる情報をまとめてお届けする。 SEOコンサルタント採用時のグーグル流ベストプラクティスグーグル検索ではShopifyが優遇されている！? CMSで違いはあるのか？AMPストーリーに特化したSEOをグーグルが解説グーグル検索でニュース記事を目立たせるコツをグーグルが解説グーグルは、GAやChromeのデータを検索に使っていないグーグルSE

エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理

下のtext要素をクリックしてごらん、なんと編集できるよ!! 私はtext要素。でも編集できるよ！ (クリックしてみ) わかる人向け: 仕組みを一言でいうと contentEditableなHTML要素の下にtext要素を配置し、このセットをforeignObjectへ入れてSVG要素下に吊るす. 仕組み contentEditable HTML5にはcontentEditableという属性がある。 <div contenteditable>編集可能</div> のように属性を付与すると、 divが編集可能 (クリックしてみ) になる. SVGのcontentEditable contentEditableがSVGで使えれば万々歳、なのだが、使えない... (次のSVGに導入しようぜ、という提案はされてたりする Add `contenteditable` attribute for SVG

CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。 Flexboxが適してる場合、CSS Gridが適している場合、また両方を使用する場合、さまざまなレイアウトの問題を正しく解決する方法を紹介します。 Grid vs. Flexbox: Which should you choose? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ全体のレイアウト 隙間が必要なレイアウト 1次元と2次元のレイアウト ラッパー CSS Gridは将来、Flexboxを時代遅れにするでしょうか？ ページ全体のレイアウト CSS Gridはコ

この記事について 現物の紙の帳票を、デザインをできるだけ変えずにHTML帳票に変換する際の作業手順について整理しました。 印刷に使うブラウザを指定できるという前提になりますが、今のブラウザなら詳細なデザインの帳票を作って印刷させることは難しくありません。 印刷機能というと難解なPDFモジュールを使ったりして手間がかかるイメージでしたが、画面に表示されたページをそのまま印刷すればＯＫということになれば、業務システムなどで様々なブレークスルーが起きるんじゃないかなーと思っています。 役所や本社からWordやExcelでフォーマットを指定された書類提出業務を、こっそりWebアプリ化してみんなで楽する用途などに使いましょう。 ※ この記事は以前作成した記事の再整理として作成しました。 paper.cssを使ってブラウザだけで名刺を印刷する サンプルコード 記事で作っている請求書の完成品です。Chr

デザインは得意だけれども、HTMLコーディングはどうしても不得手だ、という方も多いのではないでしょうか。あるいは、文章を書いていて、ライター脳をコーダー脳に切り替える気がないときに、手軽にHTMLタグを生成したいというケースもあるはず。 今回ご紹介するのは、リッチテキストエディタ（WYSIWYGエディタ）を使ってHTMLタグを生成するオンラインツールです。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! リッチテキストエディタでHTMLコーディングできる「HTML Editor」 「HTML Editor」は、リッチテキストエディタで整形したものをHTMLタグへリアルタイムに変換できるオンライン エディタ。 HTMLコーディングが苦手な人のみならず、文章を書きながら部分的にちょっとしたHTMLを生

GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webシステムを開発していてよく求められるのがグラフです。すでに多数のグラフライブラリがありますが、グラフの種類が物足りなかったり、使い勝手が良くない、デフォルトで生成されるグラフが作っているシステムに合わないなど様々な問題があります。 そのため、まず多数のグラフライブラリを知っておくのが大切です。その中からニーズにあったものを選びましょう。今回はContourを紹介します。 Contourの使い方 まずごく基本的な折れ線グラフ。 D3.jsと組み合わせた例。 曲線グラフ。 棒グラフ。 積み上げ型の棒グラフ。 横棒グラフ。 横でも積み上げ型。 エリアグラフ。 円グラフ、ドーナツグラフもあります。 シリーズ化した円グラフ。 散布図。 散布図＋トレンド。 地図。 アメリカの地図。 CS

帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環

プログラマあるあるだけど友人からホームページ作ってよ!と言われることがある。 大体は適当な理由をつけて断るけど、1日程度で作る方法を模索してみた。 テンプレートをダウンロード 1から書いてる暇はないので適当なテンプレートを使います。今回はHTML5 UP!を使います。 HTML5 UP!のLicense 控え目でもCreditsをサイトに乗せれば無料で使用可能です。 以下はサンプル テーマはDirectiveを使用します。 フォームが付いててマークアップはそのままで使えそうですね。 開発環境 テーマがダウンロードできたら開発環境を準備します。 サーバーサイドは書きません。 Cloud9が便利そうだったので登録してワークスペースを作ります。Cloud9のワークスペースは一つなら非公開でも利用可能です。 以下のようにプロジェクトの情報を指定します。 ライブプレビュー準備 生成されたプロジェクト