CSS 【CSS】画面が左右に動いてしまう問題 ②
サイト制作をしているときに、画面が左右に動いてしまい、スクロールが不安定になってしまうことがありました。そこで対策方法がわかったので共有します。最初に、はみ出ている要素がないか確認します。padding等で、横幅100％からはみ出しているこ...
サイト作成
CSS 
SEO 【SEO】PageSpeed Insights「第三者コードの影響を抑えてください」をタグマネージャーを用いて対応
PageSpeed Insights で、ページの表示速度がどのくらいなのか計測することができます。ページの表示速度を上げることは、SEO対策として重要です。私の過去の記事でも、Wordpressで作成したサイトの速度を上げることについて掲...
Github 【Github】マークダウン画像の大きさを変更するメモ
<img src="ここに画像のURLが入る.jpg" width="50%">普通に画像を貼り付けると、大きく表示される↓!(これを<img src="ここに画像のURLが入る.jpg" width="50%">これに変えると大きさが変わ...
HTML パンくずリストメモ
SEO効果JSON-LD、microdata、RDFamicrodata、RDFaという書き方がある。JSON-LD形式は、現在Googleの構造化データのマークアップとして推奨されている。JSON-LD形式を書いても、ページには表示されな...
CSS 【CSS】背景の区切り
オシャレなサイトやLPページでは、セクションの分かれ目でデザイン性のある背景の区切りが使われています。このサイトでは、素敵な区切りを作成できるもので、CSSをコピペすることができます。三角の区切りこんな感じの区切りを作ります。<!-- 背景...
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;}/* スクロールするとヘッダーが...
HTML 謎の空白「$#xfeff」
サイト作成をしていた際に、1つのページだけ謎の空白ができていました。そこで、デベロッパーツールで調べてみると、そこの部分に「$#xfeff」というものが入っていることに気づきました。スマホでも確認してみると、余白ではなく、改行がされている様...
CSS 【CSS】ヘッダーを固定にして追従させる方法／超簡単に説明！
ここでは「position: fixed」を使用した方法について解説します。① position: fixed「position: fixed」を使用し固定させる例position: fixed; /* 位置を固定する */top: 0; ...
Wordpress 【WordPress】子テーマの作り方、アップロードできない時確認したいこと
このサイトはWordpressの無料テーマ「cocoon」を使用しています。cocoonは、子テーマを使用したいとき、専用のファイルがあるのでそれをダウンロードしてアップロードすれば簡単に有効化できるのですが、ほかのテーマを使用しているとき...
CSS 【CSS ネタ帳】文字＋画像のカードの作成、レスポンシブデザイン
完成図※私が作成しているサイトを例にしています。PCモバイルPCだと横並び、モバイルだと縦になるようにしています。HTML※ インデントめちゃくちゃ <!--文字の横にテキスト--> <div class="profile-containe...
CSS 【CSS ネタ帳】CSSのみのハンバーガーメニュー
完成図※私が作成しているサイトを例にしています。HTML※ インデントめちゃくちゃ<!--モバイル用のメニュ--> <div class="hamburger-button"> <input type="checkbox" id="chec...
CSS 【CSS】画像の隣に文字がくるコンテンツの実装
CSS/*画像の隣に文字が来るようなカード*/.card-container{ display:flex; justify-content: center; align-items: center; max-width: 100%; /*親...
CSS 【CSS】「border-radius」使い方メモ／角を丸くする
border-radius とは要素の四隅の角を丸くするためのCSSプロパティーのことです。背景も画像もこれで丸くすることができます。使い方同じ角度の丸み半径10pxの角丸border-radius: 10px; 四隅がそれぞれ違う角度下記...
CSS 【CSS】Grid Layout
Grid Layout とは格子状のマス目をベースとしてレイアウトを組むときに使うもの。似ているもので「Flexbox」があります。Flexbox との違いFlexboxは一方方向でのレイアウトに対して、Grid Layout は縦横自在に...
HTML 【HTML】div、p、span タグの使い分けメモ
div タグウェブページのセクションやブロックを定義p タグ段落を定義span タグ文中の一部を囲むときに使う特定のテキストを強調するときなど
HTML 【HTML】「article」の使い方メモ／コンテンツをグループ化
articleサイトの中で記事やコンテンツの独立したセクションを定義articleで囲むことで独立した要素になるページの構造を明確にし、コンテンツをグループ化するための重要なものです。<article class="post-item"> ...
CSS 【CSS】「display」 の使い方／要素の表示形式
display とはCSSのプロパティの一つで、要素の表示形式を決めるものです。わかりやすい画像をお借りしました。（サルカワさんのサイト）それぞれの意味と使い方display: blockブロックの前後には空白、縦に並ぶのが特徴・幅と高さを...