Factory制作メモとか、趣味とか、雑記。2023.11.28メモ。id="wrap"><header></header><main></main><footer></footer></div></body></html>jQueryは一蓮托生になってるので必須。IconsというかWEBフォント周りはpreloadしないとしんどいので<head>に書く。汎用cssはwp作業が多いので直下。jsはページ別とか用途別で小分けにすると多いけど総量的には多くないので基本的に一元管理。#wrapは活躍することはあまりないけど、bodyにclassやstyleを振るのが好きでないので代用の意味がある。header、main、footerは最近よくやる分け方。layoutを使えばやりたいことは賄えてる。使って簡単・自由に操作できる、CSSの新しい機能です。格子状のマス目のグリッドに好...qiita.com画像キービジュアル的なものはレスポンシブ対応のためにpicture。スライドショーに突っ込んでも問題ないのが決め手。振り分けない場合も後からsourceを足したいときのためにpictureで書いとく。/></picture>いわゆる本文内はfigure。リンクを付けたい場合はこんな感じ。href="">aaaa</a></figcaption></figure>img自体は使ってるけど、直貼りすることは少なくなった。タグが増えることになるけど棲み分けがわかりやすくなった感じがある。none;}}cssのリセットは必須。CDNとか別ファイルで読むよりはベタ打ちしちゃったほうがいいかなって思ったり。normalize.cssが好みだけどちょっと古くなったので違うのをやってみてる。※normalize.cssの方が使い勝手が良かった。色指定は基本的に、#000やら#fffは使わずに、#111とか#fafafaとかちょっとずらす。真っ黒、真っ白は目が痛い。存外落ち着いた感じになるし、比較がなければ意外とわからない。:hoverを使う際は@mediaでPCに限定する。スマホとかタブレットとかだと:hover解除は他の領域をタップしないといけないわけで、例えば:hover時に要素を半透明にした場合、何だこれって感じになる。マウスがあるから生きる装飾なので、だから限定しましょうという考え。レスポンシブの区分けは.98のアレをやる。不便は感じてなかったけど紹介記事を読む限りやっておいた方がいいんじゃないかなと思った。CSSで決めたbreakpointに合わせてhtmlやjs上の切り替えもやっていく。font-familyは好みといえば好み、webフォントは極力使わないのが最近のテーマ。webフォントは重いから時間差で置き換わるのはダルいし、置き換わるまで文字が表示されないケースもある。見出しとか特設ページとか、限定的な使用に留めてる。既存フォントは環境で変わるわけだけど、そこまで厳密に統一する必要はないと思ってる。閲覧環境の選択肢が多い状況でガチガチにするほうが変なのではと。「問題なく閲覧できる」が目指すべき形じゃないかなと思う。昨年末辺りから文字の初期サイズを16pxに変更。サイズ指定はremでやってるので、以下の感じに展開する。*/カスタムプロパティを活用すれば一元管理できる。wpでいうstyle.cssに入れてもいいし、宣言部分だけ独立させたほうが使い勝手がいいという場合もある。})必ず使ってるのはこの2つ。ページ内移動ということをわかりやすくするためにスムーススクロールを導入。加えて、ヘッダーを固定表示してる状態でページ内リンクに飛ぶとヘッダーと被ってしまう点を解消する(上記はスマホ表示時にheaderの高さ分を調整する内容)。レスポンシブの切り替えはブラウザ幅の値で行ってる。幅の取得は色々あるけど、css、htmlでの切り替えタイミングと合わせるためにこの書き方。PCだとスクロールバーの幅のことがあったりするのでちゃんと選ばないと面倒くさいことになる。別ページのアンカーリンクをクリックした際に、特定の要素にパッと遷移するのではなく、別ページのページ上部から特定の要素まで、スムーススクロールする方法について紹介recooord.org外部から来た際にハッシュタグがあったら、ということで。ヘッダーを固定にしてる場合、通常の動作だとブラウザ上部に該当idの要素が来るのでヘッダーと被ってしまう。それを良しとするところが多いのだけど個人的に気持ち悪い。飛んできて、該当箇所にスクロールさせることで「このページのこの辺りにありますよ」を見せるのは良さげな気がしなくもないんだけど、表示位置の調整ができたらそれで良い気もする。スクロール動作をさせない場合はこんな感じ。})アニメーションさせなくていいと思う。ページのスクロール禁止ギミックスマホ表示時のメニューとか、ブラウザいっぱいに表示するポップアップとか、ページ自体がスクロールすると不便な状況がある。その際の対策はcssとjsで構築する。})「pageYOffset」が非推奨になったとかで、「scrollY」を使おうねというのがある。IE9以前に非対応らしい。互換性をもたせた組み方でやるのが無難だとか。使用頻度が多いので関数化したほうが便利。発火の度にスイッチする内容と、解除のみの内容があれば賄い切れる。iframeのレスポンシブ化iOSでのiframe挙動のことがあるので最適解は決まってる感じ。absolute;}padding-topで縦横比を指定する。応用で、任意の比率でgoogleマップを埋め込んだりもできる。まあマップは比率を固定する必要はあんまりないと思うけど。コピーmegefepsをフォローするmegefeps関連記事WEB[css]ノートの罫線みたいなのを作る導入は簡単だけど活用は気をつけないといけない。WEB[wp]投稿ページを全部アーカイブページに301リダイレクトする方法FAQとか、サイト上の見せ方によっては便利なやつ。WEB[jQuery]tbodyに.slideToggle()を付与する方法ちょっとしたこと。日本語表記が逆に分かりづらさを呼んだりしてどうもね。WEB[js]jsから外部jsファイルを読み込む方法moduleのやつ。案件により必要に駆られて。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。ホームWEB私的WEBサイト構築初期設定2023スポンサーリンク掲載内容について内容をパクる場合は自己責任でお願いします。内容が古い場合、環境が変わって通用しないことがあります。記事の内容は最適解ではなく、作成時点においての筆者の理解の限界であることが多々あります。修正やそもそもの宗旨替えは不定期に行われるため、活用される場合はご注意ください。Highlighterがいよいよダメっぽいので、プラグインを変更しました。古い記事は表示が壊れてるものがあります。楽天Room主に釣具とか。max-age=0"),l.setRequestHeader("dlm-xhr-request","dlm_XMLHttpRequest"),l.send()}}タイトルとURLをコピーしました。