JavaScript

jQueryでサイト全体の文字サイズを変更する

こんにちは、ゆんつです。 WEBサイトを閲覧していて文字の大きさを変更する場合。 各ブラウザに搭載されている文字の拡大表示機能などを使うことで文字の大きさを変更することができます。 ただし、そのような…

HTML&CSS

HTMLとCSSでスイッチを作る

こんにちは、ゆんつです。 WEBサイトで良く見かけるものに「スイッチ」があります。 オフの時はスイッチが左側で、マウスをクリックしてオンにするとスイッチが右側に移動する。 ON/OFFの切り替えなので…

HTML&CSS

animationプロパティと@Keyframesの基礎

こんにちは、ゆんつです。 WEBサイトにちょっとしたアニメーションを導入したい場合。 CSSのanimationというプロパティと@keyframeを組み合わせて使うことで実装することができます。 例…

HTML&CSS

Gridの基本的な使い方

こんにちは、ゆんつです。 WEBサイトを作成していて と思ったことは無いでしょうか。 例えば以下のようなレイアウトがそうです。 見ていただくとわかるように、様々なサイズのボックスに画像が表示されていま…

その他

phpMyAdminを使ったデータベースの移行作業

こんにちは、ゆんつです。 PCの買い替えなどでローカル環境にあるMySQLのデータベースを別のPCに移行したいことがあります。 このような場合、「phpMyAdmin」を使って手軽に移行元のPCからデ…

JavaScript

「jquery.simpleTicker.js」でお手軽ティッカー

WEBサイトを見ているとたまにヘッダーの下あたりに、お知らせなどの情報が流れている光景を見かけることがあります。 このように特定の場所に文字列を流して表示させる方式を「ティッカー」と言います。 流れて…

HTML&CSS

object-fitで画像を指定したサイズにピッタリ合わせる

こんにちは、ゆんつです。 大きさや縦横比が全くバラバラの画像がここにあります。 1:1(横120px縦120px) 3:2 (横180px縦120px) 4:3 (横240px×縦180px) この画…

JavaScript

「jquery.mb.YTPlayer」でYouTubeを背景にする

こんにちは、ゆんつです。 YouTubeの動画を背景として利用したい場合。 ・CSSで調整する方法 ・jQueryのプラグインを使う方法 などがあります。 前回はCSSを使ってYouTubeを背景に設…

HTML&CSS

CSSでYouTubeを背景にする

こんにちは、ゆんつです。 WEBサイトを作成しているときに「背景にYouTubeの動画を使いたい」というときがあります。 自分のサーバーに動画をアップロードして背景に使用するよりも、YouTubeに動…

HTML&CSS

マウスカーソルが乗ったらカバーをかける

こんにちは、ゆんつです。 WEBサイトを見ているとメニューなどの項目にマウスカーソルを乗せると、メニューの上や下からカバーのような感じで新たな要素が覆いかぶさってくるデザインをたまに見かけます。 マウ…