SSS

肩書きはWebデザイナーです。 ガジェット、おいしいコーヒー、わんこを筆頭に動物好き。

SSS

肩書きはWebデザイナーです。 ガジェット、おいしいコーヒー、わんこを筆頭に動物好き。

記事一覧

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

わけあって、メインにiPhone11を使用開始。もともとはApple好きでiPhone5からずっとiPhoneを使ってきました。がしかし。昨年カメラ性能評価が高いPixelシリーズに乗り換え…

SSS
4年前
7

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

サイト模写練習をしている人は誰もが一度は通る道 と言ってもいいでしょう。今回のポイントは”サブドメイン"にアクセス制限をかけるところです。 調べてもあんまりサブド…

SSS
4年前

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

ほとんどのサイトに設置されているであろうこのボタン。【トップページに戻るボタン】です。jQueryが使われているんです。上に一定数スクロールするとボタンが消える仕様を…

SSS
4年前
1

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

サイト模写していて、気がづいたらサイトの右に謎の余白が・・・一発で解消するCSSがあったのでご紹介します。サイト作るとき必須の一文かもしれません。 参考サイトはこ…

SSS
4年前
3

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

Webサイトでよく見かける実装に【画像の自動スライド】があります。slickを導入することで簡単に実装できたので、その流れをシェアしたいと思います。動画もあるのでぜひ参…

SSS
4年前
7

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

JavaScriptを学びはじめの初期、.jsファイルの読み込みはhtmlファイルの</body>タグの直前に書く!と学びました。でもhead内に書いてもOKな呪文があったので書きたいと思い…

SSS
4年前

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

マウスオーバーすると出てくるメニュー部分の検証がしたいけど、操作してるとマウスオーバーが消えてメニューが見えなくなる(;;)そんな経験ないですか?うまいこと検証でき…

SSS
4年前
2

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

プログラミングを学ぶ前はWebデザインのことが学びたくてPhotoshopの使い方を学ぶのに必死でした。でも、使う機能って結構限られてます。そこで今回はPhotoshopでかなり使…

SSS
4年前

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

以前作成したWebサイトの更新依頼があったので、久々にFileZilla触りました。最近WordPressなどダッシュボードばかり使っていて、FTPソフトを使う機会が減っていたので、今…

SSS
4年前
4

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

プログラミングスクールの約6ヶ月に渡る学習プログラムが終了。これまでAWSを使ってアプリをデプロイしてましたが、今回HerokuとPostgreSQLを導入してデプロイに挑戦。ロー…

SSS
4年前
3
【iPhone11はYouTubeの再生速度変更に弱い?】Pixel4は音質も優れている!

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

わけあって、メインにiPhone11を使用開始。もともとはApple好きでiPhone5からずっとiPhoneを使ってきました。がしかし。昨年カメラ性能評価が高いPixelシリーズに乗り換えてみて至極納得。今までAndroidは使いにくいというふる〜い記憶があったのですが、そんなPixelを半年使って、久々にiPhoneを触ったらどうなったかのレビューです。

【結論】Youtubeを再生速度変更

もっとみる
【ロリポップ】サブドメインにアクセス制限(ベーシック認証)をかける方法

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

サイト模写練習をしている人は誰もが一度は通る道 と言ってもいいでしょう。今回のポイントは”サブドメイン"にアクセス制限をかけるところです。
調べてもあんまりサブドメイン制限に関する記事がなかったので、もし同じように解決法探している方の一助になればと思います。

前提レンタルサーバーはロリポップです。
サブドメインは作成している前提ですすめます。
ちなみに、エックスサーバーの場合は公式に参考記事があ

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

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

ほとんどのサイトに設置されているであろうこのボタン。【トップページに戻るボタン】です。jQueryが使われているんです。上に一定数スクロールするとボタンが消える仕様を、今回実装したいと思います。

はじめにこちらの動画を参考に解説します。

サンプルコード-----------.jsファイル$(function(){ $('.scroll').hide(); $(window).scroll(fu

もっとみる
【CSS/overflow】サイトの謎の余白を解消

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

サイト模写していて、気がづいたらサイトの右に謎の余白が・・・一発で解消するCSSがあったのでご紹介します。サイト作るとき必須の一文かもしれません。

参考サイトはこちらです。

私は、bodyにdivクラス名wrapperでかこんでやって、CSSが下記の内容を当てるだけ。これでスパっと余白が消えました!

.wrapper { width:100%; overflow:hidden;}

まとめデ

もっとみる

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

Webサイトでよく見かける実装に【画像の自動スライド】があります。slickを導入することで簡単に実装できたので、その流れをシェアしたいと思います。動画もあるのでぜひ参考にしてみてください!

今回は模写練習しているサイトのTOP画像のスライダー実装にチャレンジしてみました。

なお、参考にした動画はこちらです。

流れ✔ slickをダウンロード[一部を使用]
✔ htmlファイルに画像スライド

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

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

JavaScriptを学びはじめの初期、.jsファイルの読み込みはhtmlファイルの</body>タグの直前に書く!と学びました。でもhead内に書いてもOKな呪文があったので書きたいと思います。

【結論】呪文は defer です。

こちらのYouTubeを参考にしました。めちゃくちゃわかりやすいです。JS初学者の方ぜひ動画ご覧ください。

<head> ・ ・ <script src=

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

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

マウスオーバーすると出てくるメニュー部分の検証がしたいけど、操作してるとマウスオーバーが消えてメニューが見えなくなる(;;)そんな経験ないですか?うまいこと検証できるコマンドみつけたので1つご紹介です。

すばり 【 control + shift + c 】 を使います。
今模写中のKINTOさんのサイトを参考に。
この写真上半分の白い部分が、マウスオーバーしないと出てこないメニュー。

ちなみ

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

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

プログラミングを学ぶ前はWebデザインのことが学びたくてPhotoshopの使い方を学ぶのに必死でした。でも、使う機能って結構限られてます。そこで今回はPhotoshopでかなり使う機能。切り抜き。しかも髪の毛。ここは切り抜き作業してたら絶対通る道だと思うので、ササッと手順解説してみます。

流れ✔ Adobe CC Photoshop2020を使用
✔クイック選択ツールを使用
✔ 範囲を選択

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

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

以前作成したWebサイトの更新依頼があったので、久々にFileZilla触りました。最近WordPressなどダッシュボードばかり使っていて、FTPソフトを使う機会が減っていたので、今後のためログ残しておこうと思います。同じような方参考になればと思います。

前提✔ 今回は掲載写真の変更を行います
✔ サイトはTOPページのみのHTML/CSS仕様
✔ レンタルサーバーはロリポップ
✔FTPソフト

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

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

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

rails sで起動しなくなるまでの流れをすこし書いておきます。

HerokuはPostgreSQLのデータベースを使わない

もっとみる