実装
実装タグ記事(更新日順)
-
CSSで円(丸)を描き,内側にテキスト(文字)を入れる
タグ: 実装
作成日:円をかいて,中に文字を入れるとはこのような絵のこと. 上 左 中央 右 下 CSS と HTML による円とテキストの記述方法 中の文字の位置指定のポイント CSS は以下のようになる. 円は position: rel […] -
チェックボックスのデザインをカスタマイズする
タグ: javascript, デザイン, 実装
作成日:チェックの切り替えでデザインが変わるチェックボックス チェックボックスの切り替え時に、デザインを変更したい場合はないでしょうか。例えば会員登録情報の変更時に、登録済みの情報とは別の情報を選択した場合、変更したことが目に見 […] -
Lightbox のような高級感を CSS のみで実現
タグ: javascript, 実装
作成日:lightbox 風な動作を CSS のみで実現してみた. ライトボックスは画像の拡大表示で手軽に高級感を醸し出せるので使っているサイトは結構あると思う. 前回書いた記事は高級感というところまではいっていないので,さらに […] -
【CSS】簡単な下線の引き方【HTML】
タグ: 実装
作成日:本文中のテキストや見出しに下線を付けたい時があると思います。text-decoration や border を利用してとても簡単に実装できますので、用途別に応じて解説します。 下線を引く まず、下線のサンプルを用意しま […] -
【比較】ソースコード表示用ライブラリ
タグ: Google, javascript, PageSpeed Insights, PHP, SEO, Windows, WordPress, プラグイン, 実装
作成日:今回は wordpress のソースコード表示用ライブラリを選ぶときに一度は目にするであろう Prism.js、highlight.js、google-code-prettify について書きました。 上記3つは軽量のラ […] -
「オフスクリーン画像の遅延読み込み」への対策
タグ: Git, Google, PageSpeed Insights, Youtube, サーチコンソール, ページ閲覧解析, ログ解析, 実装
作成日:PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 次世代フォーマットでの画像の配信 ウェブフォント読み込み中の全テキストの表示 第三 […] -
【JavaScript】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
タグ: javascript, 実装
作成日:パスワードを入力する機会が増えた昨今では必須の機能と言える、パスワード表示ボタンのクリックでテキストの表示・非表示をjavascriptを使って切り替える方法を紹介します。 今回のサンプルコードではパスワード入力欄を作成 […] -
【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
タグ: javascript, 実装
作成日:概要 ログイン画面で、パスワード表示ボタンをクリックするとパスワードが表示されるという機能は、現在では当たり前になっています。 ですが、もしパスワード表示ボタンが無く、表示・非表示が切り替えられなかったらとても不便に感じ […] -
【JavaScript】目のマークでパスワードの表示を切り替える実装方法
タグ: javascript, デザイン, 実装
作成日:目のマークでパスワードの表示非表示の切り替え実装 以前、表示・非表示ボタンでパスワードの表示を切り替える方法をご紹介しましたが、今回は目のマークを使用したパスワード表示非表示の実装方法をご紹介します。 javascrip […] -
【CSS】目のマークでパスワードの表示を切り替える実装方法
タグ: javascript, 実装
作成日:目のマークでパスワードの表示非表示を切り替える 目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での実装は【JavaScript】目のマーク […] -
リッチリザルトの ロゴ への対応
タグ: Google, サーチコンソール, リッチリザルト, 実装
作成日:引き続き,リッチリザルトへの対応の記事. 弊社(レクタス)のロゴ Google ではロゴ | Google 検索セントラル | Google Developersで記述方法を説明している. ロゴと言っても https:/ […] -
【CSSのみ】レスポンシブな多階層ハンバーガーメニューの実装方法(サンプル付き)
タグ: javascript, デザイン, ホームページ, レスポンシブ対応, 実装
作成日:ハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う. これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ. 恐らく,箇条書きのメニューを遠くから […] -
Youtube の動画を複数埋め込んだページの高速化
タグ: javascript, PageSpeed Insights, SEO, Youtube, 実装
作成日:PageSpeed Insights 対策の一環.他の対策は以下を見てください. オフスクリーン画像の遅延読み込み 次世代フォーマットでの画像の配信 ウェブフォント読み込み中の全テキストの表示 第三者コードの影響を抑えて […] -
【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
タグ: javascript, セミナー, デザイン, ホームページ, マーケティング, レスポンシブ対応, ログ解析, 勉強会, 実装
作成日:javascript無しでナビゲーションメニューを作る 弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している. 当初は drawer.js を使用して作成されていた. しかし,このレスポン […] -
webページにチャット機能を入れる方法
タグ: javascript, PageSpeed Insights, タグマネージャー, 勉強会, 営業, 実装
作成日:弊社のお客様で Smallchat を入れられている方がおられて,引き合いが来たことがあるということを聞いたので早速このサイトにも入れてみたのだが,PageSpeed Insights の点数が 30点ぐらい悪くなるので […] -
【CSS】レスポンシブ(スマホ)対応横スクロールテーブル(表)
タグ: スライダー, ホームページ, レスポンシブ対応, 実装
作成日:(2021/03/18 文章追加とコード微修正) レスポンシブ対応のホームページの制作で面倒なものの一つに表(table)がある. 横に並んだものを縦にする CSS はよく目にするが,横長のものだと項目が多い場合に訳が分 […] -
【Chrome】開発者ツールの使い方【デバッグ】
タグ: javascript, Windows, 実装
作成日:開発者ツールを使ったデバッグ方法 開発者ツールの各機能の使い方はわかったが、実際にどう使えばいいのかわからないという方向けに、javascript で作成した関数のデバッグを実践的に行います。 今回はボタンのクリックでパ […]
Apache
Chrome 拡張機能
Git
Google
javascript
PageSpeed Insights
PHP
SEO
Windows
WordPress
Youtube
z-index
お問い合わせフォーム
アウトライン
アナリティクス
アンケートフォーム
ウェビナー
サーチコンソール
サーバー管理
スライダー
セミナー
タグマネージャー
テレワーク
デザイン
データベース
プラグイン
ページ閲覧解析
ホームページ
マーケティング
メール配信
リッチリザルト
レスポンシブ対応
ログ解析
ローカル環境構築
制作例
勉強会
営業
営業力
営業支援システム
実装
検索エンジン
検索順位
検索順位チェックツール
脆弱
追跡