コーディング 【insertBefore・insertAfter】デバイス（ウィンドウ幅）に応じて表示を変更する
PC表示とスマホ表示でコンテンツの順番を入れ替えたい
レスポンシブページをつくっていると、「ウィンドウ幅によって表示順を変えたい！」というときがありませんか？
そんなときは、insetbeforeとinsetafterを使って要素の順番...
コーディング
コーディング 
コーディング 具体例付き！floatの使い方【横並び・解除・レスポンシブ】
floatを使ったらデザインが崩れた、という経験がある人は多いと思います。
今回は、floatの使い方、解除方法からレスポンシブ対応まで、実際のサイトで使われる形で紹介します。
floatのコーディング例
それでは実際に、fl...
コーディング Fontawesomeが表示されないときの対処と表示方法
fontawesomeの読み込み
fontawesomeのcssを読み込みます。以下をhead内に記述します。
2021年11月現在、5.15.4が最新バージョンのようです。
公式HPのTOPページで確認できます。
HTML...
コーディング アコーディオンメニューをつくる
CSSだけでつくる
inputとlabelを使って、HTMLとCSSだけでアコーディオンメニューをつくります。
できあがり
See the Pen
by shiramizu (@ryo0613)
on Code...
コーディング ヘッダーをposition:fixedしたときにページ内リンクがずれる件を解決したい
htmlは以下の場合を想定しています。
①cssでずれを解消する
paddingでヘッダー分ずらして、marginでずらした分マイナスにします。
リンクが多い場合すべて指定する必要があるので、抜けないようにだけ注意です。...
コーディング ヘッダーをposition:fixedしたときに別ページへのアンカーリンクがずれる件を解決したい
スクリプトを使用した場合と、cssで解消する2パターンがあります。
JQを利用する
以下をリンク先のページに仕込みます。
この場合100pxぶんずらす、という指定なのでヘッダーの高さに合わせて任意で設定してください。
...
コーディング 文字サイズの違うテキストを縦方向に揃えたい
文字サイズが大きいテキストと小さいテキストが混在する場合、
ベースラインが合わずに気持ち悪いな、ということがあったので解消します。
See the Pen
by shiramizu (@ryo0613)
on...
コーディング アイコンや画像をCSSでゆらゆら揺らす
CSSだけでアイコンや画像をゆらゆら揺らすアニメーションです。
今回はfontawesomeの電話マークを揺らしてみました。
See the Pen
by shiramizu (@ryo0613)
on Co...