Web制作 - さくらいらぼ

Web制作

2020/8/20

フローティングバナーをCSS作る【Web制作】

この記事はフローティングバナーをCSS作る【Web制作】へ移動しました。 ▶

JavaScript Web制作

2020/7/12

【JavaScript】Swiperを使って端がちょっと見えるスライダーを実装する方法

数あるJavaScriptスライダープラグインの中で、・bxslider.js ・slick.js の著名ですが今回利用したのが「Swiper」です。 Swiperのメリット Swiperはオプションが多く、いろいろなスライダーを作ることができます。・IE11対応・jQueryが不要・スマホOKでタッチやスワイプにも対応・オプションがありすぎてちょっと面倒とりあえず公式サイトにあるDEMOを見てみると実装できるスライダーの豊富さがわかります。デモを見るだけでも大変です。IE11だと結構動作が ...

JavaScript Web制作

2020/7/12

【JavaScript】jQueryのSlideToggle()でアコーディオン開閉時にテキストを変更する。

アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggle()です。短い文でかんたんにアコーディオン開閉時を実装できます。 SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。今回はそのサンプルを紹介します。 javaScriptでやること・SlideToggle()を実装する・SlideToggle()の開閉を判別する・テキストを変更する。最初に必須なjQueryの読み込み方 jQueryをページに読み込 ...

css Web制作

2020/7/12

メディアクエリ(Media Queries)が効かないときに確認したいこと

メディアクエリ(Media Queries)が効かないときに確認したいことメディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。メディアクエリ @media screen and (max-width: 320px); というように表示させるディスプレイサイズごとに CSSを記述していける書き方です。 CSSは原則として下に書く内容が優先度が高く処理されるため（イレギュ ...

JavaScript Web制作

2020/7/12

スクロールしたらCSS3のグラフがアニメーションするようにする方法

スクロールしたらCSS3のグラフがアニメーションするようにする方法『アニメーションするグラフを作ってくれ』と言われてしました。知らない間にアニメーションの需要が出てきているんですね。少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。たしかにアニメーションするグラフは見栄えが良いし、企業のサイトを作成するとなると決算や社内状況を知らせるためグラフは不可欠な要素になります。ちょっとリッチなページ、ひと目を引くページ作成でアニメーションをいれてくれと言われる ...

JavaScript Web制作

2020/7/12

【Chart.js】グラフを簡単に作れるJavaScriptライブラリ

Chart.jsはグラフをとても簡単に作っていくことができるJavaScriptライブラリです。・どのグラフにするか？・どんな数値・メモリを入れていくか？と中身のデータを入れ替えていくだけでグラフが簡単に出来上がります。エクセルなどのスプレッドシートでグラフを作る感覚に近いです。グラフの初期テンプレートは用意されており色を変えるだけでなく、カスタマイズも出来ます。グラフが表示されるときにアニメーションするのもポイントが高い点です。グラフがアニメーションするとWEBページとしての見栄えも良いで ...

JavaScript Web制作

2020/7/12

【JavaScript】「next()」「prev()」でjQueryで要素の取得して画像を変更する。

JavaScriptのライブラリとして一般的になったのが「jQuery」です。いまだにjQueryを使ったサイトの案件はたくさんありますので、 JavaScriptの勉強をしていく上では逃げられないライブラリになっています。「ボタンをオン・オフしてjQueryで画像を変えたい！」と言う時困るのが・そもそもの画像の変える書き方がわからない・画像を変える要素を選択する書き方がわからないというところでしょうか。初歩的な内容ですが、とても需要があり使うことが多いため書き方を覚えておくと便利です。 jQ ...

Web制作

2020/7/12

古いサイトでたまに見かけるaタグ「javascript:void(0);」の意味【WEB制作】

Javascript 古いサイトの修正をするときに見かけることがあるのが「javascript:void(0);」 aタグの画面遷移を無効化するために使われていますが、どんなメリット・デメリットがあるのでしょうか。「javascript:void(0);」のメリット・aタグのhrefに書き込むとaタグの画面遷移を無効化・カーソルが「指カーソル」の形になるのでボタンの画像が視覚的に”押すもの”とわかりやすくなる。・表示枠をタブ化するときなどにURL欄に”#”などがつかない「javascript ...

Web制作

2020/7/12

【Web制作】IE11でFlexboxが横並びにならなくてハマる

IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました… 事前にIEはチェックしなくて良いと聞いていたので油断してましたね。結論としては「display: flex;」の記述が抜けていたこと。 IEだしdisplay:-ms-flex を書いておけば良いものだと勘違いしていたんですね。 IE11ではdisplay:-ms-flex;が読み込まれずにいて、そもそもの「display: flex;」が抜けているとflexboxレイアウトができないという初歩ミスにハマってしまい ...

Web制作

2020/7/12

CSSでレイアウトしたときにリンクの指マークが表示されないときはZ-indexを確認【Web制作】

WEBブラウザはリンク要素の上にマウスカーソルを乗せると矢印から指マークへ切り替わります。マウスカーソルリンクカーソル CSSを編集しているときに何度やっても指マークが表示されなくなる不具合が起こることがあります。その時の解決方法を記載します。 CSSでレイアウトしたときにリンクの指マークが表示されない原因はZ-index よくよく考えれば当たり前なのですが、他のことでいっぱいいっぱいになっていると忘れがちな内容です。リンクタグを付けているのに指マークが表示されない要素に『positionのプ ...

Web制作

2019/3/14

「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】

「Lity」の使い方。画像や動画を簡単に強制ポップアップ表示させるJSライブラリー【WEB制作】 LityはjQueryを利用したLightbox系のJavaScriptライブラリです。ポイント・画像、インラインコンテンツ、iframe、動画URLをポップアップ表示できる・3kBと超軽量・レスポンシブ対応・利用にはjQuery本体が必要。・MIT license. Lityを使うとどうなる？ユーザーがボタンを押すと、対象の内容をポップアップ表示できます。ポップアップ表示をすることで、自分の ...

Web制作

2019/4/12

【Web制作】Floatレイアウトを卒業するためのFlexboxのまとめ

Flexboxを使っているWEBサイトが増えてきました。ちょっと勉強しなくなると進化についていけなくなりますね。

Web制作

2019/7/30

【WEB制作】Lightboxの実装方法。かっこいい画像ギャラリーがJavaScriptの知識なしで簡単実装できる

LightboxはjQueryを利用したJavaScriptライブラリ。最近は見かける機会が減ってきましたが、写真を押すと写真が拡大表示されて黒背景に写真が等倍で表示される「写真の見栄えをよくできる」ライブラリです。サムネイルを押すと、大きい画像が等倍にリサイズされながらフェード処理されて表示されるので動きがあり非常に見栄えが良いのがポイント高いです。 JavaScriptの専門知識がまったくなくても簡単に導入ができるのでよく利用されています。ライセンスは The MIT Licenseで商用・ ...