【CSS】bodyの罠
実際はbodyが悪いわけではなくただの仕様ですが、知らないとbodyが悪いように見えます。 その1 marginが0でない 例えば以下のようなhtmlの場合、左上端に隙間ができます。 <!DOCTY…
View Article【CSS】position:relative, absolute, fixed, stickyの違い一覧表
はじめに positionは対象要素に設定するもの？親要素に設定するもの（例えばrelativeなど）？ 何を基準に位置指定されるの？ よく分からなかったので以下を参考に整理してみました。一覧表のみ…
View ArticleCSSで画像のホバー効果を作成する方法
はじめに この記事では、CSSを使用して画像のホバーエフェクトを作成する方法について説明しています。JavaScriptを必要とすることなく、CSSだけでこれらのエフェクトを作成できると述べています…
View ArticleCSSの疑似クラスhasを使ってHTMLでテーブル行に背景色をひく
HTMLでテーブル組むとき「チェックボックスにチェックしたら、行全体に背景色を引きたい」というときがあります。昔はJavaScriptとの組み合わせでしたが、CSSの疑似クラスである has で実現…
View Articleプログラミング入門コース［2週目］
プログラミング未経験者でもたった8週間でWeb開発可能！ おっさんでもこうなれるのか という思いで5／29日（月）からスパルタコーディングクラブの プログラミング入門コースにて学習を開始しました！ …
View ArticleBootstrapをオフライン環境で使用する方法
はじめに Bootstrapは<head>内に下記を追加するだけで使用できますが、こちらはCDNを利用した方法のためオフライン環境では使用することができません。 <link href="https:…
View Articleプログラマーへの道 #17 CSS（プログラミング入門）のメモ
参考にした記事 https://youtu.be/cvwV9Wkc6dM 学んだこと ・インライン定義の書き方。 ・style定義の書き方。 ・CSSのセレクターの種類。 ・CSSを別ファイルで定義…
View Articlefont-familyの間違いやすい設定
まずはこちらの設定をみてください。 みなさん、この設定のどこがおかしいか分かりますか？ 実は"sans-serif"というのが間違っています。 え、"Montserrat"は二重引用符で囲ってるから…
View ArticleJavaScript で画像・動画・音声ファイルをドラッグ＆ドロップしてプレビュー表示
画像・動画・音声ファイルをドラッグ＆ドロップしてクライアントのみでプレビュー表示までやってみる サンプルは以下のページ https://sueasen.github.io/javascript-ex…
View ArticleFlexboxを使用した複数カラムレイアウトの作成方法
概要 HTMLとCSSを使用して複数カラムレイアウトを作成する方法を紹介します。ここではFlexboxを用いてレイアウトを作ります。 2カラムレイアウトの場合 1. HTMLの記述 まず、以下のよう…
View Article【Shopify】画像バナーのカスタムCSSで画像サイズを変更する方法
画像バナーのカスタムCSSで画像サイズを変更する方法を解説します。 バナーの高さを「小」に設定し、下記のコードをカスタムCSSに追加します。 .banner__mediaに設定するbackgroun…
View Article1冊ですべて身につくHTML & CSSとWebデザイン入門講座を買ってみた
初心者ですが、ブログに役立てようと思って 「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」を購入してみた。
View ArticleCognitoのHostedUIがダサいのでChatGPTにCSSを作ってもらう
CognitoのHostedUI、あまりにもダサい いきなりですが、以下がデフォルトの状態です。 うーん。。 まぁ使えればいいよ、というのはそれはそうなんですが… てかHostedUIて何 Cogn…
View ArticleSalesforce VisualforcePageで外部CSS, JSファイルを読み込む方法
Salesforce VisualforceでカスタムなCSSファイル, JSファイルを読み込む方法 目次 前提条件 Step1 前提条件 ・開発手法：VScode Step1（完結） VScode…
View Articlebootstrapのclassだけでdiv要素全体にリンクをつける
結論 position-relativeをclassに入れたdiv要素の内部に、stretched-linkをclassに入れたa要素を入れればいいです。また、position：relativeをc…
View Articlebackground-colorとbackgroundの違い
概要 この記事では、CSSのbackground-colorとbackgroundの2つのプロパティの違いについて記述したいと思います。 background-color background-co…
View Articleまた新しくチェックボックスを作った話
TL:DR カスタムチェックボックス(Custom Checkbox)を作成する際は、display: none, visible: none を使わずに、appearance: none か op…
View Article【自作関数】「スクロールするとフワッと表示する」が簡単に実現できるjavascript関数を作った
はじめに スクロールしていくと、ふわっと要素が登場するサイト、カッコよくないですか? 「いいなー」と思ったので、作ってみました。 構想 cssをできるだけ書かずに、javascriptを理解していな…
View Article今から始める - HTML / TypeScript / CSS 【経験0年】
概要 最近Tauriを使いアプリを作りたいと躍起になっている。 Rustも触ったことなかったので勉強し、いざ少しでもアプリを作ってみようとしたが、WEBアプリの知識も必要だということに気がついた。 …
View Article