プログラムメモ
Category
WEB制作(html, css)
graphqlクエリ
TypeScript
PHPプログラムメモ
PHPフレームワークLaravel
Stripe / Laravel Cashier
JavaScript
jQuery
Node.js / Bun
WEB制作(html, css)
cssスタイルシート
Tailwind CSS
Bootstrap
サーバ構築・管理
Mac / Linux / FreeBSD シェルコマンドメモ
KUSANAGI
Pleskサーバ管理
Amazon AWS クラウド
Mac OSX おすすめフリーソフト
Karabiner-Elements
Auto Hot Key
MySQL
SQL Server(MS-SQL)
React
Vue3
Next.js
Vue.js
postgreSQL
gulp(タスク自動化ツール)
デザイン関連(Photoshop・Illustrator)
Figma / Adobe XD / Sketch
フリー素材(写真、アイコン、フォント)
iPhone / iPad
WEBサービス / API
SQLite
エディタ・WEB開発環境 / Cursor / Web Storm / VS Code
Windows WEB開発(ASP.NET Core / C#)
Visual Studio for Mac (Xamarin.Mac)
WEBアクセシビリティ / Google Lighthouse / W3C Markup Validation
クラウド/VPS/レンタルサーバ/専用サーバ
リッチテキストエディタ / TinyMCE / Summer note
git
PHPフレームワークCodeIgniter
最近のメモ
Next.js の App Router ざっくりまとめ
mysql8 で 起動エラー「mysqld_safe mysqld from pid file xxxxx ended」を解消する
RTK Query
Next.js AppRouter のおすすめeslint 設定
reactでvideo.js
Next.js で 警告「Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element」
supervisordでプロセス監視
「親DIVの横幅が300px以内の場合...」を実現するコンテナクエリ
css で長いテキストを ... で表示する。マウスオーバーで全て表示する。
Emotion から goober へ乗り換える
プロセスマネージャー pm2で next.js を動作させる
next.js standalone
英語テキスト(連続したアルファベット)の折り返し(divをはみ出る)の対応
Cypressより早いE2Eテストフレームワーク Playwright
centos に redis をインストールする
Golang の golang-migrate を centos にインストールする
fzf で bash / zsh のコマンドを便利にする
dayjs (day.js) + typescript で 日付を扱う
Redux の 作り方
Redux のフック
ts-auto-guardの使い方
Laravel 10 → Laravel 11 へのアップグレード
laravelでapiの文字化けを解消する
● Laravel で 多対多 のリレーションを扱う
phpで日本語が文字化けしないようにjsonを扱う / json_decode() / json_encode()
検索
WEB制作(html, css)
トップに戻る
新規投稿
tags
フォント
[1]
html5
[5]
携帯スマホサイト
[4]
iPhone
[3]
フォーム
[1]
css
[16]
高速化
[3]
jQuery
[2]
Bootstrap
[5]
scss
[2]
compass
[1]
iPad
[1]
アイコン
[2]
.htaccess
[5]
Firefox
[3]
検索エンジン
[3]
透過png
[1]
携帯
[2]
IE
[1]
WEB制作(html・css(スタイルシート))に関する各種メモ書き:
タグ「Firefox」での検索
クイックリンク
Google Chrome を Sidekick みたいにする サイドバー拡張機能
PWA対応する
Mac でフォルダ内の png , jpg 画像を一括して ../webp/ フォルダに webpフォーマット変換する
WordPressを別サーバに移行する
W3C Valid な htmlページ コーディングの雛形
WordPressの管理画面に独自の画面を追加する
WordPress 管理画面の必須プラグイン
画像ファイルを png を圧縮する
WEBページやWEBシステムで Windowsの外字ファイル( .tte )を使用する
https と http の混在(mixed contents)をGoogle Chromeで見つける方法
Google Chrome Developers Tool のショートカット
HTML5の画像のsourceタグのsrcset で「ブラウザ幅」と「ディスプレイ解像度」によって画像を入れ替える
チェクボックスのCSSでのデザイン
テキストとアイコン画像の位置を揃えるCSS
TABLEタグをDIVタグとCSSで表現する
HTML , CSS コーディング時に使用したい Sketch プラグイン
cssでfloatを使った時に高さを確保する
テーブル TR TD の hover をある箇所だけオフにする
RESTステータスコード
プリント時に要素を削除する CSS
電話番号に自動でつくリンクを消す
昔の古い Windows IE でのブラウザチェックを行う
WEBサイトのリンク切れを検知するリンクチェックツール
CSSでカーニング調整をして先頭が 「 (カッコ)の左端を揃える
IE6 〜 IE11 の表示チェックが行える IE Net Renderer
robots.txt を設置して検索エンジンクローラーが巡回しないようにする
iPhoneでフォーム入力時に 数字だけのキーボードを表示させる
flexboxによる上下、左右センタリング(中央寄せ)
Google Chromeでローカルにあるcssファイルを直接編集し保存する
JavaScriptでWEBページの印刷ボタンを作る
html 内のテキストにカーニングを適用する jQuery.Kerning.js
Bootstrapによるモーダルウィンドウ
dt,ddタグとCSSによるテーブル表現
emmet LiveStyle を使って SCSS の変更を即座にブラウザに反映させる
compass(SCSS)でretina,ロールオーバー対応のcssスプライトを自動生成するmixin
オンラインでRetina画像対応CSSスプライトを作成する
Google PageSpeed Insights の速度アップ修正に対応する
<img>タグで埋め込んだSVGファイルの色変更をする JavaScript
iPhone, iPadなどのWEB画面表示を確認する
CSSによるDIV(ブロック)要素の横並び方法4種類
スマホサイト制作時に設定しておくと良いhtml, css, JavaScript 項目
スマホサイトをフルスクリーンにしてWEBアプリぽく見せる
Bootstrapで画面サイズによって要素を【表示・非表示】させる
BootstrapのCDN
CSS3で作るツールチップ(吹き出し)
Font AwesomeのWEBフォントをフォームのボタンに使用する
SSL(https://)サイト制作時の https , http 混在エラーをチェックする
iPhoneのsafariでフォーム入力の時に自動的に画面拡大するのを防ぐ
作成したWEBページの表示速度がどれくらい早いかをチェックする
hn.kd.ny.adslや中国からの検索エンジンロボット(クローラー)を制限する
画像やCSS,JavaScriptにブラウザキャッシュを適用させる
.html ファイルのデフォルト文字コードを出力する
Firefoxおすすめ拡張機能(アドオン)
リンクを選択した時のフォーカス枠を消す
サイト内検索ASPの代わりにGoogle AJAX Search API を使用する。
HTMLタグの閉じ忘れを自動修正してくれるWEBサービス
WEBサーバーのダウンを監視する無料のサービス
Windows IE にCSS3の角丸(radius)を適用させる
ツイッターに投稿してもらいやすくするTweetボタンを設置する
<head>内に rel=”canonical”属性 を指定してサイト内の重複コンテンツを防ぐ
複数の画像を1枚にくっつけて保存し、サイト表示を高速化させる(CSS Sprite)
HTML5ビデオを埋め込む。またiPhone, iPadで自動再生…。
HTML5の動画Playerライブラリ
HTML5での追加タグと記述サンプル
iPhoneのWebclip用アイコンを作成する
色情報取得ツール
「Windows IE6, 7, 8で透過pngを使う」の決定版
digest認証をつける
携帯サイト開発時に利用する携帯シミュレータ
親ディレクトリ(上位階層)で指定した Basic認証を特定ディレクトリで解除する
ブラウザのキャッシュを無効にする。また検索エンジンロボットにページ巡回、ページキャッシュさせないようにする。
htmlページにキーボードショートカットをつけるには。
Markdown記法のまとめ
swfobjectでFlashムービー(.swfファイル)を貼り付ける
携帯サイトでフォームの入力文字を固定する。
CSSチェックしエラー訂正するサイト【cleancss.com】
Windows版IEで画像をブロック要素にしてマージンをセットするとずれる
DIVの中を下揃えで配置する
ブラウザによるフォント表示の違い
リンクタグ作成Bookmarklet
css レイアウトで画像ボタンのメニューを作成する方法(css sprite)
無料で使えるオンライン上のSEOツール
RSS書式のひな型
RSS2.0の仕様
インジケーターアイコン
xhtmlでインラインフレーム(iframe)を使うと横スクロールバーが表示されてしまう不具合への対応
構造のマークアップなしでフロートをクリアする方法「clearfix」
アイコンファイル favicon.ico を作成する
<ul><li>を画像リンクにしたときに Firefox で画像の外まで点線が表示されてしまう
Windows IE を判別してJavaScriptやCSSを適用する
複数のCSSスタイルを指定するには?
ブラウザごとの差異をリセットするCSSデフォルト(reset.css)の設定
Firefoxおすすめ拡張機能(アドオン)
Firefoxおすすめ拡張機能(アドオン)をメモ。
■ 検索窓とアドレスバーを統合する
https://addons.mozilla.org/ja/firefox/addon/instantfox/
■ Linky 複数のリンクを選択して一気に開く
https://addons.mozilla.org/ja/firefox/addon/linky/
■ LinkChecker(表示しているページのリンク切れを一括チェック)
https://addons.mozilla.org/ja/firefox/addon/linkchecker/developers
■ LiveHttpHeaders (HTTPヘッダを表示)
https://addons.mozilla.org/ja/firefox/addon/3829/
■ Web Developer (WEB制作に必要な機能を追加)
http://www.infoaxia.com/tools/webdeveloper/
■ Popup ALT Attributes
Windows の InternetExplorer みたいに画像の alt属性をポップアップで表示する。
http://piro.sakura.ne.jp/xul/_popupalt.html#download
■ Pearl Crescent Page Saver(スクリーンショットを撮る。Mac版Firefoxでも使用可)
http://pearlcrescent.com/products/pagesaver/
■ Fire Bug(デバッグ用拡張機能。web開発者向け。)
https://addons.mozilla.org/ja/firefox/addon/firebug/
■ Fire Query(Fire Bug開発支援。便利。)
https://addons.mozilla.org/ja/firefox/addon/12632
■ YSlow(制作したページの表示速度が遅いかどうかを判断する。要FireBug。web開発者向け。)
http://developer.yahoo.com/yslow/
■ Fire gestures (マウスジェスチャー 軽量。おすすめ!)
http://www.xuldev.org/firegestures/
■ User Agent Switcher (ブラウザのUserAgentを変更する。携帯サイト開発,iPhone向けサイトの閲覧などに使うと有効)
https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/
■ AutoPagerize
Yahoo や Google で検索結果の次のページを自動的に読み込んでくれる。
https://addons.mozilla.org/ja/firefox/addon/autopagerize/
■ Greasemonkey
https://addons.mozilla.org/ja/firefox/addon/748
■ iMacros
Firefoxをマクロで自動運転します。ログインが必要なサイトを自動化しておくと便利。
https://addons.mozilla.org/ja/firefox/addon/3863
■ Throttle
帯域を制限し、遅い環境でのブラウジングをテストするのに使用します
http://www.uselessapplications.com/en/Application/FirefoxThrottle.aspx
■ Seo Quake
http://www.seoquake.com/
SEO(検索エンジン最適化)を行うのに必要な情報を表示するアドオン
■ xpath checker(右クリックで xpath を表示)
https://addons.mozilla.org/en-US/firefox/addon/xpath-checker/
■ Memory Restart 1.1( Firefoxの使用メモリを表示 )
https://addons.mozilla.org/ja/firefox/addon/249361/
■ COOL PREVIEWS By cooliris(リンク先のWEBページや画像ファイルをその場でプレビュー)
http://www.coolpreviews.com/
■ Redirect Cleaner(リダイレクトページ「広告ページ」をすっとばす)
https://addons.mozilla.org/ja/firefox/addon/redirect-cleaner/
■ Redirect Remover (リダイレクトページ「広告ページ」をすっとばす)
https://addons.mozilla.jp/firefox/details/537
その他おすすめ :
http://wp.me/p2JcR3-1cy
No.379
09/11 14:49
edit
edit
delete
Firefox
携帯サイト開発時に利用する携帯シミュレータ
●DoCoMo
・iモードHTMLシミュレータ
http://www.nttdocomo.co.jp/service/imode/make/content/html/tool/index.html
iモードHTMLシミュレータII
http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/index.html
(無印のほうが表示が実機に近い印象。ただしcookieを受け入れてしまうみたいなのでセッションのチェックには使えない。)
●AU
■ Openwave
http://www.au.kddi.com/ezfactory/tool/ue/index.html
http://www.au.kddi.com/ezfactory/tec/spec/html_con005.html
●Softbank
■ 開発ツール一覧
http://creation.mb.softbank.jp/doc_tool/tool_list.html
(個別のツールを見るには、会員登録必要)
●Firefoxアドオン(おすすめ。これを導入して Cookie をオフにするのが開発しやすいでしょう。)
■ FireMobileSimulator
http://firemobilesimulator.org/
No.676
08/03 11:48
edit
edit
delete
Firefox
携帯
<ul><li>を画像リンクにしたときに Firefox で画像の外まで点線が表示されてしまう
対応方法:cssファイルに以下を追加
a:focus { outline-style: none; }
No.160
07/05 10:34
edit
edit
delete
Firefox