Qiita の kbd タグの見た目調整 by CSS (User style)
背景 キーボードのショートカットなど Qiita にメモしたりしてますが、 kbd タグにスタイルが当たってなくて微妙だったので User style を書きました。 User style は Go…
View Article【初心者】初めてのLPコーディングは学びだらけ！
初めてLPコーディングしてみて 初めてのLPデザインを終え、ついにコーディング！ 躓いては解決するをとにかく繰り返しまくったので、今回学んだこと、躓いたポイントをまとめることで、皆さんの学習の一助に…
View ArticleCSS カスタムプロパティ（変数）を使ってカテゴリーごとに色分けしてみた。
はじめに カテゴリーやコンテンツごとに色分けしたいけど、色数が増えるほど、色を振り分けるCSSの記述も冗長になってしまうということはないでしょうか。 その悩みをCSSカスタムプロパティ（以下、CSS…
View Articlecssでフォントサイズを変更する方法 px % rem の使い方
今回はcssで文字の大きさを変更する方法について学びました。px % rem 3種類の使い方について解説します。 フォントサイズの基準を指定しない場合 フォントサイズを特に指定しない場合、ブラウザの…
View Articleカレンダーを作るー1
お疲れ様です。 シンプルカレンダーについていろいろ調べていましたが、データが古くletではなくvarが使われていたのもあり、chatGPT先生にコードを書いてもらいました。 まずはそれを見ながら分か…
View Articlecss font-familyについて
総称フォントの使い方 ""を使わずにフォントの種類を指定することができます。 ユーザーが使っているデバイスや環境によって指定したフォントを使えない場合の保険として見た目をある程度制御することができま…
View Articlecss font-family フォントスタックとコールバックフォント
フォント名の指定方法 今回はフォント名の指定の仕方について勉強しました。前回の記事では総称フォントについて投稿しましたが、コールバックフォントとの違いについても解説します。 コードの書き方 フォント…
View Articlecss リストの作り方 list-style-type プロパティ
リストのスタイルを指定 リストの項目の先頭に表示されるマークは"リストマーカー"と言われています。 リストマーカーの指定は"list-style-type"を使います。 リストの作成には olタグ …
View Articlecss list-style-position list-style-image 編
リストマーカーの表示位置を変更する方法 list-style-positionプロパティを使うことでリストマーカーをどの位置に表示するかを指定することができます。 指定方法は2つです outside…
View ArticleChatGPTを使用して作成したブロック崩しの中を読んでみる。第1回_html編
初めに 先日、ChatGPTにブロック崩しゲームを作成してもらい、Webページに埋め込むことに成功しました。 機能的には問題なく動いていますが、私自身がHTML、CSS、JavaScriptに関する…
View Articlewebページ作成：背景画像が画面全体に表示されなかった時の解決方法
練習課題でwebページを作成して今す。 問題が起きたのは背景画像を設定した後のことでした。 HTMLもCSSも記述の入力ミスは直したし、うまく表示されるはずだーと思っていたら、 タイトルの通り、背景…
View ArticleCSS設計について整理してみる① ～なぜCSS設計が必要になったのか～
本シリーズについて こちらの「CSS設計について整理してみる」シリーズは、完結できるかわかりませんが、少しずつ進められたらと思っております！（私個人の備忘録的な内容です） 内容は、「CSS設計完全ガ…
View ArticleGASを触っての雑多なまとめ（基礎知識）
基本知識関連 GAS (Google Apps Script) について何も知らなかった私が簡単な開発を通してポイントだなと思った点を挙げております。 1. GAS の "スプレッドシート" と "…
View Article[python]Flaskで作る簡単な連絡先管理アプリと、HTML・CSS分離によるコードの管理
はじめに 今回は、PythonのWebフレームワーク Flask を使って、簡単な連絡先管理アプリを作成し、その中で HTML と CSS を分離してコードの管理を改善する方法について説明します。 …
View ArticleCSS 子要素の表示の優先度を指定する。orderプロパティについて
最初に 今回はorderプロパティについて解説します。今現在自作ブログの制作にチャレンジしています。レスポンシブデザインを作る際に表示の順番が上手くできませんでした。 ここでorderプロパティを覚…
View Article社内BINGOゲーム大会用にルーレットアプリ開発しました
はじめに 全社研修の際に、BINGO大会を行うので、そのためのルーレットを開発しました。 サンプル 初期画面： 会議室の大画面に映すので、左右にBINGOの一覧表を作成しています。 仕様 ボタン ス…
View Article【CSS】FlexBoxとメディアクエリ
目次 説明 書き方 主軸と交差軸 主要プロパティ FlexBox 説明 複雑な配置を簡単に行えるようにするために使われる。 書き方 display: flex; Flexboxを使うには、まず親要素…
View Article【CSS】ナビゲーションバーを見た目を整えて、レスポンシブにする
ナビゲーションバーを見た目を整えて、レスポンシブにする before after レスポンシブ コード <body> <nav> <a href="#home">Home</a> <ul> <li> …
View Article要素を非表示かつスペースをなくして値を送信したい
背景 業務で以下のチェックボックスを削除する依頼が入りました。 ビジネス要件の為、現時点では抽象的な表現になっています 後続で具体的な対応について説明します 前提） このチェックボックスはformで…
View ArticleReactのスタイルの適用方法をまとめる
スタイルの当て方 いくつかあるようなので、使ったものだけ備忘としてまとめる。 インライン タグのstyle属性にJavaScriptのオブジェクト表記でスタイルを指定する方法。 注意点として、要素名…
View Article