sayaka＠犬と軽バン旅

個人事業者や中小企業のコーポレートサイトを中心にWeb制作しています。 ガジェット、お…

sayaka＠犬と軽バン旅

個人事業者や中小企業のコーポレートサイトを中心にWeb制作しています。 ガジェット、おいしいコーヒー、わんこを筆頭に動物好き。 現在はシニア中型犬と暮らし中。

【iPhone11はYouTubeの再生速度変更に弱い？】Pixel4は音質も優れている！

わけあって、メインにiPhone11を使用開始。もともとはApple好きでiPhone5からずっとiPhoneを使ってきました。がしかし。昨年カメラ性能評価が高いPixelシリーズに乗り換えてみて至極納得。今までAndroidは使いにくいというふる〜い記憶があったのですが、そんなPixelを半年使って、久々にiPhoneを触ったらどうなったかのレビューです。 【結論】Youtubeを再生速度変更して聞く人にとっては違和感あり 前提として普段のわたしのスマホ用途ランキング

sayaka＠犬と軽バ…

    • 【ロリポップ】サブドメインにアクセス制限（ベーシック認証）をかける方法

      サイト模写練習をしている人は誰もが一度は通る道 と言ってもいいでしょう。今回のポイントは”サブドメイン"にアクセス制限をかけるところです。 調べてもあんまりサブドメイン制限に関する記事がなかったので、もし同じように解決法探している方の一助になればと思います。 前提レンタルサーバーはロリポップです。 サブドメインは作成している前提ですすめます。 ちなみに、エックスサーバーの場合は公式に参考記事があります。 https://www.xserver.ne.jp/manual/ma

      sayaka＠犬と軽バ…

      • 【jQuery】スクロールするとTOPページに戻るボタンが消える実装

        ほとんどのサイトに設置されているであろうこのボタン。【トップページに戻るボタン】です。jQueryが使われているんです。上に一定数スクロールするとボタンが消える仕様を、今回実装したいと思います。 はじめにこちらの動画を参考に解説します。 サンプルコード-----------.jsファイル$(function(){ $('.scroll').hide(); $(window).scroll(function(){ if($(this).scrollTop() > 100

        sayaka＠犬と軽バ…

        • 【CSS/overflow】サイトの謎の余白を解消

          サイト模写していて、気がづいたらサイトの右に謎の余白が・・・一発で解消するCSSがあったのでご紹介します。サイト作るとき必須の一文かもしれません。 参考サイトはこちらです。 私は、bodyにdivクラス名wrapperでかこんでやって、CSSが下記の内容を当てるだけ。これでスパっと余白が消えました！ .wrapper { width:100%; overflow:hidden;} まとめデベロッパーツールで試行錯誤していましたが、同じように謎の余白で苦しんでいる方ぜひ

          sayaka＠犬と軽バ…

        【iPhone11はYouTubeの再生速度変更に弱い？】Pixel4は音質も優れている！

        sayaka＠犬と軽バン旅

          【jQuery】slickを使った画像のスライドの実装方法

          Webサイトでよく見かける実装に【画像の自動スライド】があります。slickを導入することで簡単に実装できたので、その流れをシェアしたいと思います。動画もあるのでぜひ参考にしてみてください！ 今回は模写練習しているサイトのTOP画像のスライダー実装にチャレンジしてみました。 なお、参考にした動画はこちらです。 流れ✔ slickをダウンロード[一部を使用] ✔ htmlファイルに画像スライドのベースを記載 ✔ jQueryが使えるようにCDNを導入 ✔ JSファイルにコ

          sayaka＠犬と軽バ…

          【jQuery】slickを使った画像のスライドの実装方法

          sayaka＠犬と軽バン旅

          【Javascript】headタグ内に書いてもOK！.jsファイルを読み込ませる方法

          JavaScriptを学びはじめの初期、.jsファイルの読み込みはhtmlファイルの</body>タグの直前に書く！と学びました。でもhead内に書いてもOKな呪文があったので書きたいと思います。 【結論】呪文は defer です。 こちらのYouTubeを参考にしました。めちゃくちゃわかりやすいです。JS初学者の方ぜひ動画ご覧ください。 <head> ・ ・ <script src=script.js defer></script></head> まとめどうで

          sayaka＠犬と軽バ…

          【Javascript】headタグ内に書いてもOK！.jsファイルを読み込ませる方法

          sayaka＠犬と軽バン旅

          【control+shift+c】マウスオーバーで出てくるメニューの検証方法！

          マウスオーバーすると出てくるメニュー部分の検証がしたいけど、操作してるとマウスオーバーが消えてメニューが見えなくなる(;;)そんな経験ないですか？うまいこと検証できるコマンドみつけたので１つご紹介です。 すばり 【 control + shift + c 】 を使います。 今模写中のKINTOさんのサイトを参考に。 この写真上半分の白い部分が、マウスオーバーしないと出てこないメニュー。 ちなみに次の写真は、メニューが表示されていない状態。 ここで、マウスオーバーしたい状

          sayaka＠犬と軽バ…

          【control+shift+c】マウスオーバーで出てくるメニューの検証方法！

          sayaka＠犬と軽バン旅

          【Photoshop】クイック選択ツールで髪の毛の切り抜きかんたんにデキます。

          プログラミングを学ぶ前はWebデザインのことが学びたくてPhotoshopの使い方を学ぶのに必死でした。でも、使う機能って結構限られてます。そこで今回はPhotoshopでかなり使う機能。切り抜き。しかも髪の毛。ここは切り抜き作業してたら絶対通る道だと思うので、ササッと手順解説してみます。 流れ✔ Adobe CC Photoshop2020を使用 ✔クイック選択ツールを使用 ✔ 範囲を選択 ✔ 選択範囲をマスクして境界部分を調節 ✔ 切り抜いて完成！！ 今回はライオンの

          sayaka＠犬と軽バ…

          【Photoshop】クイック選択ツールで髪の毛の切り抜きかんたんにデキます。

          sayaka＠犬と軽バン旅

          FTPソフト【Filezilla】を使ったサイト更新作業の流れを解説

          以前作成したWebサイトの更新依頼があったので、久々にFileZilla触りました。最近WordPressなどダッシュボードばかり使っていて、FTPソフトを使う機会が減っていたので、今後のためログ残しておこうと思います。同じような方参考になればと思います。 前提✔ 今回は掲載写真の変更を行います ✔ サイトはTOPページのみのHTML/CSS仕様 ✔ レンタルサーバーはロリポップ ✔FTPソフトはFilezillaを使います 流れ①FilleZillaをダウンロード ②サ

          sayaka＠犬と軽バ…

          FTPソフト【Filezilla】を使ったサイト更新作業の流れを解説

          sayaka＠犬と軽バン旅

          rails s してもローカルでサーバーが動かなくなったときの対処法

          プログラミングスクールの約6ヶ月に渡る学習プログラムが終了。これまでAWSを使ってアプリをデプロイしてましたが、今回HerokuとPostgreSQLを導入してデプロイに挑戦。ローカルでrails sを叩いても動かなくなるという状況になり、解決ログを残したいと思います。 rails sで起動しなくなるまでの流れをすこし書いておきます。 HerokuはPostgreSQLのデータベースを使わないといけないようで、PostgreSQLを導入しました。そしてHerokuのアカウ

          sayaka＠犬と軽バ…

          rails s してもローカルでサーバーが動かなくなったときの対処法

          sayaka＠犬と軽バン旅