その他 2手で完了!? Astroフレームワークにtailwindcssを追加する方法
はじめに静的サイトジェネレーターAstroフレームワークにCSSフレームtailwindcssを導入する方法を記します。tailwindcssの導入によってクラス名に悩んだりメディアクエリを無駄に増やすことを避けられて制作がスムーズに進められます。前提node.jsは既にインストールされている状態を想定しています。※n...
その他
その他 
その他 意外と簡単！WSL2にCentos9Streamをインストールする方法
はじめに最近CentOS9Streamを操作する必要が発生しましたがいきなり本番系で操作するのも不安なのでまずWSLにインストールして試してみようと思いました。ただUbuntuはMicrosoftStoreでボタン一つで簡単にインストールできるのに対してCentOSはMicrosoft Storeにありません…。ネット...
その他 iPhone、safariでボタンの文字が青くなる原因と対処方
はじめにWEBサイトのコーディングも終盤にかかりいざ実機確認を行った際、「iPhoneでリンクじゃないボタン（buttonタグ）の色が黒じゃない…」という状態になったことはないでしょうか？Windowsの端末で作業している人は特に。BootstrapなどのCSSフレームワークを使用していれば基本要素には全部ノーマライズ...
その他 npm-scriptsでprettierが動かない！バージョンを変えると直ると思っていたら実はgitignoreが関係したという話
はじめにnpmを使用してサイト制作をする際にコード自動整形ツール「prettier」を使用しています。prettierのバージョンが3にあがってから自動整形されなくなってしまいました。バージョンのバグかと思っていましたがただの設定ミスだったというお話です。prettierをどう入れていたかnpm i -D pretti...
その他 JSONファイルはコメントアウトできません。でもなんとかする方法
JSONファイルでコメントアウトはできませんAjaxを利用して外部データを取得、それをもとにレンダリングをする機会がかなり増えてきました。この外部データで一番使いやすいのはjsonファイルです。データ構造がまんまjavascriptのオブジェクト型なのでデータを変数に入れるとそのままオブジェクとして扱えるのです。jso...
その他 Stylelintを利用してコードを自動整形する方法
cssを分析して間違いを指摘してくれるツールStylelint。これを使えば複数人でコードを共有していても自動的に同じ作法で書かれたコードを作ることができます。一度その仕組みを組んでしまえばあとは楽で便利ですが、導入部分が少し複雑なのでnpm-scriptsでStylelintを稼働して作法がバラバラなCSSファイルを...
その他 PostCSSで入れ子を実現できるプラグイン「postcss-nesting」使用時に起きる問題と解決法
cssのポストプロセッサPostCSSは使用したい機能だけを利用してcssを加工するツールです。非常にたくさんのプラグインが存在しその種類によってはSASSの機能を再現することが可能です。SASSでは非常に使用頻度が高い入れ子表記を実現可能にするプラグインpostcss-nestingを使用時にちょっと気になる問題があ...
その他 Edgeで画像の右上のマークは何？出る条件と影響について
久しぶりにEdgeを画像にマウスカーソルをあてたらに右上に知らないアイコンが出て「おや？」と思ったかたはいないでしょうか？他の画像に同じことをしてもアイコンが出てこないのもあるし制作者の意図なのか紛らわしいですね。クリックするとわかりますが正体はEdgeの画像検索機能です。これはbingの画像検索機能に依存している機能...
その他 はまると面倒！？Instagramのタイムラインをサイトに表示させる方法
「facebookのページプラグインやTwitterの埋め込みタイムラインのようにインスタグラムの投稿をサイトに表示させたい」という要望があることがあります。しかしfacebookのページプラグインやTwitterのタイムラインのように気軽に表示することができません。表示するにはひと手間、ふた手間かかるので注意が必要で...
その他 AdobefontsのwebフォントがIE11表示されない！それでもIE11で表示させたい人へ
いままで問題なく表示されていたものが急にうまくいかなくなることはよくあることです。Adobeが提供しているフォントサービス「Adobefonts」を利用して表示させていたwebフォントがIE11で表示されなくなり困りました。IE11のコンソール画面を見てみるとjavascriptでエラーが発生しているようです。Prom...
その他 WordファイルがPHPで認識されない!？それGoogleと関係あるかもしれません
Webサイトなどでユーザーにファイルをアップロードさせファイル形式を判定して処理を行う場面があります。画像ファイル、PDFファイル、Wordファイルなどがよくあるパターンですがプログラムの中ではファイルの種類を表す情報「mimetype」をもとに判定すると思います。その際、Wordファイルの判定がうまく行かないファイル...
その他 iPhoneでページ下部のタップイベントを確実に発火する方法
スマホ用に見やすく設定されたWEBページのパターンの1つに画面下に固定されたナビゲーションがあります。ユーザーの親指の位置に近いので良いデザインかと思いきやiPhoneで落とし穴があるので注意が必要です。iPhoneでページ下部固定メニューをタップしても一回では動かない問題iOSの標準ブラウザsafariで下に表示され...
その他 そのページでは使っていないjQueryプラグインでエラーを出さないように。jQueryプラグイン存在判定の方法
フロントエンドは開発方法の発展のスピードがすさまじくjavascriptもそのまま書かずwebpackなどのツールを使用することが増えてきました。jQueryに関しては脱jQueryが段々広まっているように見えますが案件によってはまだまだjQueryのお力を借りなければいけません。それはライブラリが豊富でスピーディーに...
その他 IEサポート終了がなぜ騒がれるのか。そしてIEモードとは？いつまでも消せないブラウザ事情について
IEの終了がどんなことをもたらすのか米Microsoftは2021年5月19日（現地時間）に2022年6月15日をもってWebブラウザ「Internet Explorer」のサポートを終了すると発表しました。WEB業界（どんな業界だ？）システム関連業界で大きな話題になっています。なぜ騒がれるかわからない人もいるでしょう...
その他 タイトルいれてる？PDFファイルをWEBサイトにアップする時のチェックポイント
印刷物をWEB上で活用したいときにPDFファイルはとても便利です。「Adobeのソフト」はもちろん「Microsoft Office」があればWordやExcel、PowerPointなどのアプリケーションで簡単にPDFに変換できます。WEBサーバー上に置いて公開される流れが多いですがアップする前に気を付ける点があるの...
その他 facebookページプラグインの曜日がおかしい！？ 便利なプラグインの厄介な点
webサイトにfacebookページの投稿を表示することができるプラグインがfacebookから提供されています。このプラグインを使用するとfacebookで「友達」になっていない人やフォローされていない人にも投稿内容をお知らせすることができます。また、リアルタイムに情報を発信できるのでお知らせとして使用するときに便利...
その他 WordPress Popular Postを独自タグ構造で独自期間を指定して表示したい
WordPressで人気記事ランキング等を表示してくれる便利プラグイン「WordPress Popular Post」ですが独自タグ構造で表示するにはテーマをいじる必要があります。この情報が見つけづらかったのでここに残しておきます。<?php if ( class_exists( 'WordPressPopul...
その他 そのログイン失敗の原因は拡張機能HTMLチェッカーかも
AWSコンソールやBitbucketにログインできなくなりました。ログインエラー画面には「クッキーを削除して再試行してください」のようなメッセージが書かれていました。言われた通りブラウザのクッキーとキャッシュを削除して再びログインをしようとしましたがやはりエラーでログインできません。メインブラウザがGoogle Chr...