Web制作

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

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

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

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

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

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

Photoshopでテキストに下線をつける方法 PhotoShopでテキストに下線をつけるには 「テキストツール」の下線のボタンを押すだけです。 テキストツールを選択して文字を入力します。 メニューのウィンドウ ＞ 文字を選択して文字ウィンドウを表示します。 下線を追加したい文字レイヤー内の文字を選択。 文字ウィンドウにある「下線追加ボタン」を押します。 ちなみに縦書きの場合には左側へ線が追加されます。 ただしこのテキストツールをつかって下線を加える方法は 『テキストと下線が同じ色になる』という点に注意で ...

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

【PhotoshopCC】ガイドラインを非表示にするショートカット

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

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

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

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

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

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