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