iOSではposition:absolute;を適用した要素がタブバーに重なることがある
.parent { position: relative; width: 100vw; height: 100vh; } .child { position: absolute; bottom: 5…
View ArticleCSSの基本② よく使用される装飾や配置のプロパティ
本記事ではよく使用されるプロパティをご紹介します。 ここではわかりやすいように一部内部参照でHTMLファイル内にCSSを記載していきます。 色の指定 まず、CSSにおける色の指定方法は２種類あります。…
View ArticleCSSの基本③ セレクタ・擬似クラスの指定方法
本記事ではCSSにおいて要素やクラスなどを指定する役割を持つセレクタと、擬似クラスについて解説していきます。 （ここではわかりやすいように一部内部参照でHTMLファイルに直接CSSを追記しています。）…
View ArticleRailsでfile_fieldをいい感じに装飾する
株式会社TECH LUCKという会社で代表兼エンジニアをしている齊藤です。 DXプロジェクト、開発プロジェクト、Rails開発などでお困りごとがありましたら弊社HPからご相談をいただけますと幸いです。 以下のような問題に対応することが可能です…
View Articlecursorでwebサイト作成をしてみた
cursorのダウンロード ↓以下のリンクからダウンロードできます。 https://www.cursor.com/ AIは無料で3週間ほど使えたと思います。 cursorの使い方 cursorはV…
View ArticleWordPressの特定ページにだけCSSを適用する方法
はじめに WordPressでCSSを追加する方法として、外観→テーマ→カスタマイズ→追加CSSにCSSを追加する方法が最も取られています。(ここに記載したCSSはテーマのアップデートをしても消えな…
View Article[JavaScript][L2] ボタン押下によりコンテンツ(div>ul>li)を削除する
実施条件 [JavaScript][L1] テキストボックスのコンテンツ(div)から別のコンテンツ(div)に転記するを理解していること 環境 MacBook Pro (2.3 GHz 8コアIn…
View Article[JavaScript][L3] ボタン押下によりコンテンツ(div>ul>li)を別コンテンツ(div>ul>li)に移動する
実施条件 [JavaScript][L2] ボタン押下により中コンテンツ(ul)内の小コンテンツ(li)を削除するを理解していること 環境 MacBook Pro (2.3 GHz 8コアIntel…
View ArticleGoogleマップ読み込み・サイズ調整の方法
はじめに 学んだことを忘れないように備忘録として残しています Googleマップの埋め込みサイズ調整は直接読み込む際に指定ができますが、CSSで後から調整する方法も便利なので本記事ではその方法をご紹…
View ArticleCSSの基本④ FlexBoxの書き方
本記事ではCSSにおけるFlexBoxの書き方をまとめていきたいと思います。 FlexBoxについて FlexBox …Webサイトの装飾を行うCSSにおいて、配置や方向、順序、サイズなどを柔軟に調…
View ArticleHTML,CSS,JavaScriptの勉強メモ
最終更新日：11/15/2024 HTML <!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name=…
View Articlelinear-gradient()の使い方３選
はじめに 学んだことを忘れないように備忘録として残しています linear-gradient()は主にグラデーションを作るCSSプロパティです。 本記事ではそれ以外の使い方も併せてざっくりと紹介して…
View Article横棒って200本あんねん【Markdown AI】
すみません．200本も無いです． きっかけ 論文を書いている時に数字の範囲を示す横棒についての指摘をされた．波線がダメなのは知っていたが，ハイフンではなくエンダッシュを使うようにと……．なんか長さと…
View ArticleSassによる効率的なレスポンシブ対応！おすすめの書き方
はじめに こんにちは。 Webサイトの見た目をデバイスごとに最適化するレスポンシブ対応。この記事では、Sassの機能を活用して、効率よくレスポンシブ対応を実装する方法をご紹介します。これからSass…
View Article[JavaScript][L4] コンテンツ(div>ul>li)の生成機能を共通化する
実施条件 [JavaScript][L3] ボタン押下によりコンテンツ(div>ul>li)を別コンテンツ(div>ul>li)に移動するを理解していること 環境 MacBook Pro (2.3 …
View ArticleCSSのスタイル適用の優先順位について
はじめに HTMLでマークアップした要素に対してCSSを適用させようとすると、CSSがうまく適用されなくてデザインが反映されないという状況に陥ったので原因を調べているとどうやらスタイルの適応の優先順…
View ArticleHTML,CSSの理解を少し深めるまで(その1)
前置き HTML,CSS の勉強をしたいなと思った。 Frontend Planet なるものがあると聞き、トップにあったやつを触って勉強した。 この記事は、特に頭に残ったやつをまとめたもの。 ↓参…
View ArticleHTML CSS JavaScript
はじめに HTML,CSSにおけるJavaScriptの役割使い方を調べました。 HTML,CSS,JavaScriptの役割 HTML: Webページの構造。見出しや段落、ボタンなどの要素を配置し…
View Articleclsxの使用例
clsxとは何か clsxは、Reactやその他JavaScriptでよく使用される軽量なユーティリティライブラリである。 cssクラス名を効率的に結合・管理するために使われる。 主に、条件付きでク…
View ArticleWebページ模写の方法（フロントエンド）
はじめに Yasuと申します．2週間ごとに学習成果をアウトプットする目的で記事を作成しています．自分のための記事にはなりますが，同じように学習している初学者の方にも参考になれば嬉しいです． フロント…
View Article