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レイアウトの活用方法
※本ページはプロモーションが含まれています 目次 はじめに コード例 実際の表示 注意点 最後に はじめに レスポンシブレイアウトを構築するとき、どのようにCS…
-
知っておくとかなり使える!複数行の文字を丸めるcssプロパティline-clamp
※本ページはプロモーションが含まれています 目次 はじめに 使用例 HTMLとCSS 結果 注意点 最後に はじめに あるブロック範囲内にテキストを収めたい場合…
-
レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら
※本ページはプロモーションを含みます 目次 はじめに stylusとは 結論コード 使い方 補足 はじめに レスポンシブのサイトを作る際にフォントサイズの指定は…
-
スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法
※本ページはプロモーションを含みます 目次 はじめに Fractalとは nunjucksとは 前提条件 プロジェクトの構築 パッケージを追加する(@frctl…
-
ReactをCDNで利用した場合のuseState、useEffectの書き方
目次 はじめに useState、useEffectとは 必要な外部ファイルをCDNから呼び出す 処理を記入する 結果 はじめに ReactをCDNから利用する…
-
これなら簡単!cdnでreactとjsxを呼び出してサイトに組み込む方法
目次 はじめに CDNのURLをscriptタグで呼び出す ReactとReactDOMを呼び出す babelを呼び出す Reactを書き出す はじめに jav…
-
Day.jsの使い方と活用方法
目次 はじめに そもそもなぜライブラリを使用するのか 代表的なライブラリmoment.js Day.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を使おう REA…
-
browserslistはpackage.jsonに書くか.browseslistrcに書くか
目次 browserslistとは何か browserslistは%(パーセンテージ)で設定できるがシェア率はどこでわかるの? browserslistとは何か…