css grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法
はじめにレスポンシブレイアウトを構築するとき、どのようにCSSを設定するのがよいのでしょうか？display:flex、display:gridのどちらかで設定を行うのがセオリーとなっています。どちらを使うかは条件によって分かれます。例えば…＜条件1＞スマホは1列、デスクトップは4列、要素は左詰めでOK＜条件2＞スマホ...
css 
css 知っておくとかなり使える！複数行の文字を丸めるcssプロパティline-clamp
はじめにあるブロック範囲内にテキストを収めたい場合、cssプロパティtext-overflow: ellipsis;を設定するとはみ出した文字は…（３点リーダー）として表示されます。WordPressなどの記事の抜粋を表示するサイト制作の際にとても役にたつプロパティなのですがtext-overflow:ellipsis...
stylus レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら
はじめにレスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか？この記事ではメディアクエリを使用せず画面幅に合わせたフォントサイズを指定するコードを紹介します。CSSではなくnode製altcssのstylusのコードになります。各要素に気軽に設定できるようにmixinになっています。styl...
javascript スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法
はじめにサイトやWEBアプリなどの見やすいスタイルガイドを作成できるジェネレーターのひとつに「Fractal」というツールがあります。FractalFractalは何も指定しなければテンプレートエンジンに「Handlebars」を使用しますが設定次第でそれを「nunjucks」に変更することができます。今回はFract...
HTML inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み（jQuery不使用）
はじめにフォームで入力欄に全角数字だけを入力してほしいときがあります。javascriptでリアルタイム変換が可能なのでひと手間かけて処理を追加しておくと間違いが減ってよりよいフォームになるでしょう。今回はjQueryは使用しないで処理を行うスクリプトです。コードのサンプル早速コードのサンプルです。①"oninput"...
HTML ちょっと待って！！知っていますか？input type=numberの落とし穴
はじめにユーザーに何かを入力してもらいたい画面を作成する場合にinputタグのtypeは何にしていますか？数字を入力してほしい場合にtype属性の値をnumberにするべきだと安直に考えてはいけません。input type=numberには落とし穴があります。input type=numberの落とし穴Chromeでs...
javascript ReactをCDNで利用した場合のuseState、useEffectの書き方
はじめにReactをCDNから利用することは以前の記事で書きました。▼過去の記事はこちらReactに限らずjavascriptのフレームワークでは状態管理が便利です。Reactの状態管理useStateとuseEffectですが、npmで構築する時と書き方が少し変わってきます。今回はCDNでuseState、useEf...
javascript これなら簡単！cdnでreactとjsxを呼び出してサイトに組み込む方法
はじめにjavascriptの人気ライブラリ「React」ですが使用方法を調べるとnpmでインストールする方法にたどりつくと思います。それも良いのですが既にReactなしで出来上がったサイトに組み込みたい時や気軽にReactの良いとこどりをしたい時はnpmは使用せずcdnを利用するのも良い選択かもしれません。この記事で...
その他 npm-scriptsでprettierが動かない！バージョンを変えると直ると思っていたら実はgitignoreが関係したという話
はじめにnpmを使用してサイト制作をする際にコード自動整形ツール「prettier」を使用しています。prettierのバージョンが3にあがってから自動整形されなくなってしまいました。バージョンのバグかと思っていましたがただの設定ミスだったというお話です。prettierをどう入れていたかnpm i -D pretti...
WordPress Vscode＋wsl2でWordPressコード規約をもとにした自動整形を実現する方法 – 後の作業をもっと楽に
今最も人気のあるコードエディタといえばMicrosoftのVisual Stuido Codeではないでしょうか？拡張機能を使えばコーディング規約に基づき自動整形をしてくれる等とても効率的に開発を行えます。PHPの自動整形も同様です。しかし、普通のPHPではないWordPressコーディング規約に合わせて自動整形をした...
WordPress tailwindcssをWordPressにマッチさせる方法 – テーマ開発における相性の悪さをカバーしよう
tailwindcssというCSSフレームワークが人気です。非常に便利なのでWordPressテーマ開発に導入して見たところ相性について思うことがありましたのでお伝えします。tailwindcssとはユーティリティーベースのCSSフレームワークです。似たようなものにTwitterBootstrap等があります。Twit...
javascript jQueryなしでも大丈夫！Ajax処理を生のjavascriptで行う方法
AjaxとはAsynchronous + JavaScript + XMLの頭文字を使用した非同期処理のことです。jQueryで書くと楽に書くことができます。jQueryでの書き方は以下の記事に書きました。jQueryを使う書き方の記事が多いが実はもうjQueryを使用しなくても簡単にAjax処理が書ける頻繁にAjax...
javascript Ajaxでjsonファイルを読み込んでhtmlを更新する簡単な方法（jQuery使用）
WEBサイトで部分的に更新できるようにしたい場合、そのためにWordPressやMovableTypeなどのCMSを用意するのは少し大がかりすぎるなと思うケースがあります。そんなときにはjsonデータなどの外部ファイルをAjaxで取得して表示させる処理も選択肢に入れれるように流れを覚えておくと良いです。Ajaxとは「A...
その他 JSONファイルはコメントアウトできません。でもなんとかする方法
JSONファイルでコメントアウトはできませんAjaxを利用して外部データを取得、それをもとにレンダリングをする機会がかなり増えてきました。この外部データで一番使いやすいのはjsonファイルです。データ構造がまんまjavascriptのオブジェクト型なのでデータを変数に入れるとそのままオブジェクとして扱えるのです。jso...
javascript browserslistはpackage.jsonに書くか.browseslistrcに書くか
browserslistとは何か名前のとおりターゲットブラウザを設定できるツールで色々なNodeのツールで使用できます。例えばautoprefixerやbabel、postcss-preset-envなどはbrowserslistを解析してそこで設定されているブラウザを対象にした処理を行うようになっています。2022年...
その他 Stylelintを利用してコードを自動整形する方法
cssを分析して間違いを指摘してくれるツールStylelint。これを使えば複数人でコードを共有していても自動的に同じ作法で書かれたコードを作ることができます。一度その仕組みを組んでしまえばあとは楽で便利ですが、導入部分が少し複雑なのでnpm-scriptsでStylelintを稼働して作法がバラバラなCSSファイルを...
その他 PostCSSで入れ子を実現できるプラグイン「postcss-nesting」使用時に起きる問題と解決法
cssのポストプロセッサPostCSSは使用したい機能だけを利用してcssを加工するツールです。非常にたくさんのプラグインが存在しその種類によってはSASSの機能を再現することが可能です。SASSでは非常に使用頻度が高い入れ子表記を実現可能にするプラグインpostcss-nestingを使用時にちょっと気になる問題があ...
その他 Edgeで画像の右上のマークは何？出る条件と影響について
久しぶりにEdgeを画像にマウスカーソルをあてたらに右上に知らないアイコンが出て「おや？」と思ったかたはいないでしょうか？他の画像に同じことをしてもアイコンが出てこないのもあるし制作者の意図なのか紛らわしいですね。クリックするとわかりますが正体はEdgeの画像検索機能です。これはbingの画像検索機能に依存している機能...
javascript jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6)
テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。ヘッダーやフッターなどのページに共通な部分を一か所にまとめることができるリストのような同じ構造の大量のコードを一か所にまとめることができる今回は２の詳細を紹介します。具体的にはjsonファイ...
stylus StylusでヘルパーCSSを作成する際に便利な関数、mixin（メディアクエリ編）
sassではよくメディアクエリを設定しやすくするためmixinを使用しますがstylusでも同様にメディアクエリ用のmixinを作成すると効率が各段によくなります。今回はメディアクエリ用のmixinをstylusでどう作るか紹介します。実際に追加するコードmq(num) breakpoints = { sm: 576,...