CSS Grid Layoutを使えば、他の方法と比べてシンプルにコードを記述することができたり、柔軟なレイアウトを作ることができます。 知っておくと役立つテクニックや、ジェネレーター、CSSフレームワークなど、便利なものもたくさんあります。 今回は、CSS Grid Layoutを使った便利なテクニックやツール・サービスをご紹介したいと思います。 左右に並んだグリッドの要素を中身を上下中央揃えする デザインするときに、横並びの要素を上下中央揃えしたいケースはよくあります。これについては色々な実装方法がありますが、CSS Gridを使うととても簡単に実装することができます。 上記の画像のように、画像の隣にテキストを表示するようなレイアウトを作りたい場合、HTMLは下記のようになります。 CSSのコードは下記のとおりです。 .container { display: grid; grid-t

最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ブックマークや、スニペットに登録しておくと便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSS Layoutの使い方 CSS LayoutのレイアウトやUI要素91種類 CSS Layoutの特徴 CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。 依存は一切なし フレームワークも必要なし CSSハックもなし すべて実際の使用例 MITライセンスで、商用プロジェクトでも無料で利用できま

タイトルにあるように、文字列が半角英小文字・大文字と半角数字を全て含むかどうかを判定するという機会は少なくありません。特に、文字種の多さがパスワードの強さであるという教義の持ち主である場合に顕著です。もちろん長さは16文字以内です。 さて、この判定は一見単純に見えて一筋縄ではいきません。文字列の条件判定といえば正規表現ですが、「全て含む」という条件をきれいに書くのは少し難しいでしょう。そこで、この記事ではこの条件を判定する諸方法について雑に考察します。 愚直に正規表現を使う方法 正規表現では、「ある文字種をひとつ含む」という条件を書くのは簡単です。例えば半角小文字を含むという文字列は/[a-z]/という正規表現で判定可能です。これを用いれば、正規表現を3回使うことで上述の条件を判定できます。 const ratz = /[a-z]/, rAtZ = /[A-Z]/, r0t9 = /[0-

テスターのくせに Janet Gregory さんと Lisa Crispin さんの書籍『Agile Testing』『More Agile Testing』を読まずに今日まできてしまったのですが、この二冊を凝縮（Condensed）した『Agile Testing Condensed』（日本語訳）くらいは目を通しておかないとね！ということで読みはじめました。 leanpub.com この記事は本書に書かれていたある問題を取り出し、それに対してわたしたちのチームが普段やっていることをわたしの目線で紹介したものです。ツイートするには長いのでこちらに書きました。 チームが「サイロ化」する問題 複数のチームがすべて同じプロダクトで作業している大規模な組織でよく見られる問題の1つは、チームが「サイロ化」する傾向があることです。依存関係を解決するために他のチームと話すことを忘れています。（第3章：

by Christiaan Colen Windowsで現在起動しているプログラムやCPUの使用状況などを確かめたい時に、真っ先に思いつくのが「タスクマネージャーを使う」ことです。そのタスクマネージャーを約25年前に開発したMicrosoftの元エンジニアであるデビッド・プラマー氏が、直々に使い方や知られざる機能を説明しています。 I wrote Task Manager and I just remembered something... : techsupport https://old.reddit.com/r/techsupport/comments/gqb915/i_wrote_task_manager_and_i_just_remembered/ プラマー氏は1993年からMicrosoftに勤務していたそうで、1994年頃、タスクマネージャーのプログラムである「TaskMgr