CSS

背景(background)を2つ以上設置するCSSの書き方

CSSでレイアウトしていて上下に画像を配置する時、HTMLにIMGタグで配置するかCSSで「background」を使用するか迷うところ。 デザインがコンテンツぎっしりの場合、HTMLにIMGタグで書くとぐちゃぐちゃになっちゃうから、そんな...
PHP

【PHP】PHPでリダイレクト

本当は「.htaccess」内で書いた方が良いですが、色々な事情でphpでのリダイレクトは、phpファイルの先頭に以下の関数を記述すれば可能です。 「Location:」の後のURLはリダイレクト先のURLにしてください。 「true, 3...
javascript

【jQuery】ソート機能を自力で実装

jQueryでソート機能を作るには、何かのリストが沢山ある必要がある。 なにのリストにしようか........ネジメーカーにしようか! 山手線の連結部分は、沢山のネジで止めてあるからこれ全部取ったら、後ろの車両との連結ができなくなっちゃうの...
javascript

【jQuery】特定文字列が含まれているかを判定|:contains()

特定文字列が含まれている時、手間かかるかもと思っていたけどif文も書かずにクリア出来て嬉しかったのでご紹介します。 今回はリストの中に、特定文字が存在していたらを判断します。 下のボタンを押して特定文字列が含まれる文字色を変更します。 Go...
CSS

【CSS】テキストを左揃え、右揃え、中央揃え

テキストの中央揃え、右揃え、左揃えはページを作っていると必ず出てくる指定の一つ。 それらの指定プラス、行が多くなった時に綺麗に見える指定方法をDEMOと一緒に見ていきましょう。 中央揃え 初めての真ん中ブログ CSS p { text-al...
javascript

ビンゴ抽選をjQueryで作る!

Youtuber江頭さん、元SMAP草薙さんのチャンネル登録者数が100万人達成したよって動画見てなんかすごい時代だなぁ~って思いつつ。 今回はjQueryでクリック数の取得をしてみたいと思います。 さらに、応用編があるのでそちらも見てくだ...
javascript

【jQuery】ドロップダウンメニューをコピペで簡単に作る方法

ドロップダウンメニューをHTMLとCSSとjQueryで簡単実装しよう! DEMO ドロップダウンメニュー ドロップダウン1 ドロップダウン2 ドロップダウン3 ドロップダウン4 ドロップダウン5 ドロップダウン6 下のHTMLとCSSとj...
javascript

【javascript】コピペで簡単にスライドショーを設置する方法【Swiper.js】

自力でスライダーを設置するのは簡単だが、スライダーの「当たり前」機能を付けるのがすごい手間だったりする。 「レスポンシブ対応」や「スワイプやマウスオーバーでの操作」、「スライドの数が増えた時のスクリプト、スタイルの修正」、「Next,Pre...
CSS

【CSS】画像を隙間無く横並びにするいくつかの方法

画像を横並びにする時なぜか空く隙間。 その隙間を埋めてレイアウトする方法をいくつか紹介します。 CSSでのレイアウトで利用しやすいものをご利用ください。 【inline-block】で横並び 要素を横並びにする時よく使うのが「display...
CSS

【CSS】テキストの縦書き!

「和」を感じさせるサイトや、「西尾 維新」のサイトのように原稿をテーマにしたサイトを作る時、必ず必要になるHTMLでの文章の縦書き方法を解説。 文章の縦書き 全ブラウザがこのタグに対応しているが、IE11だけにはベンダープレフィックスを付け...
HTML

【HTML】外部ファイルの読み込み方法

HTMLで外部ファイルを読み込む時、CSSとJSファイルでは書き方が違うから「あれ?」って忘れがち。 そんな外部ファイル群の読み方まとめ。 外部ファイルには、画像やビデオなどの「コンテンツファイル」と処理が書かれた「プログラムファイル」が存...
CSS

CSSはどこに書くのが最適なのか

CSSの書くところは大きく分けて3つある。 インラインで書く HTMLファイルに直接記述する。 インラインで書く場合、なるべく「head」内にスタイルを記述。 「head」内に書かなくてもスタイリングできるけど、コードが読み辛くなるのでなる...
CSS

ニューモフィズム・ジェネレーター

2020年3月現在。最近流行っているニューモフィズムのジェネレーターがあると聞き使ってみたくなった。 そもそもニューモフィズムってな~に? ニューモーフィズムは、一昔前に流行った「スキューモーフィズム」のリアルな質感と、フラットやマテリアル...
CSS

ドラッグで変化するカーソルの作り方|CSS

Swiper.jsなんかを使う時、ドラッグして横にスライドできるけど 矢印のままじゃユーザーに分かりずらいから、 ちゃんとスライドできる範囲は「パー」にしてドラッグしたら「グー」にするCSS。 【DEMO】 お分かりいただけただろうか? エ...
CSS

CSS|iOS safariで滑らかスクロール

iOSで厄介な挙動をするCSSの「overflow:scroll;」でいつも通りの慣性スクロールを実現。 -webkit-overflow-scrolling: touch;
広告