rui-log.com

WEBデザイン

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

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

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

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

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

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

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

VisualStudioCodeの拡張機能まとめ

私がインストールしたVisual Studio Codeの拡張機能まとめ

VSCodeの拡張機能って何入れたらいいんだろう?何入れたっけ?となることはよくある話。そこで、現在私の利用しているVSCodeの拡張機能をまとめて紹介します。

Whimsical Sticky NotesはTrelloの代わりになるか?

Whimsical Sticky Notes(付箋)はTrelloの代わりになるか?

Whimsicalという、タスク管理やプロジェクト管理などをビジュアル的にできるオンラインサービスを紹介。Trelloのようにブラウザを壁と見立てて付箋を貼り付け、タスク管理をしたりプロジェクトの進行を円滑に管理したりと、視覚・ビジュアル的に

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

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

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

VS Code×Markdownのプレビューをカスタマイズする

Markdownのリアルタイムプレビュー、見やすくしたくない?

Markdownを書くときのエディターと言えば「Visual Studio Code(VS Code)」が最高に良い。そのVS Codeで、Markdownのリアルタイムプレビューを綺麗に見やすくでき、さらにCSSをカスタムすること自分好みのプレビューへカスタマイズすることも可能に。こりゃあ入れるっきゃない!ということで、VS Codeの拡張機能「Markdown Preview Gith

Markdownでブログ執筆を効率的に行う

WordPressの投稿をMarkdownで爆速化!

最近ハマっているMarkdown記法。メモのとり方や報告書作成をpdf出力したりして業務の効率化を図っている私ですが、ブログ執筆もMarkdownでやってみようと思ったところ、WordPress5.X系「Gutenberg」からはなんとプラグインなしでできる!ということで実際にやってみました。

VisualStudioCodeの機能拡張「テキスト校正くん」で正しい日本語文章を

Visual Studio Codeの拡張機能「テキスト校正くん」で日本語文章の矯正を

使えるテキストエディターと言えばWindows・Macともに利用できる、Microsoftから無償で提供されている「Visual Studio Code」。 そんなVS Codeの便利な拡張機能「テキスト校正くん」を紹介したい。

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

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

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

VisualStudioCodeでMarkdownを利用する

VScode×Markdownで【仕事効率化】を図る!

「Visual Studio Code(VSCode)」はMicrosoftが提供している無償で高機能なエディタです。豊富な拡張機能で自分好みのエディタカスタマイズ可能。Markdownで書いてpdfやhtmlで出力もできる!