web制作
-
Astro.jsで生成フォルダをdistから任意のフォルダ名にする方法 – フレームワークAstro.jsで静的サイト制作
最新のWEBフレームワーク「Astro.js」で静的サイトを作成するために覚えておくとよいこと第2弾です。 今回はビルドコマンドで生成されるフォルダをデフォルト…
-
これは便利！HTMLのdialogタグでのモーダルウインドウ実装とアニメーション設定方法
※このページはプロモーションを含みます モーダルウインドウ機能を実装するのに古い方法で作成していませんか？ 古い方法とは次のようなやり方です。 この記事はdia…
-
jsでもっとちゃんとタブUIを実装する（jQuery不使用）- ページ更新してもタブがリセットされないやり方
※本ページはプロモーションを含みます WEBサイトに一般的なタブのUIを追加したい時、インターネットで実装のサンプルコードを探すことがあると思います。たくさんの…
-
意外と簡単！WSL2にCentos9Streamをインストールする方法
※本ページはプロモーションを含みます 目次 はじめに基本情報作業手順【手順1】CentOS9StreamのファイルをダウンロードPowerShellの起動【手順…
-
iPhone、safariでボタンの文字が青くなる原因と対処方
※本ページはプロモーションを含みます 目次 はじめに原因対処法はじめに WEBサイトのコーディングも終盤にかかりいざ実機確認を行った際、「iPhoneでリンクじ…
-
grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法
※本ページはプロモーションが含まれています 目次 はじめにコード例実際の表示注意点最後にはじめに レスポンシブレイアウトを構築するとき、どのようにCSSを設定す…
-
知っておくとかなり使える！複数行の文字を丸めるcssプロパティline-clamp
※本ページはプロモーションが含まれています 目次 はじめに使用例HTMLとCSS結果注意点最後にはじめに あるブロック範囲内にテキストを収めたい場合、cssプロ…
-
レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら
※本ページはプロモーションを含みます 目次 はじめにstylusとは結論コード使い方補足はじめに レスポンシブのサイトを作る際にフォントサイズの指定はどのように…
-
スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法
※本ページはプロモーションを含みます 目次 はじめにFractalとはnunjucksとは前提条件プロジェクトの構築パッケージを追加する（@frctl/nunj…
-
ReactをCDNで利用した場合のuseState、useEffectの書き方
目次 はじめにuseState、useEffectとは必要な外部ファイルをCDNから呼び出す処理を記入する結果はじめに ReactをCDNから利用することは以前…
-
これなら簡単！cdnでreactとjsxを呼び出してサイトに組み込む方法
目次 はじめにCDNのURLをscriptタグで呼び出すReactとReactDOMを呼び出すbabelを呼び出すReactを書き出すはじめに javascri…
-
Day.jsの使い方と活用方法
目次 はじめにそもそもなぜライブラリを使用するのか代表的なライブラリmoment.jsDay.jsの導入方法の選択CDNでの呼び出し方法と国際化（日本に合わせる…
-
npm-scriptsでprettierが動かない！バージョンを変えると直ると思っていたら実はgitignoreが関係したという話
目次 はじめにprettierをどう入れていたかprettierのバージョンを下げてみる問題はバージョンではなかった.gitignoreに影響されるオプションを…
-
tailwindcssの使い方をさくっと説明 – ざっくり入門したい人向け
※本ページはプロモーションを含みます tailwindcssはcssフレームワークです。他のCSSフレームワークとの違いはtailwindcssはユーティリティ…
-
新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール
WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ（LP）で必要なので使い回している人も少なくないはずです。jQu…
-
tailwindcssをWordPressにマッチさせる方法 – テーマ開発における相性の悪さをカバーしよう
※本ページはプロモーションを含みます tailwindcssというCSSフレームワークが人気です。非常に便利なのでWordPressテーマ開発に導入して見たとこ…
-
jQueryなしでも大丈夫！Ajax処理を生のjavascriptで行う方法
目次 AjaxとはjQueryを使う書き方の記事が多いが実はもうjQueryを使用しなくても簡単にAjax処理が書ける（結論）XMLHttpRequestをもっ…
-
Ajaxでjsonファイルを読み込んでhtmlを更新する簡単な方法（jQuery使用）
WEBサイトで部分的に更新できるようにしたい場合、そのためにWordPressやMovableTypeなどのCMSを用意するのは少し大がかりすぎるなと思うケース…
-
JSONファイルはコメントアウトできません。でもなんとかする方法
※本ページはプロモーションを含みます 目次 JSONファイルでコメントアウトはできませんコメントアウトを前提にしたデータを使いたければYAMLを使おうREACT…
-
browserslistはpackage.jsonに書くか.browseslistrcに書くか
目次 browserslistとは何かbrowserslistは％（パーセンテージ）で設定できるがシェア率はどこでわかるの？browserslistとは何か 名…