ここに掲載の記事は備忘録的内容です。詳細な説明に欠ける部分が多々あります。ご了承ください。
Syntaxhighlighter evolved iPhoneで表示が崩れる問題
Syntaxhighlighterの表示がなぜかiPhoneで崩れるなぁという時の対処方法。めちゃくちゃ今頃？感ありますが、このサイトを公開にしたので、ちゃんと見てもらえるよう対応してみました。PCでの表示は問題ないし、 […]
iOS高さ問題 解決策
今更ながら・・・サイトのトップページを画像等で全画面表示にした場合、100vhで指定するのだが、iPhone safariの場合画面下部にUIが出ていてその分が100vhに含まれているため一部が隠れてしまう。これをを回避 […]
DART sassに切り替え
もうずいぶん前にsassでスタイルシートを編集しようとして躓いたので、しばらくチマチマと普通にcssを書いていたのだが流石にそろそろちゃんとしなきゃなと思ったのが数年前。 それから利用していたエディタも変遷。 最も初期は […]
ページ内リンクの上部調整方法
同一ページ内でリンクを使って移動する場合、ページトップ部分に固定要素があったりすると隠れてしまうことありますよね。そこで、移動する位置の上部余白を調整したいなと思い、色々やってみたが確実だったのが以下の方法。 ちょっとス […]
スマホなどデバイスごとにheightサイズ合わせをする
トップページのロゴが下に隠れてしまったりしないように高さをデバイスに合わせて取得する方法。 jsに以下を追加してビューポートの内側の高さを取得する。 で目的のボックスに以下のcssを追加する。
cssでシンプル矢印
まずはhtml 次にbefore after
ページのトップへ戻るボタンsampleコード
いつも忘れるのでコピペできるように！ HTML scss こちらは矢印をcssで設定しているのでちょっと長くなっているがAwesome等でアイコンを読み込む方法もあり。その場合はa:hoverの設定を忘れないように。 j […]
loader設置用コードsample01
サイトにloaderを設置する基本形。 先ずHTML 続いてscss javascriptは以下
Humburger Navigation Smaple01
基本的なハンバーガーナビのコード。 mobile基準のレスポンシブ仕様。 モバイル表示の際にメニュー下部にSNS（Instagram）アイコン表示させている。 （Kureai BAKERYのsammpleより） HTML […]
transitionの動きに変化をつけるscss一覧
cssで動きをつけたい時に参考にする