Web制作– tag –
-
フローティングバナーをCSS作る【Web制作】
この記事はフローティングバナーをCSS作る【Web制作】 へ移動しました。 ▶ -
【JavaScript】Swiperを使って端がちょっと見えるスライダーを実装する方法
数あるJavaScriptスライダープラグインの中で、 ・bxslider.js ・slick.js の著名ですが今回利用したのが「Swiper」です。 【Swiperのメリット】 Swiperはオプションが多く、いろいろなスライダーを作ることができます。 ・IE11対応 ・jQueryが不要 ・スマ... -
【JavaScript】jQueryのSlideToggle()でアコーディオン開閉時にテキストを変更する。
アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggle()です。 短い文でかんたんにアコーディオン開閉時を実装できます。 SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。 今回... -
メディアクエリ(Media Queries)が効かないときに確認したいこと
メディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。 メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。 メディアクエリ @media screen and (max-width: 320px); というように表... -
スクロールしたらCSS3のグラフがアニメーションするようにする方法
『アニメーションするグラフを作ってくれ』と言われてしました。 知らない間にアニメーションの需要が出てきているんですね。 少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。 たしかにアニメーションするグラ... -
【Chart.js】グラフを簡単に作れるJavaScriptライブラリ
Chart.jsはグラフをとても簡単に作っていくことができるJavaScriptライブラリです。 と中身のデータを入れ替えていくだけでグラフが簡単に出来上がります。 エクセルなどのスプレッドシートでグラフを作る感覚に近いです。 グラフの初期テンプレートは用意... -
【JavaScript】「next()」「prev()」でjQueryで要素の取得して画像を変更する。
JavaScriptのライブラリとして一般的になったのが「jQuery」です。 いまだにjQueryを使ったサイトの案件はたくさんありますので、 JavaScriptの勉強をしていく上では逃げられないライブラリになっています。 「ボタンをオン・オフしてjQueryで画像を変えた... -
古いサイトでたまに見かけるaタグ「javascript:void(0);」の意味【WEB制作】
古いサイトの修正をするときに見かけることがあるのが 「javascript:void(0);」 aタグの画面遷移を無効化するために使われていますが、 どんなメリット・デメリットがあるのでしょうか。 【「javascript:void(0);」のメリット 】 ・aタグのhrefに書き込む... -
【Web制作】IE11でFlexboxが横並びにならなくてハマる
IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました… 事前にIEはチェックしなくて良いと聞いていたので油断してましたね。 結論としては 「display: flex;」の記述が抜けていたこと。 IEだしdisplay:-ms-flex を書いておけば良いもの... -
CSSでレイアウトしたときにリンクの指マークが表示されないときはZ-indexを確認【Web制作】
WEBブラウザはリンク要素の上にマウスカーソルを乗せると 矢印から指マークへ切り替わります。 CSSを編集しているときに何度やっても指マークが表示されなくなる不具合が起こることがあります。 その時の解決方法を記載します。 【CSSでレイアウトしたとき... -
「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】
LityはjQueryを利用したLightbox系のJavaScriptライブラリです。 【Lityを使うとどうなる？】 ユーザーがボタンを押すと、対象の内容をポップアップ表示できます。 ポップアップ表示をすることで、自分のサイトから他のサイトへ離脱を減らすことが可能にな... -
【Web制作】Floatレイアウトを卒業するためのFlexboxのまとめ
Flexboxを使っているWEBサイトが増えてきました。 ちょっと勉強しなくなると進化についていけなくなりますね。 と淡い期待を持っていたのですが、実際Flexboｘが使われているサイトの修正をするとなると 勉強せざるをえません。 要素が重なってくると複雑... -
【WEB制作】Lightboxの実装方法。かっこいい画像ギャラリーがJavaScriptの知識なしで簡単実装できる
LightboxはjQueryを利用したJavaScriptライブラリ。 最近は見かける機会が減ってきましたが、写真を押すと写真が拡大表示されて 黒背景に写真が等倍で表示される「写真の見栄えをよくできる」ライブラリです。 サムネイルを押すと、大きい画像が等倍にリサ... -
さくらドメインコンパネにWPXレンタルサーバーのネームサーバーを設定する方法
さくらドメインコンパネにWPXサーバーのネームサーバーを設定する方法 -
お名前.comのVPSでのWordPress移行作業
お名前.comのVPSでのWordPress移行作業 -
お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策
お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策 -
自分のブログファンを増やすためにプロフィールシェアボタンを記事の下へ置こう。
自分のブログファンを増やすためにプロフィールシェアボタンを記事の下へ置こう。 -
アプリデザイナー必須のSlicyでPhotoshopのスライス作業効率が30倍になる！
かったるいPhotoshopのスライスから解消 -
Feedlyボタンをブログに設置する方法
Feedlyボタンをブログに設置する方法 -
ウェブ作成時にMacで画面上の色を拾って16進法でコピーする方法
ウェブ作成時にMacで画面上の色を拾って、16進法でコピーする方法 -
レスポンシブ対応CSSモジュールフレームワークPure
レスポンシブ対応CSSモジュールフレームワークPure -
エックスサーバーからシックスコアサーバーへのWordPress移行手順
エックスサーバーからシックスコアサーバーへのWordPress移行手順 -
【htmlコーディング】Zen Cording for Coda v0.7.1の使い方
【htmlコーディング】Zen Cording for Coda v0.7.1の使い方 -
40の美しいモバイルアプリデザイン40の美しいモバイルアプリデザイン
40の美しいモバイルアプリデザイン40の美しいモバイルアプリデザイン -
短期間でのスマホウェブ開発スライド短期間でのスマホウェブ開発スライド
短期間でのスマホウェブ開発スライド短期間でのスマホウェブ開発スライド
1