未経験エンジニアがHTMLとCSSを勉強する①
HTMLとCSSを勉強しています。 CSSは苦手なので、作ったものをアウトプットしようと思います。 @charset "utf-8"; /* 共通部分 */ html{ font-size:100%; …
View Articlecocoonのカスタマイズでヘッダー画像の高さをMax800pxにしたとき
cocoonのカスタマイズでヘッダー画像の高さをMax800pxにしたとき、横幅1024pxで下に隙間ができる件で、色々調べました。 cocoonを使ってウェブサイトを作っていますが、今回ヘッダー画…
View Article[rails7]背景画像が表示されない件
目的 rails7でwebアプリを作成している途中で、トップページに背景画像を挿入する際に何をやっても挿入されない事態に陥りました。 その問題の解決記事も少なく少しハマったので備忘録として残したいと…
View Articleクラウドストレージサービスを自作した話
はじめに 結構前に作りました。当時は金がなく、google driveを契約できるほどの経済力が全くなかったのですが、その時思いました。無いなら自分で作ってしまえばいいと。 ハードウェア 都合のいい…
View Article【CSS】MacとiPhoneで異なる電話番号の見た目を揃える方法
はじめに 本記事は、iPhoneで見ると「電話番号が勝手に青色になってしまうな〜」とか、「なんか下線ついちゃうんだけどなんで？」という現象をCSSを使って解決しよう！という記事です。 目次 どんなこ…
View Article[未経験]未経験Webエンジニアのアウトプット①
■自己紹介 未経験Webエンジニアです。 大手sierから自社開発系web企業に転職するために学習しています。 学習したことをアウトプットしています。 ■これまでの学習教材 最初に「とほほのWWW入…
View Article【ミニアプリ作成】ラジオボタンを使用したクイズ【HTML,CSS,JavaScript】
HTML、CSS、JavaScriptの学習を終えて何か作ってみようと思い、ミニアプリ３問クイズを作ってみました。 備忘録を兼ねて記載。 ラジオボタンを使用したクイズ 作ったミニアプリは3問の４択ク…
View ArticleCSSが適用されない事象について
記事を書こうと考えた背景について JavaScriptでTODOアプリを作成する前にhtmlとcssで画面の全体像を作成していて書いたcssが想定通りに表示されなかった為 cssが適用されなかったと…
View Articleモーダルのお話
HTMLとCSSだけでモーダルが作れるようになったらしい。 フロントエンドになってはや数年、自作やらプラグインやらで対応してきた私には「本当ですか…？（疑い）」という気持ち。 実際に打って自分で見て…
View Articleホームページを眺めながらCSS設計の初歩を学ぼう
はじめに 今回は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 とりあえずデザインやデモサイトを見ながらHTML、…
View ArticleTabキーによるフォーカス・ナビゲーションについての覚え書き
基本用語 Webブラウザの閲覧時に、Tabキーを押して一定の順序でフォーカスを移動させることを「シーケンシャル・フォーカス・ナビゲーション」などという。 フォーカスしていることを表す青い枠は「フォー…
View ArticleSwiper.jsのナビゲーションの色を変える
検索しても解決方法が見つからなかったので､メモ ナビゲーションの色とナビゲーションボタンのサイズを変更しています｡ .swiper-button-prev { background-image: u…
View Articleチェックボックスのテキストが同じじゃなかったらボタン2が非表示になりツールチップが出る
<!-- チェックボックスグループ --> <div> <input type="checkbox" id="option1" name="options" value="option1" /> …
View Article【JavaScriptメイン】ラジオボタンを使用したクイズ【ランダム表示】
１つ前の記事でクイズを作成したことを書いたのですが ありがたいことにコメントでいただき、学習してみました。 コード紹介 データをJS側に持たせ、配列を駆使して問題や選択肢をランダムに表示できるように…
View Articleフローティングバナー・フローティングボタン実装時に参考にしたサイト
フローティングバナー・フローティングボタン実装時に参考にしたサイト 画面をスクロールした時に追従するバナーやボタンをCSSで作る方法
View Article:first(last)-childと:first(last)-of-typeの違い
コーディングの際に「:first(last)-child」「:first(last)-of-type」が効かないということがあったため、改めてまとめます。 スタイルの仕様（:first(last)-…
View ArticleAmazon Prime VideoのNext upを消すCSS
TL;DR StylusみたいなCSSをいじれる拡張を入れて、 ドメイン上のURL- www.amazon.co.jp .atvwebplayersdk-nextupcard-wrapper { v…
View Article[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする
2024年6月11日リリースのChrome126**から、View Transitions APIがパワーアップし、別ページへの遷移でもを使うことができるようになったので紹介したいと思います。 Vi…
View ArticleHTMLを素早く書く方法 (Emmet)
はじめに はじめまして！sato (@ameRese) と申します。 プログラミングは過去に少し仕事で関わっていた程度ですが、 最近本気で勉強し直そうと考え、現在はHTMLやCSSの勉強からやり直し…
View Article【 React 】プロジェクトでのCSS変数の活用- Tailwind CSSとStyled Componentsの一元管理
はじめに 過去の投稿↓で、CSS変数の活用した Tailwind CSS と Styled Components の調査を行っていました。 https://qiita.com/Tateishi081…
View Article