ここに掲載の記事は備忘録的内容です。詳細な説明に欠ける部分が多々あります。ご了承ください。

iOS高さ問題 解決策

2024年4月12日

今更ながら・・・サイトのトップページを画像等で全画面表示にした場合、100vhで指定するのだが、iPhone safariの場合画面下部にUIが出ていてその分が100vhに含まれているため一部が隠れてしまう。これをを回避 […]

DART sassに切り替え

2023年10月17日

もうずいぶん前にsassでスタイルシートを編集しようとして躓いたので、しばらくチマチマと普通にcssを書いていたのだが流石にそろそろちゃんとしなきゃなと思ったのが数年前。 それから利用していたエディタも変遷。 最も初期は […]

ページ内リンクの上部調整方法

2023年8月8日

同一ページ内でリンクを使って移動する場合、ページトップ部分に固定要素があったりすると隠れてしまうことありますよね。そこで、移動する位置の上部余白を調整したいなと思い、色々やってみたが確実だったのが以下の方法。 ちょっとス […]

スマホなどデバイスごとにheightサイズ合わせをする

2023年8月1日

トップページのロゴが下に隠れてしまったりしないように高さをデバイスに合わせて取得する方法。 jsに以下を追加してビューポートの内側の高さを取得する。 で目的のボックスに以下のcssを追加する。

cssでシンプル矢印

2023年7月9日

まずはhtml 次にbefore after

ページのトップへ戻るボタンsampleコード

2023年3月18日

いつも忘れるのでコピペできるように! HTML scss こちらは矢印をcssで設定しているのでちょっと長くなっているがAwesome等でアイコンを読み込む方法もあり。その場合はa:hoverの設定を忘れないように。 j […]

loader設置用コードsample01

2023年3月18日

サイトにloaderを設置する基本形。 先ずHTML 続いてscss javascriptは以下

Humburger Navigation Smaple01

2023年3月17日

基本的なハンバーガーナビのコード。 mobile基準のレスポンシブ仕様。 モバイル表示の際にメニュー下部にSNS(Instagram)アイコン表示させている。 (Kureai BAKERYのsammpleより) HTML […]

transitionの動きに変化をつけるscss一覧

2023年3月16日

cssで動きをつけたい時に参考にする

Panel Openをcssのみで実行する例

2023年2月13日

以前は自サイトのaboutページでリーガル関係の文言の表示に使っていたもの。 Read(label)部分をクリックでパネルがオープンする。これをjavascriptを使わずにcssのみで実行する方法。 cssは以下。

PAGE TOP