🔰はじめての方へ

プログラミング

CSS

【サイト作成】画面が動いてしまう問題 ①

サイト作成し、スマホで確認した際に、画面が左右に動いてしまうことがありました。縦のスクロールだけでいいのに、横にスクロールできるような感じです。そのままにしてもいい感じもしましたが、LPの作成だったので訪問してくれるユーザーが煩わしくてペー...
CSS

【CSS】リストの改行をそろえる、アイコンを画像にする、アイコンと文字の高さを揃える!

改行を揃える方法これをこれにします。/* リストの改行の位置をそろえる */.list { margin-left: 2.3em; text-indent: -2.3em;}大きさは、アイコンの大きさによって調整します。リストのアイコンを画...
CSS

【CSS】オシャレな境界線と、白い線を消す

ギザギザ、尖り、丸い境界線が作れるオシャレな境界線を作ることに関しては、別のページでも紹介しています。境界線をつけると、白い線がついてしまう問題境界線をCSSで作ると、白い線ができてしまうことがあります。これを解消する方法をご紹介します。c...
CSS

【CSS・js】ヘッダーをスクロールに合わせて表示・非表示させる(jQueryなし)

header { position: fixed; top: 0; left: 0; z-index: 99; height: 5.5em; transition: transform 0.3s 0.1s;}/* スクロールするとヘッダーが...
CSS

PNG形式の画像に影をつけたいけどうまくいかない!

PNG画像で、周囲の背景は透過しているとき、「box-shadow」で影をつけると、透過しているところにも影がついてしまいました。わかりにくいのですが、角丸なのに、四角として影がついており、白くなってしまいます。この時に便利なのが、filt...
HTML

謎の空白「$#xfeff」

サイト作成をしていた際に、1つのページだけ謎の空白ができていました。そこで、デベロッパーツールで調べてみると、そこの部分に「$#xfeff」というものが入っていることに気づきました。スマホでも確認してみると、余白ではなく、改行がされている様...
JavaScript

vue.js はじめかたメモ

環境作り① node.js ダウンロード詳しくは下記記事参照② VSCode起動③ 表示→ターミナル を開いて「npm create vue@latest」と入力④ Ok to proceed? (y) とでてくるため、「y」と入力⑤? P...
node.js

node.js インストール方法/Windows

① Node.jsの公式ウェブサイトにアクセス② LTSをダウンロード③ ダウンロードされたファイルをダブルクリックしてインストールインストーラーの指示に従ってインストール※ 英語ででてくるが、特に設定は変えなくていい④ 再起動⑤ コマンド...
PowerShell メモ

PowerShell メモ

PowerShell メモ① window+R ② 「PowerShell」を入力してだすコマンドプロンプトより新しいため、powershellの方がいいVScodeのターミナルでもOK
HTML

ファビコンが表示されない

表示されないことについて調べると、いろんなところで出てくるのがキャッシュを消せと。キャッシュを消しても、ちゃんと載っているかわからない時、調べるサイトがありました。これで確認すると、パスの誤りや、サーバーのアップロード先の誤りなどが見つかり...
HTML

【HTML】Googleマップ載せる方法

① Googleマップで載せたい場所を検索共有ボタンを押すと、下記の表示が出るので、「地図を埋め込む」を押すとHTMLコードが出てくる。② HTMLに記入小サイズにすると、widthは400とHTMLにでてくる。%しておいた方がコントロール...
CSS

【CSS】アイコンと文字を上下中央に

こうなってしまっているのをこれにしたい!① アイコン+文字のクラスに「display: inline-block;」「vertical-align: middle;」を指定② アイコンに「vertical-align: middle;」を指...
JavaScript

【swiper】スライドショーの画像をPCとモバイル用で変更

モバイルでは丁度いいサイズでも、PC端末で表示すると、画面いっぱいに画像が出てきて見苦しかったので、それぞれ画像を分けることにしました。swiper については他にも記事にしているのでご参照ください。概要サムネイル付きスライドページネーショ...
CSS

【CSS】ヘッダーを固定にして追従させる方法/超簡単に説明!

ここでは「position: fixed」を使用した方法について解説します。① position: fixed「position: fixed」を使用し固定させる例position: fixed; /* 位置を固定する */top: 0; ...
CSS

【CSS】アイコンの色を変える

完成図もともと黒だったものを変更しました。フィルター機能で変更する!invert (階調) sepia(セピア) saturate(彩度) hue-rotate(色相) brightness(明度)これらを使用して、色を作成するだけです。....
CSS

【CSS】ギャラリーレイアウト/Grid Layoutで複雑なレイアウトも簡単にできる

ギャラリーのレイアウトは、少し考えたら簡単にできました!イメージしてから組むとわかりやすいです!ここではグリッドレイアウトを使用しています。グリッドレイアウトの応用編ですね!グリッドレイアウトについては下記記事にもしているので、ご参照くださ...
JavaScript

swiper ページネーションが途中で消える問題

対処法原因がわからなかったので、ページネーションを外に出したりしたのですが、レスポンシブにするのが難しくて、なんどもトライアンドエラーしました。そしてたどり着いたのが、ページネーションのコードを書く位置!<div class="swiper...
JavaScript

swiper サムネイル付きスライド 読み込めないときに確認したいこと

swiper の導入方法や書き方などは別の記事にしているので、ご参照ください。ここでは、私が見落としがちだったポイントを説明します。【確認①】HTMLの書き方必須事項を確認しましょう!コピペしたりしていると、必須classが入っていなかった...
JavaScript

スライドショーができる【swiper】メモ

swiperとはJavaScriptのライブラリjQueryを使用せず、HTML、CSS、JavaScriptでスライドショーができます。導入方法NPMCDNダウンロードこの3つの方法がありますが、ファイルをダウンロードして使うことがおスス...
HTML

HTMLのルール(全角スペースを使用しない)

HTMLにはルールがあるようで、初心者の私はわかりませんでした。教えてもらったものをご紹介します。全角スペースは使わないキーボードで入力する全角スペースは推奨されていません。理由は下記のとおりです。・複数人でコードを共有する場合に、ミスなの...