MENU

CSSでリストの最初だけborderなどのスタイルを打ち消すベストな方法

Webデザインがよくできるという人でも意外と使ってしまっているのがCSSの打ち消しです。CSSの設計上、打ち消しというのはあまりよくありません。none とか 0 とか初期のスタイルをわざわざ書いているからです。そこで、できるだけ打ち消しをしないコーディングの一例として今回の方法を紹介します。 多くの人がやっている打ち消し

CSS3で作るマウスホバーするとぼよーんとアニメーションするエフェクト

CSS3を使って滑らかにアニメーションするエフェクトです。以下のデモでは、ボタンを例にしていますが、画像などにも使えるエフェクトとなっています。サイトのワンポイントとして導入してみるといいかもしれません。 デモ Button ボタンにマウスをもっていくとぼよーんとアニメーションします。 HTML

CSSで文字列をドラッグして選択したときの色や背景色を変更する

意外と多くのブラウザに対応しているテクニックです。IE9+とモダンブラウザで使用可能です。こういった細かいところもしっかりとカスタマイズしてあるサイトを見るとほっこりします。 テキスト選択時の色を指定できる 通常は、文字を選択するとこんな感じの色ですよね。 テキスト選択時の色を指定できる .

WordPressでオリジナルSNSボタンを設置するときに注意すべきこと

やっぱりオリジナルテーマでブログをやるなら、公式のSNSボタンは使わないですよね。デザインに統一性がなくなってしまいます。今回は、オリジナルTwitterボタンを設置するときの注意点を紹介します。 つぶやけない記事がある Tweetボタン Tweetボタンのリンクはこんな感じで書きますよね。これをWordPressの

jQueryでフォームが空の状態でエンターを押したときsubmitを無効にする

楽天goldでamazon風に検索できるトップページを作ったときのメモです。普通、input要素はエンターを押すと自動的にsubmitボタンが押される仕組みになっています。でも、検索フォームに何も文字を入れていないのに、エンターを押したら勝手にsubmitされてしまうのはユーザービリティーを考えるとよくないですよね。そこで、jQueryを

JavaScriptやjQueryで関数のオーバロードを擬似的に実装する

JavaやC++では関数のオーバロードを当たり前のように使っていますが、JavaScriptでは一切使っていませんでした。というか、JavaScriptでオーバロードするという考えさえ思いつきませんでした(笑)。どうやら、JavaScriptでは関数のオーバロードは無いようですが、擬似的に実現する方法はあるので、それを紹介したいと思いま

CSS3のメディアクエリをjQueryでも使えるようにする

CSS3メディアクエリ便利ですよね。これを使ってjQueryで条件分岐したい場合もあると思います。特にレスポンシブデザインのサイトなんかだと使う機会も多いと思います。単純に思いつくのが、メディアクエリと同様にブラウザ幅をjQueryで取得して条件分岐すればいいのでは...なんて考えると思います。が、それだとブラウザによって誤差が出てしまう

CSSだけでハイクオリティーなモーダルウィンドウを作る

すごく時間かかりましたが、ついに完成しました! とりあえずPC版のみの対応です。JSを一切使わずCSSだけでモーダルウィンドウを作ることができました。モダンブラウザ向けなのでブログに組み込んだりできます。よくネットに載っている方法は:targetを使った方法です。これだとモーダルウィンドウを表示する度に履歴に追加されるので戻るときにまた

C++で整数や小数の桁数を文字列に変換してからカウントする

ネットで検索してもなかなか載っていなかったので、自作しました。載っていないということはこれくらいできて当然ということなのでしょう(笑)。 ソースコード 考え方は単純で、まず入力された小数(または整数)を文字列に変換します。次に小数点の位置('.')を見つけてそれより前は整数部、それよりあとは小数部というように分けて桁数をカウン

CSSでWebサイトの左右2カラムの背景色を別々に指定する

フラットデザインが流行してから、画面を左右に分けて色も別々にするというデザインが増えてきています。今回は最も簡単にできる方法を紹介します。 まず、従来のレイアウト方法について見ていきましょう。 普段使用するレイアウト法 こんな感じに2カラムで分けるとき、①と④は、②と③をmargin: 0 auto;にして中央
5 / 512345