投稿

CSS GridやFlexboxに罫線を引く

-
イメージ
GridやFlexboxのアイテム間に、CSSだけで罫線を引けるようになりました。 これまではアイテムごとにborderを指定したり、疑似要素を配置したり、背景色で線のように見せたりするなどの工夫が必要でした。CSS Gap Decorationsのcolumn-ruleやrow-ruleを使うことで、GridやFlexboxのgapに対して、わかりやすく簡単に罫線を引くことができるようになります。 column-ruleは列方向のgap、row-ruleは行方向のgapを装飾するプロパティです。Gridでは、各gapに対して線の太さやスタイルを順番に指定できます。Flexboxでも、折り返しなどによって生じたgapに合わせて罫線が描画されます。 .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; column-rule-width: 1px, 3px, 5px; column-rule-style: solid, dashed, solid; column-rule-color: red; row-rule-width: 1px, 3px, 5px; row-rule-style: dashed, solid, dashed; row-rule-color: blue; rule-overlap: column-over-row; } この例では、4列・4行のグリッドに対して、列方向と行方向のgapに異なる罫線を指定しています。column-rule-widthやrow-rule-styleのように複数の値をカンマ区切りで指定すると、gapごとに異なるスタイルを適用できます。 また、rule-overlapを指定すると、行方向と列方向の罫線が交差する部分で、どちらの罫線を上に描画するかを制御できます。 2026年6月時点では、ChromeとEdgeの149以降で利用できます。非対応ブラウザーでは罫線の指定が無視され、通常のgapだけが表示されます。そのため、装飾目的であれば導入しやすい機能です。 Gap decorations: Now available in Chr...
続きを読む

野生のアガベ

-
イメージ
 先日の出張中、工業地帯を流れる川沿いで、思わず目を引く植物を見つけました。 「アガベ」です。 アガベはメキシコなどの乾燥地帯を原産とする多肉植物で、日本では「リュウゼツラン」とも呼ばれています。 乾燥に強く、観葉植物としても人気の植物です。 植物園やガーデン施設で管理された大株なら珍しくありませんが、こんな場所に勝手に生えて、ここまで立派に育っているのは初めて見ました。 コンクリートに囲まれて水はけがよく、夏はカラカラに乾くこの場所。 アガベからすれば、故郷の乾燥地帯に少し近い環境なのかもしれません。 アガベは一生に一度だけ、数メートルにもなる巨大な花茎を伸ばして花を咲かせ、その後に生涯を終えると言われています。 正確な樹齢こそ分かりませんが、大きさから考えると10年ほど育っているのではないでしょうか。 リュウゼツランは環境によって10〜30年ほどで開花すると言われていています。 この株は、まだロゼットが比較的コンパクトで、中心部も若々しく見えるため、まだまだ成長途中なのかもしれません。 ― S.N. インプラス株式会社
続きを読む

見えないボタンの話

-
イメージ
よく使っているWEBサイトで、検索結果を見ていたときのことです。 誤操作で、画面の左余白の何もないところをクリックしてしまいました。 すると、突然画面が反応したのです。 えっ、と思って確認すると、絞り込み機能でした。 クリック後はちゃんと条件も表示され、動作自体は正常です。 ただ、クリックする前は何も見えない。 意図せず触れるまで、そこに機能があるとは思いもしませんでした。 不具合なのか、それとも意図した状態なのか。 「中の人は知っているのか、気付いていないのか」と、少し気になってしまいました。 絞り込みのような無害な機能ならまだいいのですが、許可を求める機能や申込みの確定ボタンのようなものが同じ状態だったら、と考えると話は変わります。 何かを誤ってクリックしてしまっても、見えていなければ気付きません。 最近はAIコーディングが広まり、開発のスピードが上がっています。 その分、人の目が届く範囲も変わってきているのかもしれません。 「人が見えない機能を、どうやってテストするのか」、そんなことを考えさせられた一幕でした。 （HK） インプラス株式会社
続きを読む

鉢植え大玉トマト

-
イメージ
  鉢植えで作っている大玉トマトです｡花がついてからだいぶ時間が経っていますが､ようやく大きくなってきました｡上の枝についているトマトはこの玉と比べると大きくなるのが早いように感じます｡季節によるものなのか､トマト自体が大きくなって光合成が増えたからなのか｡ ともあれ､収穫が楽しみです｡
続きを読む

『「リベラル」ではない人のための憲法のお話』

-
イメージ
『「リベラル」ではない人のための憲法のお話』（堀新）を読みました。 著者はXで活動している方で、色々面白いことも書かれる人でしたのでこの本を手に取りました。 イデオロギッシュな話をわきに置いてわかりやすく憲法について書かれており、メモを取りながら面白く読みました。 （倉） インプラス株式会社
続きを読む

SqlCommandの一時テーブルとパラメーターの落とし穴

-
イメージ
  .NETのSqlCommandでローカル一時テーブルを作成する際、SQLにSqlParameterを含めると、直後のSqlCommandからその一時テーブルを参照できず、「オブジェクト名 '#temp' が無効です」というエラーが発生することがあります。 using SqlCommand comm1 = conn.CreateCommand(); comm1.CommandText = """ CREATE TABLE #temp (col INT NOT NULL); INSERT INTO #temp (col) VALUES (@param); """; SqlParameter param = comm1.CreateParameter(); param.ParameterName = "@param"; param.Value = 1; comm1.Parameters.Add(param); await comm1.ExecuteNonQueryAsync(); using SqlCommand comm2 = conn.CreateCommand(); comm2.CommandText = "SELECT col FROM #temp;"; // Microsoft.Data.SqlClient.SqlException: // オブジェクト名 '#temp' が無効です。 var value = await comm2.ExecuteScalarAsync(); 原因は、パラメーター化されたSQLがSQL Server側でsp_executesqlとして実行されるためです。sp_executesql内で作成されたローカル一時テーブルは、その実行スコープ内のものとして扱われ、スコープ終了時に破棄されます。そのため、次のSqlCommandからは参照できません。 対策としては、まずパラメーターを使わずにローカル一時テーブルの作成のみを実行し、その後パラメーター化されたSQLでデータを操作します。あるいは、作成から利用までをすべて1つのSqlCommand内で完結させる方法もあります。 ローカル一時テーブルを...
続きを読む

記念切手

-
イメージ
 先日、郵送用の切手を購入しに郵便局へ行ってきました。 今回選んだのは「ハッピーグリーティング」シリーズ。 風船をモチーフに、いぬ・ちょう・くまなどの動物たちがシンプルなタッチで表現されたデザインです。 シンプルながらも温かみがあって、思わず手に取りたくなる可愛らしさ。 受け取った方にも、封筒を開ける前からちょっと嬉しい気持ちになってもらえそうだな、と感じました。 郵便局の切手はシリーズごとにさまざまなテーマで展開されていて、毎回どんなデザインが出るのか楽しみのひとつです。 普段は機能重視で選びがちな切手ですが、こういう遊び心のあるデザインも取り入れながら、受け取る方への小さな気配りにしていきたいと思います。
続きを読む