画面をスクロールしたら固定ヘッダーに境界線がつくUIをCSSのみで実現する画面をスクロールしたら固定ヘッダーに境界線がつくUIをCSSのみで実現する方法を紹介します。どんな時にそのようなUIを採用したくなるかというと、画面が読み込まれた直後はヘッダーとコンテンツの境界をシームレスに表現したいが、スクロールをしたらヘッダーが重なるので境界をはっきりさせたい。そんなときです。開発#CSS#UI2021年10月26日に公開
CSSで文字を省 略表示する方法まとめ一覧画面で一覧しているアイテムの説明をちょっと出したい、ということがよくあります。テンプレートエンジンやJavaScriptでの切り詰めではなく、CSSでの切り詰めも当たり前になってきました。経験的にはこの記事にある1行テキストの省略、複数行テキストの省略、表の省略の3つがあれば、たいていのケースはカバーできるでしょう。開発#CSS2021年9月19日に公開
2021年版Faviconの指定方法まとめWebサイトのFavicon（ファビコン）指定のベストプラクティスは移り変わりがはやい印象がありますね。制作しているWebサイトの要件によって何をどこまでやるかは変えるとよいと思いますが、2021年8月時点でたいていのWebサイトで通用しそうな個人的ベストを書いてみたいと思います。開発#Favicon2021年8月29日に公開
Micromodal.jsで開閉時のアニメーションをつける方法Micromodal.js はWAI-ARIAのガイドラインに準拠した、軽量でアクセシブルなモーダルライブラリです。このmicromodalを使ってモーダルUIを実現するときに、どうやって開閉時のアニメーションをつけるのでしょうか。開発#JavaScript#JavaScriptライブラリ#UI2021年6月17日に公開
CSSのスクロールスナップを利用して横スクロールする一覧リストをつくる方法昨今のWebやアプリのUIでよく見る、横スクロールする一覧リストのつくり方です。scroll-snapを利用してCSSのみで実現できます。開発#CSS2021年6月9日に公開
Docker+WP-CLIでWordPressの開発環境構築をラクにするDockerで動かしているWordPressの開発環境にWP-CLIによる設定の自動化を追加して、管理画面からポチポチ初期設定をする手間をなくしましょう。開発#WordPress#Docker2021年5月22日に公開
WordPressの投稿（投稿タイプpost）の一覧を任意のURLに変更し、投稿パーマリンクを下層ページに位置付ける方法WordPressの標準的な投稿（投稿タイプ post）の記事一覧ページ（アーカイブページ）をトップページとは別に用意したいことはありませんか？ この記事ではその設定方法を解説していきます。カスタム投稿タイプの一覧ページを作るときとはすこし違う設定が必要です。開発#WordPress2021年5月4日に公開
CSS ModulesでCSSを書く時に実務で必要になる書き方まとめこのサイトのCSSはこれまでstyled-jsxだったのですが、Gatsbyを2から3にアップグレードしたのを機に、CSS Modulesに置き換えました。置き換える過程で、実務で必要になりような要件をどのようにクリアしていくのか体感できたので、まとめてみます。以下、GatsbyでSCSSを利用したCSS Modulesのサンプルになります。開発#CSS#React#Gatsby2021年4月27日に公開
WordPressのget_template_part()に$argsで引数を渡すWordPress 5.5.0から get_template_part() に $args パラメーターが追加されています。get_template_part( string $slug, string $name = null, array $args = atarray() )get_template_part() | Function | WordPress Developer Resources開発#WordPress#PHP2021年3月20日に公開
WordPressの記事編集画面で誤って記事公開してしまうのを防ぐために公開ボタンの色を変えるWordPressでの記事作成、こまめに保存をしながら記事を書くことありますよね。保存しようと思って保存ボタンを押したつもりが実は公開ボタンだった。なんてことがたまにあります。なぜ公開ボタンを押してしまうのか。これは記事ステータス変更のエリア一帯で、公開ボタンが目立つように色がついているからだと思います。ぼんやりしているといちばん最初に目に入ってきたボタンを押してしまいます。ということで、この認知的なミスが起こりにくくなるように、公開ボタンの色を変えてしまいましょう。開発#WordPress#WordPress管理画面2021年2月27日に公開
CSS：tableのセル内文字が長くなったときに省略をする方法テキストを1行に収めたいとき、収まりきらない文字を三点リーダー（…）で省略することがあると思います。次のようなCSSです。div { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}この例のように div 等の要素だったらこれで良いのですが、テーブルセル内ではもうひとつプロパティを追加する必要があります。開発#CSS2021年2月20日に公開
Dockerで動かしているWordPressのアップロード上限を変更するWordPressのアップロード上限はデフォルトで2MB。大きめのファイルをアップロードしたいということがたまにあります。そんなときは以下の手順で上限を変えたら、大きめのファイルもアップロードできるようになります。開発#WordPress#Docker2021年2月6日に公開
iOS Safariのinput要素によく使う3つのCSSプ ロパティ普段PCのブラウザで開発をしていているWebサイトをiOSの実機端末で確認してみたら、input要素が思った通りの見た目になっていなかった。そんなことがよくあります。僕がよく遭遇する3つの問題の解決方法をそれぞれ紹介します。開発#iOS#Safari#CSS2021年1月13日に公開
gitのremote urlを変更する方法（BitbucketからGitHubへの引っ越しを例に）GiHubの無料プランでプライベートリポジトリが作成可能になってから、それまでBitbucketに置いてあったリポジトリを、機会があるごとにちまちまとGitHubに引っ越しています。この記事では具体的な引っ越し手順をメモがてら書いてみます。Changing a remote's URLリモート URL をリポジトリに変更する開発#git#GitHub#Bitbucket2020年12月31日に公開
throttleとdebounceの違い。覚え方も考えてみたthrottleとdebounceはいずれも繰り返し大量に発生する処理を間引いて、負荷を軽減させるための処理についた名前です。それぞれ間引き方に違いがあります。この2つの違いをよく忘れがちなので、知識をイメージで補強することにしました。開発#JavaScript2020年12月23日に公開
CSSのcurrentColorを使ってもっと簡単に色を指定するこんなことがしたいことはないでしょうか。SVGの色を文字の色に合わせたい背景色を文字の色に合わせたい愚直にやると、SVGと文字や、背景色と文字に同じ色を指定すると思います。div { color: #ff0000; background: #ff0000;}もしかしたらそれ currentColor を使ったら簡単になるかもしれません。開発#CSS#色#SVG2020年12月19日に公開
初めてShopifyテーマ開発をするときに読みたい情報まとめネットショップをつくれるサービスShopifyのテーマ開発を開始するのに必要な情報をまとめてみました。公式ドキュメントが充実していますが、散らばっている印象があるので、このようなまとめが役に立つのではないかと思っています。前提として知ってほしいことは、テンプレート言語はliquid、開発ツールはthemekitを使うということです。開発#Shopify#liquid2020年12月9日に公開
WordPressのユーザー権限をカスタマイズするときに必要な権限の知識WordPressは、どのユーザーアカウントにどの権限を与えるかを権限グループという概念で定めています。開発者はこの権限を細かにカスタマイズできます。この記事では権限のカスタマイズで必要な最低 限の知識をまとめてお送りします。基礎知識については「ユーザーの種類と権限 / Roles and Capabilities」を参照してください。開発#WordPress2020年12月1日に公開
RSSリーダーのアイテムに記事サムネイルを表示する方法僕が見たのはFeedlyとInoreaderだけで他のRSSリーダーのことはわかりませんが、enclosure にサムネイルとして表示したい画像を指定してあげたら表示されました。過去のアイテムには反映されないようなので、指定後のRSSリーダーによるフェッチから反映、と考えておくと良さそうです。開発#RSS#JavaScript#Gatsby2020年11月25日に公開
gatsby-plugin-feedを使ってGatsbyサイトにRSSを追加するGatsbyのサイトにRSSを追加するには gatsby-plugin-feed というオフィシャルプラグインを入れればよいです。公式ドキュメントもあります。このサイトでもgatsby-plugin-feedを使ってRSSを作っていますが、いくつかポイントがあったので書き残しておきたいと思います。開発#Gatsby#RSS#Contentful2020年11月15日に公開
レスポンシブデザインで文章の改行位置をある程度狙ってデザインするための方法レスポンシブデザインを採用したWebサイトでは、文章の改行位置をあらゆる画面幅で完璧にコントロールするのは至難の技です。とはいっても見出しやキャッチコピーなど印象的に見せたい箇所の文章は、その意味にあわせてなるべく綺麗に改行してあげたいもの。ある程度狙った位置での改行を実現する方法です。開発#CSS#HTML2020年9月9日に公開
どのような内容の画像が入るかわからない場合でもきれいな見た目の枠線をつけたい時に使えるCSS画像の内容によって枠線をつけたほうがきれいに見える場合と見えない場合があります。画像一枚一枚にたいしてつけるかつけないかを決められるなら困らないのですが、UGCサイトやブログテーマのようにどんな画像が表示されるのかわからないケースでは、そのような丁寧な判断をしたくてもできないのが現実でしょう。そんなときに重宝する枠線がPretty Borderです。開発#CSS#画像2019年8月12日に公開