WEBデザイン– category –
![](https://webdesign.rui-log.com/wp-content/uploads/2024/06/rui-log_category-image_webdesign.jpg)
※「ルイログ」からカテゴリーごと記事を移動させました。
ECサイト運営会社でWEBエンジニア&マーケターとして従事しているルイログの人が、実務で役立つWEBデザイン・WEBコーディングを紹介。
HTML / CSS をわかりやすく「コピペで簡単」に実装できるよう記事にしています。
『【コピペで簡単】ハンバーガーメニューをCSSだけで作る方法』はデジタルハリウッド大学様の書籍にも引用いただいています。
-
Visual Sutudio Code for Web はiPadやChromebookでもブラウザーで使える!
ブラウザーで使えるVisualStudioCode!iPadやChromebookでも使えちゃう、インストール不要のVS Code。急に使わなくてはならないPCでもいつもの環境で使えるブラウザー版VS Codeがリリースされました! -
【コピペで簡単】アコーディオンを簡単実装。CSSで調整してアニメーション付きのよくある質問を単純なコードで作る!
detailsタグとsummaryタグでアコーディオンを実装し、CSSでアニメーションを付加。コピペで簡単に動的なアコーディオンを実装できるようにしました。よくある質問や折りたたみのアコーディオンメニュー作成にどうぞ! -
【コピペで簡単】CSSで雪を降らせる方法
冬場のLPではどうやって冬っぽくしよう?どうやってクリスマスっぽくしよう?と悩みますよね。そんなときにオススメなのが『雪を降らせる』です。一気に冬っぽい印象を与えることができます。CSSのコピペで簡単に実装する方法を紹介します。 -
VisualStudioCodeのタイピングを楽しく格好良く!拡張機能Power ModeをVSCodeへインストール
Visual Studio Code の拡張機能Power Modeをインストール。文字を打つと炎が上がったり綺麗なエフェクトを設定できる!面白い拡張機能をインストールしたので紹介します。 -
【コピペで簡単】<br>タグをPCまたはスマホのときだけ反映しないようにする方法
テキストを中央揃えにしたとき、スマホで見たときにちょうど良いところへ改行を入れて、綺麗に読めるように。でもそれだとPCでは改行が多すぎる・・・なんてとき、ありませんか?その逆も然り。今回はそんなPCとスマホで起こりうる改行問題を解決するための方法をコピペで簡単に解決できる方法を紹介します。 -
htmlのmapタグ。クリッカブルマップで画像の好きな座標にリンクをつける
ふた昔前くらいに流行ったであろうhtmlのmapタグことクリッカブルマップ。画像の好きなところにリンクをつけられる便利なやつ。jQueryを利用することでレスポンシブデザインサイトでクリッカブルマップが実装できるようになっています。 -
【コピペで簡単】CSSで端末によって横並びと縦並びを気持ちよく見えるようにする
PCやタブレットでは横並びに。スマホでは縦並びに。コンテンツをより見やすくするために、レスポンシブデザインとして、そういったテクニックも必要ですよね。ブログのトップページなどの記事の並びでも、そういった表現はよく利用されています。今回は「flexbox」と「mediascreen」を利用して実装したいと思います。もちろん コピペで簡単に 実装できるようにサンプルを用意しました。 -
CSSを駆使して右にできた謎の余白を消す方法
ふと自分のサイトをスマホで見てスクロールさせていると「なんかスクロールが不安定で横に少しだけ動くぞ・・・」ということに気づきました。はて、これはなんぞや?と真横にスクロールさせてみたところ、「少しだけ右に余白ができてしまっている・・・」ということに気づきました。その修正方法をここに記しておきます。 -
VisualStudioCode(VSCode)で素早く数式の計算を行う方法
今までちょっとした計算をWindowではCalc(電卓)を起動して、Macではサイドバーの計算機を利用して計算していた。それが今、会社のWindowsPCでもプライベートのMacBookでも愛用しているテキストエディタ「VisualStudioCode」のデフォルト機能で簡単に計算することが判明。こりゃ便利だぞ!ということでその方法を紹介したい。 -
VSCode 拡張機能おすすめ19選
VSCodeの拡張機能って何入れたらいいんだろう?何入れたっけ?となることはよくある話。そこで、現在私の利用しているVSCodeの拡張機能をまとめて紹介します。