
ECサイト運営– tag –
-
【コピペで簡単】アコーディオンを簡単実装。CSSで調整してアニメーション付きのよくある質問を単純なコードで作る!
detailsタグとsummaryタグでアコーディオンを実装し、CSSでアニメーションを付加。コピペで簡単に動的なアコーディオンを実装できるようにしました。よくある質問や折りたたみのアコーディオンメニュー作成にどうぞ! -
【コピペで簡単】CSSで雪を降らせる方法
冬場のLPではどうやって冬っぽくしよう?どうやってクリスマスっぽくしよう?と悩みますよね。そんなときにオススメなのが『雪を降らせる』です。一気に冬っぽい印象を与えることができます。CSSのコピペで簡単に実装する方法を紹介します。 -
【コピペで簡単】<br>タグをPCまたはスマホのときだけ反映しないようにする方法
テキストを中央揃えにしたとき、スマホで見たときにちょうど良いところへ改行を入れて、綺麗に読めるように。でもそれだとPCでは改行が多すぎる・・・なんてとき、ありませんか?その逆も然り。今回はそんなPCとスマホで起こりうる改行問題を解決するための方法をコピペで簡単に解決できる方法を紹介します。 -
htmlのmapタグ。クリッカブルマップで画像の好きな座標にリンクをつける
ふた昔前くらいに流行ったであろうhtmlのmapタグことクリッカブルマップ。画像の好きなところにリンクをつけられる便利なやつ。jQueryを利用することでレスポンシブデザインサイトでクリッカブルマップが実装できるようになっています。 -
【コピペで簡単】CSSで端末によって横並びと縦並びを気持ちよく見えるようにする
PCやタブレットでは横並びに。スマホでは縦並びに。コンテンツをより見やすくするために、レスポンシブデザインとして、そういったテクニックも必要ですよね。ブログのトップページなどの記事の並びでも、そういった表現はよく利用されています。今回は「flexbox」と「mediascreen」を利用して実装したいと思います。もちろん コピペで簡単に 実装できるようにサンプルを用意しました。 -
【コピペで簡単】CSSで写真・画像のおしゃれ加工。ポラロイド風ボーダーを実装する
今回は写真・画像をcssでおしゃれ加工する方法の1つとして、影を利用したポラロイド風のボーダーをつけることによるおしゃれ加工を実装します。もちろん、コピペで簡単に実装できるようにしました。 -
Visual Studio Codeでhtmlコーディングはリアルタイムプレビューがすごく良い
htmlコーディングするなら「Visual Studio Code」のリアルタイムプレビュー拡張機能が超便利!macOSでもWindowsでも使えるVSCodeはいろんな機能が備わっていて超おすすめ! -
文章を読みやすくするための余白調整と行間の調整
文章の読みやすさって、ほとんどは文章の構成や作り方で決まりますが、それ以外のところでも読みやすくすることができます。 それが「文字と文字の余白や行間の調整」です。 -
【コピペで簡単】CSSだけでメニューバーや画像を固定させる方法
画面の上部に固定させるメニューバーや、ECサイトで右や左の端に小さくクーポンバナー画像を固定させていたりするサイト、ありますよね。 そういったコンテンツを画面に固定させる方法を、コピペで簡単に実装できる形で紹介しました。超便利なテクニックなので覚えておきましょう! -
【コピペで簡単】CSSで親要素を無視してブラウザ幅100%で表示させる!
ページやコンテンツを作っていると、外枠はmarginやpaddingで隙間をあけて文字を読みやすくしたりしますよね。 でもそうすると、画像も勿論その枠の中に入っちゃいます。でも、このコンテンツは横幅いっぱいに表示したい・・・このバナーや画像は -
【コピペで簡単】cssで画面いっぱいに画像を魅せる方法。スマホもPCも大きな画像を見せたい!
WEBデザインのトレンドというのはコロコロと真新しくなっていくものですが、そのトレンドの一つとしてファーストビューに大きく画面いっぱいに画像を表示させて魅せるデザインがあります。インパクトが大きく、綺麗な画像でアプローチできればユーザーの心もキャッチしやすい。そんなデザインcssを簡単コピペで実装 -
【コピペで簡単】jsなし!CSSだけで画像を横スクロールする方法
ECサイトのトップページファーストビューや、ブログ等で関連記事、ランキング等を一覧表示する際、横スクロールを利用することはよくありますよね。そんなとき、Javascriptを利用せずにCSSだけでも横スクロールを実現することができるので、その方法を紹介します。 -
Photopea | Photoshopみたいに使える無料画像編集サービスを紹介
Photoshopにとても似ていて、無料でしかも会員登録不要で利用できる「Photopea」という画像編集ツールを紹介します。Windowsのちょっと古いPhotoshopは持っているのだけれどMacでは画像編集をどうしよう・・・と悩んでいたのは私だけではないハズ。そんなあなたにおすすめの画像編集ツールです。 -
【コピペで簡単】ハンバーガーメニューをCSSだけで作る方法
タップすると横からメニューが出てくる、通称ハンバーガーメニュー。CSSのコピペだけで簡単に実装!書籍にも紹介されました。レスポンシブ対応もOK。追記で”ページ内リンク”にも対応しました。ページ内リンクの挙動もjQueryをコピペするだけで簡単に実装できます。 -
【コピペで簡単】CSSだけで背景画像をぼかして暗くする方法。画像加工が不要で便利!
知ってるのと知らないのでは全然違う!cssだけで背景画像をぼかして暗くする方法。画像加工が不要で便利!ルイログのタイトル箇所でも使われているテクニック。画像を置いて、画像をぼかして・暗くして、その上にテキストを乗せて。cssだけでこれらの効果を適用させるので、とっても便利。ブログのテンプレート作成時にも使える便利な
12