rui-log.com

WEBデザイン

コピペで簡単に実装できる便利なhtmlやcssを紹介しています。
またそれ以外にも、WEBデザインをする上で必要なツールの紹介やWordPressのカスタマイズ等も紹介しています。

htmlのmapタグ。クリッカブルマップで画像の好きな座標にリンクをつける

ふた昔前くらいに流行ったであろうhtmlのmapタグことクリッカブルマップ。画像の好きなところにリンクをつけられる便利なやつ。jQueryを利用することでレスポンシブデザインサイトでクリッカブルマップが実装できるようになっています。

【コピペで簡単】CSSで端末によって横並びと縦並びを気持ちよく見えるようにする

【コピペで簡単】CSSで端末によって横並びと縦並びを気持ちよく見えるようにする

PCやタブレットでは横並びに。スマホでは縦並びに。コンテンツをより見やすくするために、レスポンシブデザインとして、そういったテクニックも必要ですよね。ブログのトップページなどの記事の並びでも、そういった表現はよく利用されています。今回は「flexbox」と「mediascreen」を利用して実装したいと思います。もちろん コピペで簡単に 実装できるようにサンプルを用意しました。

CSSを駆使して右にできた謎の余白を消す方法

CSSを駆使して右にできた謎の余白を消す方法

ふと自分のサイトをスマホで見てスクロールさせていると「なんかスクロールが不安定で横に少しだけ動くぞ・・・」ということに気づきました。はて、これはなんぞや?と真横にスクロールさせてみたところ、「少しだけ右に余白ができてしまっている・・・」ということに気づきました。その修正方法をここに記しておきます。

コピペで簡単!CSSで画像にポラロイド風加工を施す方法

【コピペで簡単】CSSで写真・画像のおしゃれ加工。ポラロイド風ボーダーを実装する

今回は写真・画像をcssでおしゃれ加工する方法の1つとして、影を利用したポラロイド風のボーダーをつけることによるおしゃれ加工を実装します。もちろん、コピペで簡単に実装できるようにしました。

Visual Studio Codeの拡張機能「HTML Preview」でリアルタイムプレビューをする

Visual Studio Codeでhtmlコーディングはリアルタイムプレビューがすごく良い

私は現在テキストエディターをWindowsとMacの両端末とも、Microsoftから無償で提供されている「Visual Studio Code」に統一している。なぜなら、どちらのOSでも同じように利用でき、とっても便利で拡張性があるから。

コピペで簡単!cssで文章を読みやすくするための余白調整と行間の調整をする方法

文章を読みやすくするための余白調整と行間の調整

文章の読みやすさって、ほとんどは文章の構成や作り方で決まりますが、それ以外のところでも読みやすくすることができます。 それが「文字と文字の余白や行間の調整」です。

cssだけでメニューバーを固定表示させる方法

【コピペで簡単】cssだけでメニューバーを固定させる方法

画面の上部に固定させるメニューバーや、ECサイトだったら右端に小さくクーポンバナーを固定させていたりするサイト、ありますよね。 そういった画面に固定させる方法をコピペで簡単に実装できる形で紹介します。

WordPressブログのSNSシェア(Twitter)で@自分さんからを自動で挿入する方法

WordPressブログのSNSシェア(Twitter)で@自分さんからを自動で挿入する方法

私がメインで利用しているSNSはTwitter。記事を公開したときにお知らせとしてシェアしたり、役に立った!とか、面白い!と思ってもらえたらシェアしてもらいたいなと思いSNSシェアボタンをページの上部と下部に用意しているのですが、そのボタンでシェアしたときに今まで自分宛の、私なら「@rui_bassさんから」という文章が入っておらず、もしどなたかが

【コピペで簡単】cssで親要素を無視してブラウザ幅100%で表示させる!

【コピペで簡単】cssで親要素を無視してブラウザ幅100%で表示させる!

ページやコンテンツを作っていると、外枠はmarginやpaddingで隙間をあけて文字を読みやすくしたりしますよね。 でもそうすると、画像も勿論その枠の中に入っちゃいます。でも、このコンテンツは横幅いっぱいに表示したい・・・このバナーや画像は

WordPressテンプレートカスタマイズーrui-log

WordPressのテンプレートをカスタマイズ

ルイログを作った理由の一つに「WordPressの勉強」というものがあります。ルイログを作って半年経過し、ブログを書くという点でのWordPressは特に問題なく理解できてきたかなと思ったところで、次はWordPressのテンプレートを自作してみようと動き出しました。しかし、進めれば進めるほど全てを・満足のいくテンプレートを作るのはまだま

cssで画面いっぱいに画像を魅せる方法。スマホもPCも大きな画像で魅せる

【コピペで簡単】cssで画面いっぱいに画像を魅せる方法。スマホもPCも大きな画像を見せたい!

WEBデザインのトレンドというのはコロコロと真新しくなっていくものですが、そのトレンドの一つとしてファーストビューに大きく画面いっぱいに画像を表示させて魅せるデザインがあります。インパクトが大きく、綺麗な画像でアプローチできればユーザーの心もキャッチしやすい。そんなデザインcssを簡単コピペで実装

cssだけで横スクロールを実現。

【コピペで簡単】jsなし!CSSだけで画像を横スクロールする方法

ECサイトのトップページファーストビューや、ブログ等で関連記事、ランキング等を一覧表示する際、横スクロールを利用することはよくありますよね。そんなとき、Javascriptを利用せずにCSSだけでも横スクロールを実現することができるので、その方法を紹介します。

Photopeaは無料で使える画像編集ツール。Photoshopライクで使いやすい。

Photoshopライクに使える無料画像編集ツール「Photopea」

Photoshopにとても似ていて、無料でしかも会員登録不要で利用できる「Photopea」という画像編集ツールを紹介します。Windowsのちょっと古いPhotoshopは持っているのだけれどMacでは画像編集をどうしよう・・・と悩んでいたのは私だけではないハズ。そんなあなたにおすすめの画像編集ツールです。

cssだけでハンバーガーメニューを作る。htmlリファレンス。

【コピペで簡単】cssだけでハンバーガーメニューを作る方法

タップすると横からメニューが出てくる、通称「ハンバーガーメニュー」をjs等は使わずcssだけでコピペで簡単に実装する方法を紹介。レスポンシブ対応です。

Macで「.htaccess」ファイルを編集できるようにする方法。ターミナル.appの開き方

Macで「.htaccess」ファイルを編集できるようにする方法

ずっとWindowsだった私は、今までの常識(Windowsでの常識)とこれからの常識(Macでの常識)が色んな所で乖離しているので、1つ1つ覚えていこうと思っているところ。そこで今回は、サイト運営には必須のファイル「.htaccess」ファイルをMacで編集するには?について備忘録を残そうと思います。「.(ドット)」か