WEB デザイン│加藤電業社　色々と検証サイトですよ。

2020年11月4日
2020年11月4日

particles.jsで幾何学的な背景を作る。

幾何学的で動的に動く背景が素敵です。早速、こちらも設置してみましょう。まずはデフォルトのデモをどうぞ。 particles.js　デモ01　設置方法公式の　https://vincentgarreau.com/particles.js/　からダ […]

2018年11月16日
2018年11月16日

Bootstrap4 navbar 2段に

bootstap4で nav と navbarを2段にしたかったがどうも悩んだので、備忘録。やりたかった事。Bootstrap4でＮavbarを2段にしたかった。結論から書くとこんな感じ。 http://kato.space/demo/boots […]

2018年11月15日
2018年11月15日

bootstrap4 Cards レイアウト崩れ

Bootstrap4のcomponetsのcardsでブラウザサイズを小さくするときにレイアウト崩れが出たので、確認してみた。先に結論から書くとcardに幅指定をしないこと。参考＠see https://www.w3schools.com/b […]

2018年11月4日
2018年11月4日

Bootstrap4に用意されている各余白設定

いままでは余白は自分でクラスを設定していたが、Bootsrtap4では既にマージンやパディングが用意されている。公式:　https://getbootstrap.com/docs/4.1/utilities/spacing/ Where prope […]

2018年8月26日
2018年8月26日

レスポンシブでスマホメニューを検証する。

このページは更新・編集しながら記述しています。ウェブサイトの半数がスマホやタブレットになりつつ今、レスポンシブでスマホ対応は必須。スマホメニューをいつもコードを都度対応しているが、ここで真面目に検証してみる。まずはbootstrapでの基本の形 […]

2018年8月2日
2018年8月2日

スマホ　カメラでクレジットカード読み込み

スマートフォンでアクセスした決済画面でクレジットカード読み込みがしたい場合がある。そのときのHMTLタグサンプル。まずはコード <!DOCTYPE html> <html lang="ja" > <me […]

2017年6月16日
2017年7月17日

とあるテーマのBootstrap化その２　画像をレスポンシブに

前回からの続き現状の画像をレスポンシブに既に表示されている画像をレスポンシブにしたい。で、img タグにclass=”img-responsive” というクラスを追加したい。 function.phpについか add_ […]

2017年6月15日
2017年7月17日

とあるテーマのBootstrap化その１まずは読み込ませて部分的にテスト

某サイトで既にカスタマイズされたテーマがある。で、これをCSSのフレームワークのBootstrap化したい。単純に呼び込むだけなら、問題ないが、当然レスポンシブになるし、１から作りたいが既に運用しているのでそうもできない（リソース的に）これは、そ […]

2017年3月30日
2017年3月30日

1からBootstrapを学ぶ

どうもBootstrap基本を覚えてないので、再度勉強。現在のバージョンは2017年3月17日 v3.3.7 まずは基本のサイト構成公式サイトの基本を書いて保存してみる。デモ <!DOCTYPE html> <html la […]

2017年3月17日

mouseoverとmouseoutは子要素でもイベントが発生

@See https://iwb.jp/jquery-mouseover-mouseout/ mouseoverとmouseoutではなくmouseenterとmouseleaveを使用することでこの問題を解消することができる。 &nb […]

2017年3月15日
2017年3月15日

画面サイズが変更されたら、出すとか出さないとか

$(function() { var w = $(window).width(); var x = 959; if (w > x) { $('#top_slider').fadeIn(1000); […]

2017年3月15日

スライダー読み込まれるまで待つ

@See http://resocia.jp/column/4463/ 結局 $(function(){ $(‘#top_slider’).fadeIn(1000); });であとで精査

2017年3月14日
2017年3月15日

「max-width: 100%」が指定されたimg要素を縦横比を維持して縮小する方法

img { max-width: 100%; height: auto; } 画像に以上を。

2017年3月13日
2017年3月13日

Sass の確認(´・ω・) ｽ

@See http://creator.dwango.co.jp/9668.html http://rubyinstaller.org/downloads/ Ruby 2.3.3 (x64)をチョイス $ gem install sass &nbs […]

2017年3月12日

レスポンシブの基本、メディアクエリの書き方再確認

どうも挙動がいまいちなので、確認記述の方法を再確認例 <link rel="stylesheet" href="small.css" media="screen and (max-width:480px)"> /*画面サ […]

2017年2月27日

URLを書き換える

var urlPram = ‘表示させるURL’; history.replaceState(”,”,urlPram); history.pushState(”,”,urlPra […]

2017年2月25日

Googleアナリティクス

真面目に使う(´・ω・) ｽ https://analytics.google.com/analytics/ @See https://www.adminweb.jp/analytics/setup/index4.html アカウント ├ プロパティ […]

2017年2月25日
2017年2月25日

:before, :after擬似要素

指定した要素の前後に入れる。サンプル選択できないように文字としては認識されないので、SEO的にはあまり意味がない。応用としてH1とかH2タグの前に【１】とか入れる。画像も入れることができる。ただ画像サイズは変更できない。 &nb […]

2017年2月25日
2017年2月25日

jQuery 日時を表示

$(function(){ $("要素").text(new Date()); }); @See http://www.webdlab.com/guide/jquery-new-date/ var now = new Date(); v […]

2017年2月25日
2017年2月25日

東京サプライ少女2017

東京マラソン2017年のキャンペーンサイト http://pocarigirl.jp/ トップページ、当日準備、レース本番、ムービー、ポカリ説明の５ページスクロールしてコンテンツ閲覧という感じで、jQuary系のアクション多数。早速ソース確認 & […]

2017年2月23日

jQuary フォーム色々操作メモ

<h2>フォーム</h2> <form id="form01"> <input type="text" name="name"> </form> <script> […]

2017年2月21日

Bootstrap　スマホ用ナビゲーション

まずは、公式のGetting startedからサンプルコードをコピーしてみる。 @See https://codezine.jp/article/detail/8145 http://bootstrap3-guide.com/compornent/ […]

2017年2月21日
2017年2月21日

Bootstrapを使ったレスポンシブを確認

Bootstrapのテスト、現在(2017/2/21)のバージョンは 3.3.8 まずは、CDNを使う。 https://www.bootstrapcdn.com/ <!doctype html> <html> <hea […]

2017年2月20日

jQuery　replaceWithで　2 変更とか

var sample = $('#sample p'); sample.replaceWith('<h1>sample</h1>'); $("table").prev("p").replaceWith(<h1>sa […]

2017年2月19日

jQuary 一度だけ実行されるクリックを設置するには

//例）フォームのsubmitを押されたら $('form').submit(function(e){ 　　　　　↓ $('form').one('submit',function(e) { 最初の一度だけ実行する、特別メソッドがあります。それがon […]

2017年2月19日
2017年2月19日

Googleのモバイルフレンドリーテスト

モバイルフレンドリーテスト https://scontent-ord1-1.xx.fbcdn.net　とな？＠Ｓｅｅ http://hublog.biz/fb-page-plug-in-cause-blocked-res […]

2017年2月19日
2017年2月19日

Google スマホ&デスクトップ表示速度のチェックツール「Mobile Website Speed Testing Tool」

Mobile Website Speed Testing Tool https://testmysite.thinkwithgoogle.com/ 早速テストじゃおう…… だめだこりゃ…… & […]

2017年2月19日
2017年2月19日

jQuery おさらい(´・ω・) ｽメソッド

$("セレクタ").メソッド(パラメーター); //　　　↑ //$("要素を指定").何かする(パラメーター); $(function() { $("#third").css("color", "hotpink"); }); 先頭に […]

2017年2月19日
2017年2月19日

jQuery おさらい(´・ω・) ｽ基本～セレクタ

$(document).ready(function(){ ページ読み込んだら実行 }); ↓ $(function() { }); セレクタ $("セレクタ").メソッド(パラメーター); //要素 $("p") //ID $("#w […]

WEB デザイン

最強のWordPressテーマ「THE THOR」