blog

jQuery

appendで追加した要素をクリックできないときの対処方法

クリックで何か処理をしたいときにjQueryを使えば1行で書けてしまいますがたまにクリックイベントが効かないということがあります。 原因として多いのがクリックさせるための要素をappendで追加したときです。 appendでと...
css

ローディングをhtmlとcssで作成する

今回は、htmlとcssを使ってローディングを作成します。 ローディングはぐるぐる回るやつですね。 読み込んでいるときにローディングを見せることが多いですね。 ローディングを作る html <div c...
jQuery

jQueryでアコーディオンを作る

今回は、Webサイトでよく使うアコーディオンを紹介していきたいと思います。 アコーディオン html <ul> <li class="btn close">アコーディオン1 <ul clas...
css

【Line風】メッセージやり取り画面のレイアウトを作成

Lineを使ったことがある人は多いと思います。 Lineといえば相手から来たメッセージや画像などが左側に表示され自分が送った内容は、右側に表示されるレイアウトになっています。 そして既読されたら既読のテキストが表示されます。 ...
css

グリッド風の日本地図をhtmlとcssを使って作成

1マスずつを組み合わせてグリッド風の日本地図をhtmlとcssで作成しました。 海の部分も1マスずつなのでソースはかなり長くなってしまいましたが。 1マスずつを組み合わせれば日本地図だけでなくいろいろな絵だったりキャラクターも...
css

lightboxの閉じるボタンを右上に移動したい

lightboxは通常、右下に閉じるボタンが表示されます。 しかしデザインによってどうしても右上に移動しないといけない! なんてこともあると思います。 構造的にcssだけで右上に持ってくるのは難しいのでプラグインのjsを...
css

【iOS】inputをフォーカスするとズームされてしまう問題を解決する

iOSでinput要素などのテキストボックスをフォーカスするとズームされてしまうという問題があります。 Androidなどでは平気なんですがiOSだとフォントサイズによってズームされてしまいます。 この現象はinputのフォン...
jQuery

JavaScriptでキャンペーンでよく使うカウントダウンタイマーを作る

キャンペーンなどで期限が決まっている場合にあと何日までかを表示したいという要望が来ることもあると思います。 そんなときはjavascritpを使いカウントダウンタイマーを入れてみましょう。 カウントダウンタイマー js ...
css

letter-spacingを指定していると文字が中央にならずに少しずれる

文字の間隔を調整するcssとしてよく使われるのが「letter-spacing」です。 文字と文字の間を調整することでテキストの見やすさだったり見た目も変わります。 ですが「letter-spacing」を使用していると左揃え...
WEB

httpとhttpsの違いとhttps化(常時SSL化)させる方法

webページを閲覧したときURLを見ると「http://」から始まるものと「https://」の2種類があるということに気がついた人も多いと思います。 この2つはページにアクセスするときにどのような通信手段を用いるかといった違いがあ...
タイトルとURLをコピーしました