css

css

ルビ(ふりがな)の位置を調整する方法【CSS】

ウェブページの漢字にルビ(ふりがな)をふる機会があったのですが、普通に表示させるとブラウザによって表示がずれます。今回、ずれない方法で表示させたのでメモ。 ルビをふるコード こちらがルビをふるタグです。<rt>タグの部分...
css

ページ全体に色違いの背景パターンを表示する方法【CSS】

ページ全体にパターンを表示させて、色違いの背景色を重ねたい時のサンプルを作ったのでメモ。 完成したページを確認する(デモ) こちらが完成したページです。背景のパターンは透過pngで作成しています。画像を差し替えれば色々なデザイ...
css

グリッドレイアウトをfloatで実装する【CSS/SASS(SCSS)】

あまり需要がなさそうですが、floatでグリッドレイアウトを実装したのでメモ。特に今回はSassで実装したので、その忘備録も兼ねてのメモです。 そもそもグリッドレイアウトとは?から良くわからなかったので調べました。 グリッ...
css

Sass(SCSS)を使えるようにする(環境開発設定)【css/javascript】

最近使用頻度が多くなってきたSass(SCSS)の環境構築の方法をメモしておきます。 具体的には、node-sassパッケージをnpmでローカルにインストールします。 これだけだと意味不明ですが、調べながら手順をメモしていきます!ちなみに...
css

コンテンツを開閉できる『もっと見るボタン』をつくりました【javascript/jQuery】

ウェブページで、途中まで文章が表示されていて『もっと見る』ボタンをクリックすると、残りのコンテンツが表示される動きがあります。 今回、リストなどの長いコンテンツを開閉できるボタンをjavascriptで実装したのでメモ。 ...
css

CSSでいつも使っているメディアクエリ(Media Queries)をまとめました【CSS/SASS(SCSS)】

ウェブページをいちから作成する場合、Sassでコーディングすることが多くなりました。ミックスインを使うと、Media Queriesの記述が大変ラクになります。この為にSassを使っているといっても過言ではない。。でも、いつも記述を忘れる...
css

CSSとJavascriptでカードスタイルのリストをつくる【javascript/CSS】

ブログの記事一覧でよくみかけるカードスタイルのリストを作成したく、今更ながらFlexboxでレイアウトを組んだのでメモ。