サイト制作する上で必要になってくるHTML/CSSやSEOに関する投稿や、レンタルサーバーの情報などを大雑把にまとめているカテゴリーです。
カテゴリーをしぼって読みたい方は以下からおすすみください。
SEO・集客Core Web Vitalを改善する
Search Consoleに「ページエクスペリエンス」という項目ができているわけですが、きちんと確認はされていますでしょうか？ 弊社ブログでは...
HTML/CSSVimeoの埋め込み動画に関する備忘録
サイト高速化の案件で、vimeoのiframeについて色々調べたので備忘録に残しておきます。 ネイティブLazyLoad iframeコー...
HTML/CSS画像やiframeのサイズ(アスペクト比)を指定できるcssプロパティ、「aspect-ratio」
aspect-rarioプロパティ レスポンシブデザインにおいて、画像のサイズ（アスペクト比）は、width height属性をきちんと記述しておけ...
HTML/CSScss一行でできるCLS改善（slick.jsの場合）
slick.jsを使用している場合にcss一行でできるCLS対策を解説します。CLSとはページ描画後に発生するレイアウトのガタつき度合いです。影響を受けた範囲×移動した％で算出されるので、ページ上部に使われやすいスライダーはCLSの値が大きくなる原因となりやすいです。
HTML/CSSレスポンシブ画像のまとめ
ブラウザサイズや解像度（retinaディスプレイ / デバイスピクセル比）に応じて画像ファイルを振り分けるレスポンシブイメージ。srcset sizes などのタグを使ったレスポンシブ画像の記述方法についてまとめます。
HTML/CSSモダンブラウザのconic-gradient対応が完了していた
円錐状のグラデーションを描写するconic-gradient。conicはconicalのことだそうです。コーヒーミルの種類にコニカルカッターってありますけど...
HTML/CSSfont-sizeはclamp()関数で指定するのが良さそう
これまでcssのサイズ指定はスクリーンサイズ別に指定していましたが、clamp関数を使うことで一行にすべてが収まります。たとえばwidth:50vw;min-width:300px;max-width:1000px というcss指定は、width:clamp(300px,50vw,1000px); の一行に収まります。
HTML/CSSCSS:text-decorationでできること
text-decorationプロパティは以下のプロパティを一括指定するショートハンドです。text-decoration-line（線の位置） text-decoration-style（線の形） text-decoration-color（線の色） text-decoration-thickness（線の厚み）
HTML/CSSslick.jsのオプション設定をPC / モバイルで切り替える
slick.jsのレスポンシブ設定について説明します。レスポンシブ設定といっても『viewportに合わせたサイズで表示する』といった話ではなく、たとえばPCビューではドットを表示する、タブレット以下では表示しない、などのオプション切り替えの話です。slick.jsにはresponsiveオプションがあらかじめ用意されているので、respoinsiveオプションで、breakpointとsettingsを指定してやるだけです。respondToではレスポンシブ設定を基準を指定します。
HTML/CSSサイトをダークモードに対応させる
長引く自粛につれてディスプレイを眺めている時間が増え、ダークモードを利用する人が急に増えたような気がします。 身近になったダークモードですが、ブ...
HTML/CSSoption名が長すぎて表示できない問題にはoptgroup
optionの名前が長すぎると、画面幅からはみ出た部分が表示されない問題が起こりますが、optgroupタグで入れ子にすると自動的に改行、または文字サイズが縮小され途中で省略されずに表示できるようになります。
HTML/CSS疑似要素 nth-child の使い方いろいろ
今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。 初見でかるい気持ちで使用すると、css指定が効か...