うさぎのイラスト

ネットアンサー55備忘録

ワードプレス技術を色々とお試しするサイトです。

archive.phpを使用 毎日の書き込み

17年10月23日


jQuery triggerを使ってカスタムイベントを作成

規定のイベント要素といえば、「scroll」「click」「resize」がございますが、イベント要素は自身で作ることも可能であります。 デモサイト

17年09月13日


cssanimationでアニメ-ションを作る

cssanimation

17年08月11日


CSS Grid Layoutについて

isc media CSS Grid Layout を極める!(基礎編) CSS Grid Layout を極める!(場面別編)

17年08月10日


Velocity.jsの使い方

参考サイト: Tip note by tam LIG(fadeInまたがslideDownの記述方法書いてある) パラメータ解説 easing一覧表 velocityプラスプラグイン イージング機能

17年06月07日


Sticky-Kit

サイドバーなどが追従してくるためのJqueryです。 デモ参考サイト

17年02月14日


セレクト選択を複数するためのjsプラグイン

デモ ソースgithub パラメーターも各種用意されているみたいです

17年01月04日


cssで背景グラデーションを設置する

背景グラデーションデモ

16年12月23日

html/css
flexboxを使ってみよう。

●まずは基本の設定 ●横並びの設定 ●縦並びの設定 ●横軸縦軸変更の設定 ■参考サイト ■参考サイト2 demoページその1 demoページその2 4カラム構成その1 3カラム構成(IE11 windows7対応ver)

16年11月15日


css ボタン 便利ジェネレーター

ジェネレーター一覧

16年11月07日


画像サイズ_レスポンシブ

pc←→SPでの画像サイズの切り替えをjQueryで設定しております。 デモ01

16年11月02日


flexnav

参考サイト デモサイト

16年10月03日


オリジナル画像でフォローボタンを作成する

参考サイトを上げていきます。 ◆facebook オリジナル画像のFacebookシェアボタンを設置する方法 ◆google plus オリジナル画像のgoogle plusフォローボタンを設置する方法 ◆twitter...

16年09月26日


focuspoint

参考サイト デモ01

16年07月31日


テーブルのレスポンシブ

respontent テーブルレスポンシブ テーブル→ボックス 一行目は固定 デモ1

16年07月16日


animate.cssについて

デモ1 デモ2 設置方法説明サイト

16年07月05日


ロゴを提案してくれるサイト

参考サイト

16年06月30日


タブからアコーディオンへ

作成デモ01

16年06月25日


mmenu

mmenu公式サイト 横スライド、縦アコーディオンのやり方 デモmmenu1(スマホ専用ページ用) デモmmenu2(レスポンシブ用)

16年06月25日


ビューアー

作成デモ

16年06月21日


jQuery もっと見るボタン

もっと見るボタン作成例

16年05月19日


レスポンシブ グリッド

作成したサイト 作成したサイト2(テキストin figure)

16年04月30日


ヘッダー部分を追従

作成したデモ 参考にしたサイト

16年04月29日


ボックスの高さ調整

作成したサイト 応用して表組みをレスポンシブで作成

16年04月22日


slick

レスポンシブ対応スライダーslick パラメーターまとめ 公式サイト デモ イベント機能(コールバック) ☆総量の1320pxの計算の仕方 (画像横幅+画像のpadding-left・padding-right)×2カラ...

16年04月09日


レスポンシブメニューの作成

作成したサイト 作成したサイト2 参考にしたサイト

16年04月08日


Masonry

参考サイト HTML5でサイトをつくろ

16年03月22日


レスポンシブ jQuery

レスポンシブjQ

16年03月21日


font-awesomeを使用する

公式サイトよりソースをダウンロードする。 基本的な設定だけなら、使用するフォルダはfont一式とcssのfont-awesome.cssである。 cssをリンクさせる あとは好きな場所に出力させるだけです。 :befor...

16年03月02日


レスポンシブ画像切り替え

作成したページ 書くところは2点 ・breakpoints: [ 1, 768 ]の数字を任意のブレイクポイントの数字にする。 ・$(window).bind('enterBreakpoint768',function(...

16年02月06日


Emmet機能

16年02月05日


google ウェブツールについて

タグマネージャーの連載 googleアナリティクス基礎 Google Analytics(アナリティクス)の基本的な機能「レポート」の使い方(ページ途中から) コンバージョン設定のやり方 Google Analytics...

16年02月04日


スマホの時だけtelを有効にする

参考サイト

16年01月31日


音楽再生 jPlayer

作成したサイト 設定について 自動再生について

16年01月22日


メニューリスト

メニューリスト 参考サイト

16年01月22日


マウスオーバー画像チェンジ

作成したページ シンプルなif文の書き方

16年01月20日


googleを使ってpdfビューアー

googleを使ってpdfビューアー

16年01月19日


リダイレクト設定

16年01月16日


background-sizeを使おう

作ったサイト 参考にしたサイト

16年01月16日


マウスオーバーで画像にキャプション

作成したページ 自力でjqueryでも作成してみました。 作成したページ2

16年01月10日


正規表現で置換

※dreamweaverを使用しての置換です。 KOTORI

16年01月05日


画像にマウスホバー

画像にマウスホバーで非表示の要素をオーバーレイで表示するjQuery ContentHover Plugin 参考ソノ2 ページ遷移 テキストに動きをつける

15年12月26日


擬似要素afterの検討

作成したページ(ie8に対応している) Nxworld

15年12月23日


css3で実装するボタンアクション

作成したページ 上から下へボーダーが出てくる、アンド文字を画像に nxworldサイトのcssで作るシリーズ cssによるタイトルデザイン cssで実装するspメニューアイコン2 cssで実装するspメニューアイコン ※...

15年12月17日


メニューバーを固定する

参考サイト1 参考サイト2

15年12月13日


無限ループのスライダー

デモページ 無限に横方向にスクロールするjQueryプラグイン 無限スクロールするアニメーション「infiniteslide.js」サンプル

15年12月12日


loading画面について

参考サイト

15年12月12日


googlemap カスタマイズ

googlemapのAPIキー取得方法 設置方法 複数のマーカーを立てる googlemapジェネレータサイト ジェネレータサイト ?一番簡単な方法 まずはgooglemapから地図の埋め込みを設定します。 サイズなども...

15年12月12日


cssでボタンを作成

cssでボタンを作成

15年12月12日


jQuery 画像を横幅フルで表示(可変式)

デモサイト ●高さ指定に関して style.cssの.heroで高さを調整する 各パラメーター要素を下記に記します。 デモサイト 参考サイト style

15年12月11日


jQuery maxImage

●検討結果 ・背景がfix固定のために画像の下にスライドする手段がわからない。 ・スクロール間の時間を管理したいがこちらもうまくわからない。 ・上記のためあまり使えないかもしれない 作成ページ ●設置方法 公式サイト 参...

15年12月10日


スクロールで文字や写真をふわっとさせる

作成ページ 1、文字を入れるだけでよい。 2、画像を入れるだけでよい。 3、背景画像を入れて、その画像の横縦幅を確保する。(width:100%設定は無理でした) ※これが必要な時がある ●横からスライドの時 UNORT...

15年12月06日


$(document).ready(function() について

ちなみに下記3つも同じ意味です。 下記をまとめることも出来ます $(window).loadとの違い $(window).load()はページのすべての要素、つまり画像などがすべてロードされた段階でイベントが発火されます...

15年11月29日


jQuery 高さを取得する

作成したページ

15年11月25日


slideToggle・fadeToggle

slideToggle作成したページ fadeToggle作成したページ 「slideToggle」「fadeToggle」「toggleClass」簡単実装 気持ちの良いアコーディオン特集

15年11月24日


fancyBox

作成したページ iframe googleドライブによるpdf表示バージョン 一番シンプル fancybox3 fancybox3_content ・fancyboxは特に追記することなくレスポンシブ対応になります。 ・...

15年11月23日


オンマウスで画像拡大(elevatezoom-master)

作成したページはこちらelevatezoom-master パラメーター説明 ・zoomWindowPosition: 15,=拡大画像が配置される位置で15が真上で、5が真下 ・zoomWindowWidth: 450...

15年10月30日


ドロップダウン

ドロップダウン

15年10月21日


サムネイル配列

ページ 参考サイト:CollagePlus

15年09月27日


ブロック要素全体にリンクを設定する

ブロック要素にリンク

15年09月26日


tabの切り替え

タブの切替のコーディングしました。 タブ切り替え1(参考書籍:スマートフォンサイトUI図鑑) タブ切り替え2(2ボタン&マップ) タブ切り替え3(5ボタン&角丸) タブボタン画像(タブ切り替えのボタンが画像)

15年09月12日


bx-slider

bx-sliderを使用して2つのSlideを作って見ました。 bx-slide01 bx-slide02 bx-slide03(高さを変えたカルーセル版) bx-slide04(スタンダード) bx-slide-aut...

15年09月11日


リンク付き画像のhover効果

●hover時に画像が拡大する ※画像の大きさが300px×200pxの場合 ●ゆっくりと画像が透過する

15年07月22日


301リダイレクト設定について

?今の環境を理解しよう ・Webサーバーに「Apache(アパッチ)」を利用している ・「.htaccess」が利用できる環境である ・「mod_Rewrite」という機能を利用できるWebサーバー(Apache)である...

15年07月04日


faviconの作成

適切な画像を選択する photoshopを使用して32px × 32pxにする png形式にて保存 http://favicon.qfor.info/c/にて拡張子をicoにする   htmlのhead部に書き込む   ...

15年07月03日


list-style

list-style-typeの一覧表です。 list-style-type: disc 黒丸 いちご 人参 サンダル list-style-type: circle 白丸 いちご 人参 サンダル list-style-...

15年06月01日

html/css
vertical-alignで画像と文字合わせる。

vertical-alignの挙動を確認いたします。 vartical無し ygkpqfpこんばんわ top ygkpqfpこんばんわ middle ygkpqfpこんばんわ bottom ygkpqfpこんばんわ te...

15年05月10日

html/css
css設計 リスト編

15年05月10日

html/css
css 設計 media編

●画像を右に左に切り替える。

15年04月22日

html/css
displayについて

15年03月28日

html/css
float解除にclearfix

一番大切なことは最初に書きます、clearfixのcssです。 あとはfloat要素を囲っているdivにclearfixをつけるだけです。 twin_box内にleft_box(float要素)とright_box(fl...

15年03月23日


画像 コメント 画像 floatの感覚

floatをつかった時の発見がありましたのでここに書いておきます。 『画像float:left,コメントの場合,画像float:right』と 『画像float:left,画像float:right,コメントの場合』と ...

15年03月21日

dreamweaver使い方
シングルページタイトル html

記事タイトル 日付 漢字感じ漢字 市役所市役所 学校学校学校 コメント 上記のシングルページタイトルのコードを記します。 html css

15年03月21日


検索フォーム html

上記の検索フォームのコードを記します。 html css

15年03月17日


画像と文の並び方

画像&画像と画像&文の配置の仕方を検証してみました。 htmlコード CSSコード

15年03月05日


行間隔の設定 縦はline-height 横はletter-spacing

  文字サイズ <span style="font-size:12px;">文字の大きさを12ピクセルに指定します</span>   行間隔 <span style="l...