WEBデザイン– category –
※「ルイログ」からカテゴリーごと記事を移動させました。
ECサイト運営会社でWEBエンジニア&マーケターとして従事しているルイログの人が、実務で役立つWEBデザイン・WEBコーディングを紹介。
HTML / CSS をわかりやすく「コピペで簡単」に実装できるよう記事にしています。
『【コピペで簡単】ハンバーガーメニューをCSSだけで作る方法』はデジタルハリウッド大学様の書籍にも引用いただいています。
-
WEBデザイン
【コピペで簡単】CSSで写真・画像のおしゃれ加工。ポラロイド風ボーダーを実装する
今回は写真・画像をcssでおしゃれ加工する方法の1つとして、影を利用したポラロイド風のボーダーをつけることによるおしゃれ加工を実装します。もちろん、コピペで簡単に実装できるようにしました。 -
VisualStudioCode
Markdownのリアルタイムプレビュー、見やすくしたくない?
Markdownを書くときのエディターと言えば「Visual Studio Code(VS Code)」が最高に良い。そのVS Codeで、Markdownのリアルタイムプレビューを綺麗に見やすくでき、さらにCSSをカスタムすること自分好みのプレビューへカスタマイズすることも可能に。こりゃあ入れるっきゃない!ということで、VS Codeの拡張機能「Markdown Preview Gith -
VisualStudioCode
Visual Studio Codeの拡張機能「テキスト校正くん」で日本語文章の矯正を
使えるテキストエディターと言えばWindows・Macともに利用できる、Microsoftから無償で提供されている「Visual Studio Code」。 そんなVS Codeの便利な拡張機能「テキスト校正くん」を紹介したい。 -
VisualStudioCode
Visual Studio Codeでhtmlコーディングはリアルタイムプレビューがすごく良い
htmlコーディングするなら「Visual Studio Code」のリアルタイムプレビュー拡張機能が超便利!macOSでもWindowsでも使えるVSCodeはいろんな機能が備わっていて超おすすめ! -
VisualStudioCode
VScode×Markdownで【仕事効率化】を図る!
「Visual Studio Code(VSCode)」はMicrosoftが提供している無償で高機能なエディタです。豊富な拡張機能で自分好みのエディタカスタマイズ可能。Markdownで書いてpdfやhtmlで出力もできる! -
WEBデザイン
文章を読みやすくするための余白調整と行間の調整
文章の読みやすさって、ほとんどは文章の構成や作り方で決まりますが、それ以外のところでも読みやすくすることができます。 それが「文字と文字の余白や行間の調整」です。 -
WEBデザイン
【コピペで簡単】CSSだけでメニューバーや画像を固定させる方法
画面の上部に固定させるメニューバーや、ECサイトで右や左の端に小さくクーポンバナー画像を固定させていたりするサイト、ありますよね。 そういったコンテンツを画面に固定させる方法を、コピペで簡単に実装できる形で紹介しました。超便利なテクニックなので覚えておきましょう! -
WEBデザイン
【コピペで簡単】CSSで親要素を無視してブラウザ幅100%で表示させる!
ページやコンテンツを作っていると、外枠はmarginやpaddingで隙間をあけて文字を読みやすくしたりしますよね。 でもそうすると、画像も勿論その枠の中に入っちゃいます。でも、このコンテンツは横幅いっぱいに表示したい・・・このバナーや画像は -
WEBデザイン
【コピペで簡単】cssで画面いっぱいに画像を魅せる方法。スマホもPCも大きな画像を見せたい!
WEBデザインのトレンドというのはコロコロと真新しくなっていくものですが、そのトレンドの一つとしてファーストビューに大きく画面いっぱいに画像を表示させて魅せるデザインがあります。インパクトが大きく、綺麗な画像でアプローチできればユーザーの心もキャッチしやすい。そんなデザインcssを簡単コピペで実装 -
WEBデザイン
【コピペで簡単】jsなし!CSSだけで画像を横スクロールする方法
ECサイトのトップページファーストビューや、ブログ等で関連記事、ランキング等を一覧表示する際、横スクロールを利用することはよくありますよね。そんなとき、Javascriptを利用せずにCSSだけでも横スクロールを実現することができるので、その方法を紹介します。