Web担メモ
ログイン メモする
Web担メモ
  • HOME

Web担当者が、日々の業務の中で役立ったことをメモしています。


JavaScriptでタブ切り替え

U3
2020/7/1
2024/11/7

編集にはカテゴリー認証が必要です ▼受付終了にする

https://qiita.com/savaniased/items/41af6bb4023414ae16f8

コメント

コメントはまだありません。

関連する投稿

GitHubにコードをプッシュするだけでデプロイ（本番環境への反映）が完了するしくみ
Vercel: フロントエンド（React, Next.js等）に最適。GitHubと連携するだけで環境構築が不要

コーディング

  • 0
  • 3
  • 0
U3
DreamＷeaver：コメントアウトのショートカット
AdobeのドリームウィーバーでHTMLのコーディングをする際、”コメントアウト”はショートカットを使うと時間短縮になります。行コメントの切り替えWindowsの場合「Ctrl + /（スラッシュ）」Macの場合「Command + /」で選択範囲をコメントアウトできます。ブロックコメントの切り替えWin「Ctrl + shift + /」Mac「Command + Opt + /」

コーディング

  • 0
  • 8860
  • 0
U3
マテリアルアイコンがずれる
マテリアルアイコンだけが、一行の中で上に行ってしまう。vertical-alignだけでは横がそろわない。解決方法Googleから読み込まれるCSSのdisplay: inline-blockをdisplay: inline-flexに変更し、vertical-align: middleを指定します。https://studio-key.com/2053.html

コーディング

  • 0
  • 3753
  • 0
U3
【CSS】:checked　条件でスタイルを指定できる
:checkedラジオボタン（<input type="radio">）、 チェックボックス（<input type="checkbox">）、 オプションボタン（<select> の中の <option>）要素がチェックされていたり on の状態https://developer.mozilla.org/ja/docs/Web/CSS/:checkeddiv, select { margin: 8px; } /* チェックが入った入力のラベル */ input:checked + label { color: red; } /* チェックが入ったラジオボタン */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* チェックが入ったチェックボックス */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* 選択されたオプション */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } /* チェックボックスをチェックしたときに隠しコンテンツを表示 */ #expand-toggle:checked ~ * .expandable { visibility: visible; } E ~ F …… E要素の後ろにある同じ階層のF要素

コーディング

  • 0
  • 205
  • 0
U3
SVNバージョン管理：間違えて一括addしてしまった大量のファイルを取り消すコマンド
svn revert --recursive .まだコミットしていなければ上記で取り消しができる

コーディング

  • 0
  • 1
  • 0
U3
【HTML】1行目に入りきらない部分を…（三点リーダー）で表示：text-overflow
text-overflow入りきらない内容をどのように表示するかを指定するプロパティです。インラインの進行方向にブロックコンテナー要素をはみ出す内容にのみ作用しますellipsis三点リーダー（クランプ)を付けるコンテナーからテキストをあふれさせる指定overflow: hidden; white-space: nowrap; 2014年の記事https://tech.recruit-mp.co.jp/front-end/tips-ellipsis/HTML<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> CSS p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

コーディング

  • 0
  • 108
  • 0
U3
【解決】VSCodeで複数ファイルを横断して検索＆置換する方法　Option+Shift+F
対象フォルダを選択して、ショートカット（フォルダ内を検索）MacOption+Shift+FWinCtrl + Shift + Fファイルの除外もできます。

コーディング

  • 0
  • 3304
  • 1
U3
HTML：定義リストのddの中にul,liを入れ子にしてもよい
dtもddも、フローコンテンツ（ただし<header>、<footer>、区分コンテンツ、見出しコンテンツを除く。）を含むことができる。本記事の内容を訂正しました。ねこちゃん様、ご指摘誠にありがとうございました。参考元URLhttps://developer.mozilla.org/ja/docs/Web/HTML/Element/dtお詫び以前の記事では、dtにはul,liを入れ子にできないと記載していましたが、最新の仕様では誤りです。誤った内容を参考にされた方がおられたら申し訳ありません。2021.12.3

コーディング

  • 0
  • 2940
  • 0
U3
【CSS】英語と日本語を混ぜた要素の高さが合わない
日本語と英語のラベルを付けた要素を横並びにした時、英語の要素だけ縦幅が小さくなる。Androidタブレットと、MacOSのSafariFirefox と　Chrome　でフォントの表示が異なるようだ。解決法親要素に高さを指定した。文字の縦位置はpaddingで調整。font指定を変えたりしてみたが、彼方立てれば此方が立たぬで正解がわからない文字の高さをそろえるスタイルシートhttps://www.dspt.net/stylesheet_css/003/015.htmlvertical-alignが使えるのは、「インライン要素」と「テーブルセル」だけなのですhttps://techacademy.jp/magazine/19415英語と日本語を混ぜた要素の高さが合わないhttps://qiita.com/bbapexx/items/f6f4290545aeff54b356https://liginc.co.jp/designer/archives/36

コーディング

  • 0
  • 1758
  • 0
U3
【解決】【CSS】Safariでマテリアルアイコンが表示されない
iPad、iPhoneでword wrap等の指定された要素に関わる一部のGoogleマテリアルアイコンが表示されませんでした。同ページ内の別のマテリアルアイコンが表示されているので、前後のCSS指定が関わっているのだと思います。CSSに以下を追加したら、表示されるようになりました。.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } 参考サイトによると、GoogleWebFonts経由で導入するときは必ず追記してくださいということでした。参考URL（英語）https://stackoverrun.com/ja/q/9937461Googleマテリアルアイコンの導入手順https://qiita.com/haru_tp/items/5b8cdc4cb9b7b3223465

コーディング

  • 0
  • 3348
  • 0
U3

アクセスランキング

1

Google Playストアでアプリを一時的に非公開にする方法

6

2

Excelで一つの値を一番下のセルまでコピーしたい時

6

3

rakuten handを初期化しても電話番号の情報が残っている

6

4

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

5

5

Webデザイナー＋コーダー＝Readdy

5

6

ホームページで複数ページのヘッダーとフッターを共通にするサンプルコード

5

7

NEWマークを任意の日数だけ表示させる（JavaScript）

5

8

★リスト表示をjQueryで絞り込んで表示させる方法(フィルタ機能)

5

9

Google広告で領収書や支払明細を発行したいとき

5

10

顧客管理：BASEの例

5

11

Excel：都道府県をプルダウンで選択すると、その都道府県の市区町村だけが次のセルの選択肢として出てくる

5

12

モニター（ディスプレイ）が突然消えたりついたりを繰り返す

4

13

DreamＷeaver：コメントアウトのショートカット

4

14

[APIを叩く]ってどういう意味?

3

15

Criteoという広告が勝手に表示される

3

16

エンティティ文字とは

3

17

Googleアナリティクス：通貨を日本円にしたい

3

18

Firebaseとは〜Googleが提供するバックエンドプラットフォーム（mBaaS）

2

19

App Storeでアプリを一時的に配信停止にする方法

2

20

Excelで指定の行に飛びたいとき（例えば2300行目とか）にパッと移動できる方法は

2

コメントランキング

1

AIO (AI最適化) 重点要件

1

2

AIコピペハラスメントとは？〜AIが生成した文章をそのまま送るのはやめよう

1

3

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

1

いいねランキング

1

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

2

2

Looker Studio（Googleが無料で提供するBIツール）

1

3

AIコピペハラスメントとは？〜AIが生成した文章をそのまま送るのはやめよう

1
この投稿者に問い合わせ
この投稿者に問い合わせ

当サイトでは、Cookieを使用しております。

すべての Cookie の使用に同意いただける場合は、下記の「同意します」をクリックしてください。

  • シェア
  • ログイン
  • 利用登録する
  • ログアウト
  • マイアカウント
  • メモする
  • このサイトについて
  • 問合せ
Copyright © Web担メモ
シェア
いいね！ X このエントリーをはてなブックマークに追加 LINEで送る