生活

スクロールに追尾していくバナー「フローティングバナー」をCSS作ります。 ポイントとしては ・position: fixed,bottom:0;の指定 ・z-indexの指定 の設定です。 position: fixed + bottom:0にすることで画面下にブロック要素を固定配置します。 z-indexを指定しないと、他のレイアウトにpositionをつかって配置している場合にスクロールしているとフローティングバナーが隠れて表示されてしまうことがあります。 z-indexは大きい値が上に表示されます。 ...

起業してこれからガンガン仕事をしていこうとするときオフィスを用意するケースがあります。 バイトや社員をやとったり、客と打ち合わせをするのであればオフィスが必要になりますよね。 その時、困るのが「オフィスの家具」の導入です。 家具って仕事用途して揃えると結構高いので初期コストがかかります。 資金繰りの心配な状態ですと家具を揃えるための資金を用意するのも大変ですよね。 そこで近年利用されているのが【家具のサブスクモデル】「subsclife」です 「subsclife」代表的な導入事例 ポイント・株式会社PO ...

AppleIDの詐欺メールが届いているケースが増えていますが、 Amazonのアカウントでも同様の詐欺メールが届きましたので警戒したい事例を紹介します。 突然Amazonから「あなたのアカウントは停止されました。」のメールが届く ぱっと見でAmazonのロゴが大きく表示されているので紛らわしいのですがこれは詐欺メールです。 メールの文面 お客様各位、 あなたのアカウント cherinuno@yahoo.co.jp は、疑わしい場所から最近アクセスされました。 内にこのメッセージを確認するまで、お客様のアカ ...

数ある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 ...

警戒レベルについて 気象警報・注意報に対して「警戒レベル」が定義されています。 気象庁 ｜ 気象警報・注意報 避難勧告に関するガイドラインの改定（平成30年3月29日）: 防災情報のページ - 内閣府 避難所開設状況の調べ方 一度はチェックしてどんなことが書いてあるか把握しておきたい防災ハザードマップ 「防災ハザードマップ（水害・津波・地震、土砂災害）」が各自治体からPDFで公開されています。 「千代田区 防災ハザードマップ」といったように「自治体名」＋「防災ハザードマップ」で検索します。 この防災ハザー ...

Twitterアプリは複数アカウントの切り替えが可能 Twitterはメールアドレスがあれば複数のアカウントを持って利用ができます。 このアカウントは趣味用で、このアカウントは情報収集用で…と用途別にアカウントの利用を分けて使いたいシーンはよくあります。 Android,iPhone向けのTwitterの公式アプリではすでにアカウントの切り替えができるようになっています。 Twitter Twitter, Inc.無料posted withアプリーチ しかしPCのブラウザでTwitterを使っているとアカ ...

【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レイアウトができない という初歩ミスにハマってしまい ...