background-size > 100% だと background-position: n% が逆向きになる
※ 未解決です 確認環境 Firefox 108.0.2 Google Chrome 108.0.5359.125 目的 background-image を設定したうえで background-p…
View Article【JavaScript】アコーディオンUIの作成！
1日1UI投稿！ 2日空いてしまいましたが、UI投稿します！ アコーディオンUI 本日はアコーディオンUIを作成しました。 See the Pen アコーディオンUI by ri-tama (@ri…
View ArticleProgate HTML&CSS 中級編で学んだこと
HTMLでクラスを付ける方法 タグにclass="(クラスの名前)"と書く。 ※ダブルクオーテーション(")を忘れがちなので気を付ける CSSでクラスを指定する方法 クラス名の前にドット(.)を書く。 HTML&CSSの初級編をやったのが1カ月ほど前だから忘れていました…
View Article【JavaScript】タブメニューの作成
1日1UI投稿！ 本日も投稿します。 タブメニュー 完成品はこちら。 See the Pen Untitled by ri-tama (@ri-tama) on CodePen. 苦戦続きの毎日です。…
View Articlesass mixin のあれこれ
Sass用 mixin mixinに追加する内容は増えてきたので、よく使う部分を覚え書き media screenの設定 //------------------------------------…
View Article全くの未経験からエンジニアに！ ３ヶ月で学んだことの整理
はじめまして もしゃねこです！ この記事の内容 自己紹介 Qiitaを始めた理由 ３か月で学んだこと一覧 現状の課題 自己紹介 はじめまして！もしゃねこです(=^・・^=) 全くの未経験からエンジ…
View Articleカルーセル（スライダー）を簡易に作ってみる
カルーセル（スライダー）を簡単に作ってみる 出来上がったやつのイメージはこんな感じ HTML に枠を準備 <!doctype html> <html> <head> <meta charset="U…
View Article【HTML/CSS】ul liの点を表示・非表示する方法
本記事はul liの点を表示・非表示する方法を紹介します。 具体的には下記を参照していただければと思います。 ul liの点を非表示する方法 <ul> <li>内容1</li> <li>内容2</l…
View Article画面遷移時・ページ読み込み時に一瞬表示が崩れるのを防ぐ方法
サイトを開いた時、ページ読み込み時に一瞬表示が崩れたり、アニメーションがチラつくことありませんか？ 「一瞬だから別に良くね？」 と思ったらダメです。 画面遷移時・ページ読み込み時に一瞬表示が崩れる理由…
View Articlelinear-gradientの使い方
初投稿！ なぜかいつも忘れちゃうからメモしときます。 ・線形のグラデーションを表示 linear-gradient（ 方向, スタートの色, ゴールの色）; 例）background: linea…
View ArticleMac Safariのパスワードでinput(type="password" style="text-align:...
はじめに style="text-align: center;"のinputを複数並べた際、MacのSafariでtype="password"のinputだけカーソルが少し左にずれていることに気づ…
View Article僕のHTML5 プロフェッショナル認定試験 レベル1合格記
HTML5プロフェッショナル認定試験 レベル1を受験してきました。 受験の経緯・対策・勉強の中で気づいたことなど書き留めます 筆者について IT歴5年（社会人歴も5年）のフィジカル系エンジニア。 こ…
View ArticleCSSアニメーション
よく忘れちゃうからこれもメモしておきます。 transitionと@keyframesの違い ・transitionプロパティは:hoverなどのトリガーが必要 ・transitionプロパティは始…
View Articlehtml { font-size: 62.5%; } は嫌いだ - デフォルトを変更するのは悪手です
font-size: 62.5%;というテクニックがありますよね デフォルト値に手をかけるので、超絶嫌いなテクニックのひとつです なのにですね、あちこちで超見かけるんですよ。 検索かけても「便利！」…
View Article画像をクリックしたら複数画像が新たな要素に複製（コピー）される仕組み
本稿では、複数のグループからなる画像一覧のうち、１つの画像をクリックすると同じグループに属しているすべての画像が新たな要素に複製される仕組みを作成する。見たほうが分かりやすいのでこちらのサンプルを参…
View Article円形スライダーをCSSの三角関数を使ってつくってみた
CSSで三角関数がサポートされたらしい いつもお世話になっているColissさんより 2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるように…
View Article【CSS】Youtube動画の埋め込みにpadding-topは使わない時代
「なんでYoutubeの埋め込みごときに、padding-top でダラダラと書かないといけないの？」と思ったことありませんか？ 僕はずっと思ってました（ ; ; ） 今回はそれを覆すプロパティを紹…
View Article【JavaScript】ハンバーガーメニューの作成
1日1UI投稿 かなり時間が空きましたが、本日久しぶりに投稿します。 ハンバーガーメニュー 最初のころに作ったハンバーガーメニューとは違うハンバーガーメニューを作成しました。 以下完成品です。 Se…
View Articleモーダル機能 複数 レスポンシブル
<div class="main-content"> <img class="modal-open img-hover" src="#" alt="#" /> <div class="modal-c…
View Articleさようなら「Try TweetDeck Preview」ボタン
こんにちは、Ctrl(@hiyoctrl)です。 Better TweetDeckの「Try TweetDeck Preview」ボタンを非表示、がなぜか効かないので.js-gryphon-beta…
View Article