JQueryとは？

# JQuery
JavaScriptのライブラリです。

「ライブラリ」とは、ある程度まとまったプログラムをあらかじめ作ってくれている
ファイルのこと。
つまり、jQueryは、JavaScriptを使いやすいように拡張してくれているもの。

javascriptで１０行→JQueryでは３行で済む。

# HTML&CSSの操作
HTMLのheadタグ内にjQueryライブラリーを読み込む。詳細は「スライドショープラグイン」で。

jQuery

“`html

“`

# JQueryCDNプラグイン

### JQueryをCDNで読み込む方法
CDNとは・・・
「CDN」はContent Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信
する仕組みのこと。
特にjQueryなどで利用する場合は、ソースファイルをネット経由で使えるためファイルをダウンロードする必要がない。「JQuery CDN」と検索すれば出てくる。
!

トグルリスト（アコーディオン）に transition: height が効かない時の裏技

### 前置き（transition による遷移アニメーション）

アコーディオンにアニメーションをつけたいとき、
cssの`transition`を使えば簡単にアニメーションをつけられます。

“`scss:scss
.toggle-block {
overfllow: hidden;
height: 0;
transition: height 0.3s

&.is-active {
height: 300px;
}
}
“`
上記の`toggle-block`に`is-active`を着脱すれば、
0.3sかけて height が伸び縮みしてくれます。

### transition設定してもアニメーションにならないケース
“`scss:scss
.toggle-block {
overfllow: hidden;
height: 0;
transition: height 0.3s

&.is-active {
height: fit-content;
}
}
“`
これの場合はうまくいきません。
`transition`が効くのは「数値同

ChatGPTでBootstrapを使ったHTMLのモックを作ってみる

画面のモックを作るツールはいろいろありますが、簡単にモックを作る方法としてChatGTPを利用する記事を見つけました。

参考 : [ChatGPTを利用して画面モックを爆速で作成する – Taste of Tech Topics](https://acro-engineer.hatenablog.com/entry/2023/10/13/150000)

「無料」で「インストールや環境構築不要」がよいので、無料版の「ChatGTP 3.5」を利用します。
また、モックツールを検索するとちょくちょく見かける「Bootstrap」も使ってみました。

# ログイン画面
まずはシンプルに「Bootstrapを使ったログイン画面のhtmlを書いて」とGhatGTPに伝えるとこんな感じになりました。


GhatGTPの出力

ホームページでデフォルト時「テキスト編集カーソル」にしない方法

通常、何も指定しなければテキスト上にカーソルがあると「テキスト編集カーソル」になります。常に「テキスト編集カーソル」になっている事自体、コピーを促しているように感じてしまうのです(私だけではないはず)。


そこで、デフォルトでは「テキスト編集カーソル」にしない方法を紹介します。

※ これは2016-03-29に個人ブログで公開した記事を移植したものです。

## CSS を用いた方法

CSSに次の1行を追加するだけです。

“`css
html {
cursor: default;
}
“`

## HTML を用いた方法

HTMLのどこかに次の1行を追加するだけです。

“`html

“`

## 結果

テキストの上にマウスを置い

CSSで勝手に英語大文字になってしまう原因と対処法

WordPressでタイトルが勝手に英語大文字になってしまう原因と対処方法を紹介します。

※ これは2016-03-10に個人ブログで公開した記事を移植したものです。

## 現象

とあるWordPressテーマを適用すると、タイトルの英語部分が勝手に大文字になってしまいました(画像はイメージです)。


↓


## 対処方法

CSSによって大文字に変更されています。よって、テーマのCSS上に存在する、下記2つのスタイルをすべて削除す

フロントエンド勉強会 DOM操作

# 概要

[フロントエンド勉強会](https://qiita.com/masayasviel/private/0e5a403388509e98313d)
各課題を通して、[DOM](https://developer.mozilla.org/ja/docs/Glossary/DOM)操作の感覚を掴む。

# 環境構築

[parcel](https://ja.parceljs.org/)を用いるので[tsconfig](https://typescriptbook.jp/reference/tsconfig/tsconfig.json-settings)は別に設定しなくていいのだが、私好みの設定があるので入れてある。

“`sh
npm init -y
npm install parcel typescript
npx tsc –init
mkdir src
touch src/index.ts src/index.html
“`

## HTMLテンプレート

“`html

MAMPを使ってブラウザ上にPHPファイルを表示させる

# はじめに
この記事は、MAMPを使ってブラウザ上にPHPファイルを表示させる方法を記録したものである。PHPでお問合せフォームを作ろうと思い、実行環境としてMAMPをインストールした。MAMP起動後、PHPファイルに書き込んだ内容をブラウザ上に表示する段階で躓いたため、この問題を解決するために試したことを記録しようと思う。

# 環境・前提条件
– 使用ブラウザはGoogle Chrome
– エディタはVSCode
– MacPCにMAMPをインストール（※MAMP Proは使わない）
– MAMPの設定
– Webserver: Nginx
– PHP-Version: 7.4.33
– ポート番号: 8888

# 試したこと
まず、PHPが実行できる状態であるかどうかを確認する。MAMP起動後、起動ボタンの隣にある`WebStart`ボタンを押す。MAMPのスタートページが表示される。スタートページのURLを`localhost:8888`に変更してアクセスする。Welcome to MAMPというページが表示される。ページ内にPHPのバージョンに関

.htaccess でメンテナンス中の表示にする方法

## .htaccess でメンテナンス中の表示にする方法
普段、業務では、a-blog cmsという、cmsを使用しています。
動的なサイトって、　**どうやってメンテナンス中の画面表示をするんだろう・・・？**　と疑問に思い、調べてみました。
思いの外、簡単に設定できたので、下記に記述します:sunny:

### そもそも、　.htaccess ってなんだろう。

メンテナンスの画面は、.htaccess に記述するみたいです。
よく触ることがある.htaccess ですが、なんなのか分からないまま触っていたため、この機会に調べてみました。
メンテナンスの設定方法だけ知りたい方は、次の見出しに飛んでください。

私は、下記のようにSEO対策の目的でよく使っています。

:::note info
.htaccess の使い所
– リダイレクト設定をする時
– ホームページのwwwの有り無しを統一する時
:::

下記の記事がとても分かりやすかったです。

https://qiita.com/sanogemaru/items/7e5bd6e8dc9b04c9978e

自分なりに解釈

メイン画像をPC画面の縦横 ピッタリに収める

# ファーストビュー
サイトにアクセスしたとき、モニタ画面に表示される領域を
ファーストビューといいます。

# ファーストビューを作る
• 画像とキャッチコピーをグループ化
• 親にposition指定(rerative)
• 画像の横幅100%にする
• キャッチコピー部分にposition指定(absolute)
• とりあえずキャッチコピー部分にtop:50px left:50pxを指定


表示されたもの↓

## 画面からはみ出した画像をPC画面い

コンテンツについて(自分用)

コンテンツの最大横幅は〇〇です。
↓
コンテンツと聞いてわからなかったのでメモ用に残しておきます。

# コンテンツモデル
HTML５で導入された新しい概念。あるタグに含めることのできる要素の内容を定義するものです。

# フローコンテンツ
内に記述できるほぼすべての要素はフローコンテンツになるらしい。

# フレージングコンテンツ
フローコンテンツに属するコンテンツ。テキストの一部を修飾するタイプの要素はフレージングコンテンツ。HTML4などでインラインレベル要素と呼ばれていたものと同じ要素が該当するらしい。

例
“`html

・・・フローコンテンツ
・・・フレージングコンテンツ
“`

メリットとしては、コンテンツモデルを理解して使いこなせるようになるとSEOが向上したり、変更もしやすくなったり。

元記事を表示

CSSセレクタでHTMLファイル検索するVSCodeの拡張機能を作った

# 忙しい人へ
CSSセレクタでHTML、JSX、TSXファイルを検索するvscode拡張機能作った。
置換機能も実験段階だがある。

もう間もなく公開から１年。ダウンロード数39。
[ここからダウンロード](https://marketplace.visualstudio.com/items?itemName=yuyakawakamy.querysearch)

# 作ったきっかけ
昔々、StrutsからSpringMVCにフレームワーク移行を担当していたとき、大量のStrutsのカスタムタグをSpringのカスタムタグを手作業、あるいはGrepを駆使して頑張って書き換えをしていました。

Grepなので属性の順番やスペースの扱いで検索に引っかからなかったり、ネストされたタグを検索が非常に大変。
置換なんてやろうものなら、HTMLファイルを破壊するなんてしょっちゅうでした。

今はAngularでの開発を行っていますが、共通コンポーネントタグにプロパティを追加する、ディレクトティブを追加/削除するなんてそこそこあるわけで。

CSSセレクタで検索して、置換ができればなぁ。

# 機能

元記事を表示

隠しリンクの見つけにくさをちょっとだけ上げる方法？ (逆効果かも)

# クランドからの挑戦状

【クランドからの挑戦状】

豪華でお得なヒミツの酒ガチャを
ページのどこかに隠しました。

画像の謎を解ければ、
隠しリンクの場所が分かります。
ぜひ探してみてください。

「酒ガチャ感謝祭」
▼ ページはコチラ ▼https://t.co/gWNeit8C7c#なぞ解き #謎解き

元記事を表示

MBOX を HTML ファイルに変換する 5 つの方法 – 完全ガイド

デジタルで相互接続された現代の状況では、個々の要件に合わせて多様なファイル形式を調整および変換する能力は、単なるスキルではなく、不可欠です。 次のシナリオを考えてみましょう。フランス語のみを話す友人に手紙を書いているのに、手紙は英語で書かれています。 当然のことながら、スムーズなコミュニケーションのために手紙をフランス語に翻訳または変換することになります。 この比較は、私たちのデジタル エクスペリエンス、特に電子メール ファイル、特に MBOX ファイルとして識別されるファイルを管理する際の共通の必要性を厳密に反映しています。

MBOX ファイルを変換する理由?

• 異なる電子メール プログラムの使用: MBOX ファイルは、すべての電子メール プログラムと互換性があるわけではありません。 MBOX ファイルを開けない新しい電子メール プログラムに移行する場合、電子メールに引き続きアクセスするには、MBOX ファイルを互換性のある形式に変換することが不可欠になります。

• データ移行: あるコンピュータ システムから別のコンピュータ システムに電子メールを移動するプロセス中に、デ

元記事を表示

IONIC7をAngularのStandaloneで作るときの注意点（その１）

#### (その１)とかつけてみて、シリーズ化出来たらネタ探し楽でいいなぁという安直な考えで作ったタイトル

## とりあえず経緯という前フリ
ここ数年、元々Vue使いだった自分が初めてAngular ~~とか言うクソみたいな言語~~ を使う機会があり、IONIC＋Angularでスマホのハイブリッドアプリを作成しています。

開発当初はAngularのバージョンが11とかでAngularバブちゃんの自分としては「こんななんもしないファイル（Moduleファイルとか）を量産しないと駄目なの、なあぜなあぜ？」な状態でよくわからんまま使い続けてましたが、ここ最近のバージョンアップ（Angular17？）でStandalone版が出てグッバイ・モジュールとなるということなので、試しにソレを使って１から現行アプリのリプレイスを試みようとしてる際の備忘録的なアレです。

## とにかくimport地獄
イヤ、コレはStandalone版ということで、使う先のコンポーネントでやらなきゃいけないおまじない的なアレとして、何となくの覚悟は出来てたけど。。。
classに付ける@Componentのim

元記事を表示

CSS　displayプロパティ

Displyaプロパティ

inline

要素のサイズのみしか占有せず、改行されない。
width、heightは指定できない。margin、paddingは左右方向にしか適用されない。

block

横幅いっぱいを占領する

inline-block

inline要素のように改行されず横並びで表示されるが
width height margin paddingすべて適用可能。

line-height

line-heightとpaddingの違い

line-heightの場合

タグにline-height: 30px;を適用させた時
h1のbackgroundのheightは30pxになる。
h1の文字の真ん中から上下に15pxずつ幅をとる

paddingの場合

タグにpadding: 30px;を適用させた時
h1の文字の一番高い所から上に30px
h1の文字の一番低い所から下に30pxの幅を取る

元記事を表示

クリップボードにコピー機能実装

クリップボードにコピー機能実装

簡単な JavaScript で HTML の表示要素をクリップボードにコピーする(iPhone 対応、脱 JQuery)

元記事を表示

【HTML & CSS】ねぷのフラグ

## ねぷのフラグとは？

これのこと

https://www.compileheart.com/neptune/v2/system/img/flag1.jpg

フラグが立ったり、折れたりして状態が分かりやすい素晴らしいUI

## 成果物


https://mogamoga1024.github.io/NepFlag/

## コード

“`html





Webアクセシビリティ（２）

# はじめに

この記事では話題になっているWebアクセシビリティに関して知り、取り組めるようになることが目的です。
次に、Webアクセシビリティ向上の指針となるガイドラインについて紹介します。

## Webアクセシビリティの標準（WCAG）

Webアクセシビリティは、障害のある人を含むすべての人がWebコンテンツを利用できるようにすることを目的としています。この目標を達成するための国際的な基準であるWCAG（Web Content Accessibility Guidelines）について、その概略と適合レベルに分けて詳しく解説します。

### WCAGの概略

WCAGは、障害を持つ人々がWebコンテンツにアクセスしやすくなるように設計された一連のガイドラインです。これらは、Webコンテンツをよりアクセスしやすくするための具体的な推奨事項を提供し、情報技術の進化に合わせて定期的に更新されます。WCAGは以下の4つの基本原則に基づいています：

1. **知覚可能**：情報はユーザーが知覚できる形で提供されなければなりません。
2. **操作可能**：ユーザーインターフェースは

元記事を表示

Webアクセシビリティ（１）

# はじめに

この記事では話題になっているWebアクセシビリティに関して知り、取り組めるようになることが目的です。
まずは、Webアクセシビリティとはなんなのかについてまとめていきます。

## アクセシビリティ(Accessibility)の概要

アクセシビリティとは、「利用可能な状況の幅広さ」を意味し、`Accessibility = Access(アクセスする) + Ability(できること)`から成り立っています。すなわち、さまざまな状況の人々が製品やサービス、環境を利用しやすくすることを指します。

### ユーザビリティとの違い

ユーザビリティは「使いやすさ」を指し、特定のユーザーや状況下での利用のしやすさを意味します。一方、アクセシビリティは様々なユーザーの状況を考慮した利用可能性の幅を表します。

## Webアクセシビリティの概要

Webアクセシビリティは、Web上のコンテンツやサービスが幅広いユーザーにとって利用可能であることを意味します。

### アクセシブルなWeb

Webは、通信環境と端末があれば、どのような時間や場所、デバイスからでもアクセス可

元記事を表示

Gridのgapで後悔したこと

# gridって？ gapって？

See the Pen
Untitled by himeka223 (@himeka223)
on CodePen.

元記事を表示