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

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


JavaScriptでタブ切り替え

U3
2020/7/1
2024/11/7

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

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

コメント

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

関連する投稿

エンティティ文字とは
半角の記号とか数字とかマークとかをエンティティ文字という。これが入るとプログラムの動作に異常がでたりすることがある。テスターの人はエンティティ文字を入れた時も正常に動くかを確認項目に加えたほうがよい。 エンティティ文字の一覧http://w-d-l.net/html__entities/

コーディング

  • 0
  • 180
  • 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
  • 3361
  • 0
U3
NEWマークを任意の日数だけ表示させる（JavaScript）
お知らせ一覧などで、一定期間だけNEWマークを表示させたい場合などに使えます。https://www.tam-tam.co.jp/tipsnote/javascript/post691.html

コーディング

  • 0
  • 854
  • 0
U3
【CSS】リンクの時は外部リンクアイコンのマークを自動で付ける
target=””「別ウィンドウがひらく」ことを明示するアイコンをつける★【外部リンクのアイコンマーク】CSSコピペでの作り方🤔【必要性とSEO効果も解説します】https://isamulife.com/seo/external-linkCSSの書き方a[target="_blank"]:after{content:url(/icon.png);margin:0 3px} 無料アイコンダウンロードサイト★https://icooon-mono.com/新しいウィンドウで開くボタンhttps://icooon-mono.com/12229-%e6%96%b0%e3%81%97%e3%81%84%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%81%a7%e9%96%8b%e3%81%8f%e3%83%9c%e3%82%bf%e3%83%b3-1/マテリアルアイコンの場合マテリアルアイコンは軽量、アクセシビリティもよしhttps://webtan.impress.co.jp/e/2016/06/28/23209<i class="material-icons">open_in_new</i> マテリアルアイコンの導入方法https://laboradian.com/how-to-use-material-icons/

コーディング

  • 0
  • 824
  • 0
U3
【CSS】2020年に最適なfont-familyの書き方
CSSのフォント指定は時代に合わせて刷新しましょうという記事です。とても参考になりました。https://ics.media/entry/200317/上記サイトでおすすめのフォント指定は下記です。メンテナンス性を重視したフォント指定です。body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }

コーディング

  • 0
  • 108
  • 0
U3
Font Awsome サイズを変更するクラス
<i class="fas fa-camera fa-xs"></i> <i class="fas fa-camera fa-sm"></i> <i class="fas fa-camera fa-lg"></i> <i class="fas fa-camera fa-2x"></i> <i class="fas fa-camera fa-3x"></i> <i class="fas fa-camera fa-5x"></i> <i class="fas fa-camera fa-7x"></i> <i class="fas fa-camera fa-10x"></i>

コーディング

  • 0
  • 44
  • 0
U3
Cloudflare Pages
Cloudflare Pageshttps://www.cloudflare.com/ja-jp/developer-platform/products/pages/無料で商用利用可能、転送量で課金されないAWSより使い方もわかりやすいようです Cloudflare Pages+ Next.js + microCMS

コーディング

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

コーディング

  • 0
  • 3883
  • 0
U3
マテリアルデザイン：Bootstrapの管理画面（ダッシュボード）の雛形
レスポンシブデザインのBootstrapで、コントロールパネル（Admin画面）の雛形がいろいろ出ています。良さそうなものをいくつか紹介します。SB Admin 2https://startbootstrap.com/template-overviews/sb-admin-2/デモページhttps://startbootstrap.com/previews/sb-admin-2テーブルのリストも、DataTables というjQueryのプラグインが使えるため、リストのソート機能などの表示、非表示もtrue または　false で切り替えが簡単。参考サイトhttps://www.bestppp.com/tips/tips_007.htmlhttps://bagelee.com/design/bootstrap/material-dashboard-github-trending/https://goworkship.com/magazine/bootstrap-admin-template/

コーディング

  • 0
  • 443
  • 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
  • 1880
  • 0
U3

アクセスランキング

1

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

26

2

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

11

3

自分のチャンネルのYouTube動画に広告が表示されないようにしたい

7

4

VSCodeで複数ファイルを横断して検索＆置換する方法　Option+Shift+F

7

5

ロケットチャットの新規通知をデスクトップ表示させるには

5

6

Facebook広告：Facebookピクセルとは？

3

7

【CSS】リンクの時は外部リンクアイコンのマークを自動で付ける

3

8

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

3

9

システムの受託開発での「準委任契約」で気を付けることは？

2

10

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

2

11

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

2

12

WordPress：Elementorでエラー &rdquo;Your site doesn&#039;t have a default kit&rdquo;

2

13

SafariでFacebookの埋め込みが表示されない

2

14

Adobe：PhotoshopでAdobeCCのログイン画面でIDが入力できない

2

15

Font Awsomeの接頭辞　fas far fal fab の違い

2

16

アトミックデザインとは

2

17

Adobe XD：オブジェクトが勝手にパスに変換されてしまう

2

18

Macのテキストエディットで.txtファイルを作る

2

19

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

2

20

Google広告：別のキャンペーンの広告をコピー+貼付け

2

コメントランキング

1

「２人の営業パーソン」のクイズ

1

2

AIO (AI最適化) 重点要件

1

3

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

1

いいねランキング

1

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

2

2

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

2

3

「２人の営業パーソン」のクイズ

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

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

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

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