【HTML＆CSS】タグ: 説明リスト要素が万能すぎる
はじめに こんにちは。 最近、初めて使った<dl>: 説明リスト要素タグが個人的に万能すぎる！と思ったので、この記事ではそのタグの使い方を紹介したいと思います。 タグの説明は省かせていただきます。 …
View Article【初心者向け】知らなかった！justify-contentで垂直方向も簡単レイアウト！
こんにちは。 CSSでレイアウトを組む時にFlexbox(フレックスボックス)をよく使いますよね。 このFlexboxには、justify-contentというプロパティがあります。justify-…
View ArticleNext.jsのglobals.cssを読み解く
create-next-appでNext.jsのプロジェクトを作成すると、globals.cssにはデフォルトで次のような記述があります。この記事では、これらの意味を読み解き、自分でカスタマイズする…
View Articlecssのopacityについて理解する
概要 opacityは要素の不透明度を設定します 子要素に別の opacity 値を設定することで、親要素との相対的な不透明度を変更できますが、最終的な表示は親要素の opacity 値に制限され…
View Article【WordPress】 プラグインなしでバナーを固定する方法✏️
はじめに コードを直接記入してバナーを（上下に）固定する方法をまとめました！ 私は、HTML・CSS・WordPress初心者なので日々試行錯誤しながらLPの作成をしています！ そんな初心者な私でも…
View Articlecssのtransparentについて理解する
概要 transparentとは 色を決めるプロパティの値に使われるもので設定すると透明になります 透明度の調整ができないです 背景 🖼️ 業務のcssのコードを見ているとtransparentと…
View ArticleCSS3アニメーションの色変化を用いた錯視の実験
CSSアニメーションのカラーチェンジを使った錯視によって、キャラクターが流れるように光る的な感じみたいな風の効果を試す。 概要 オブジェクトの色が変化するとき、色変化のタイミングが背景色によって…
View Articlehtmlで縦書き推進はいいが、数字とアルファベットは縦にしたい
サンプル maxiphorism（世界の名言・金言） CSS .vertical-text { float:right; writing-mode: vertical-rl; /* 縦書き、右から左…
View Articlewebpack
▼webpackを使用する 1. npm init -y 2.WebpackとWebpack CLIをインストール npm install --save-dev webpack webpack-cl…
View ArticleChatGPTを使用して作成したブロック崩しの中を読んでみる。第2回_CSS編
初めに 前回はHTMLについてざっくり目を通して、要素の基本を確認しました。 今回はCSSについて学んでいきます！ さらに、前回の記事で教えていただいたCodePenを活用して、今後はコードの埋め込…
View ArticleTodoリストアプリTodoカンリをhtml,cssで作成する
初めに Webシステムの仕組みを知りどうすれば要件通りの開発ができるようになるかを考えれるようになるためにTodoリストアプリを作成することにしました。 バックエンド側のことはまず置いておいてデザイ…
View ArticleCSSでタグを選択する5つの方法
CSSでタグを選択する5つの方法 CSSでは、さまざまなセレクタを使用して特定のタグを選択できます。以下は、<img> タグを選択するための5つの一般的な方法です。 1. タグによる選択 すべての …
View ArticleCSSで縁取り文字を表現する方法 2024最新版
テキストの縁取りをCSSで表現しようとすると、軽くググった感じだと text-shadowを重ねまくる text-strokeで縁取りしたあと、before要素で同じテキストを描画する の２通りの方…
View Article複数のSimple-Keyboardを個別に隠せない
タブごとにsimple-keyboardを用意して、それぞれの可視性を操作しようとした時の備忘録 使ったライブラリ simple-keyboard JavaScriptを使っていい感じのキーボードを…
View Article損益分岐点計算アプリを開発しました
はじめに 10年以上前にPHPにて作成したミニアプリをJSで作り直しました。 デモ 画面： コード <!DOCTYPE html> <html lang="ja"> <head> <meta cha…
View Article本気のCSSチュートリアル
はじめに: CSSの歴史 CSSの歴史は、ウェブデザインとウェブ開発の進化を反映しています。この章では、CSSの誕生から現在に至るまでの発展を詳しく見ていきます。 CSSの誕生 CSSは1994年、…
View Article本気のフロントエンド初心者向けチュートリアル
第1章: HTMLの基礎 HTMLは、ウェブページの構造を定義するマークアップ言語です。タグを使って要素を作り、文書の骨格を形成します。 基本的なHTML文書の構造は以下のようになります： <!DO…
View Article初心者が作ったレシピ提案アプリ
初心者が挑戦するレシピ提案アプリ はじめに 最近、自炊を始めたのですが、冷蔵庫にある食材をうまく使い切れず、つい余らせてしまうことが増えました。そこで、手元にある食材を登録して、それに基づいてレシピ…
View Article絶対パスと相対パス
はじめに 開発の際に、基本的にはnode.js上で作業をしており、ファイルをローカルに落としてブラウザ表示するようにと指示が出たときに、CSSが上手く当たらず原因を調べたところ、サーバー上で作業をし…
View Articleブラウザで上にスクロールした時のリロードを制限する方法
はじめに ブラウザの上スクロールでリロードされることを防ぎたいと思ったことはありませんか？特にフォーム入力中やデータ編集中に、意図せずリロードが発生してしまうと、ユーザーの作業が消えてしまいます。こ…
View Article