読者です 読者をやめる 読者になる 読者になる

ちーくんのブログ

プログラミング備忘録

HTML & CSS

SNSシェアボタンをキレイに横並びにする

こんにちは。本日はSNSボタンを横並びにする方法です。SNSボタンを横並びにすると微妙に?高さがズレることがありますよね。今回はそれを解決するためのTipsを共有したいと思います。

Railsのselectフォームでcssが効かない

こんにちは。本日はselectフォームにcssを適用させる方法です。selectフォームにcssを反映するにはちょっとしたTipsが必要です。結構つまずいている人が多いので解決策を共有したいと思います。

flexboxでword-wrapが効かない

こんにちは。本日はFlexboxのTipsを紹介したいと思います。Flexboxは便利ですが、長い文字列を折り返すword-wrapプロパティが効かない問題が存在します。今回はその解決策を共有したいと思います。

CSSのborder-radiusの使い方

こんにちは。本日はCSS3から使えるようになったborder-radiusの使い方です。要素に対して角丸を指定することができ、ボタンや画像などの角を簡単に丸くすることができます。

CSS3で要素に影をつける

こんにちは。本日はCSS3で使われるbox-shadowとtext-shadowの使い方です。CSS3では簡単に要素に影をつけることができるようになりました。

CSSで長い英語文字列を折り返す方法

こんにちは。 本日は英語などの外国語で長い文字列の場合、ボックスをはみ出てしまうのを防いで、きちんとボックス内で改行するようにするTipsを紹介したいと思います。ホームページやwebサービスによっては長い英語の文字列があって、ボックスの外に文字列…

レスポンシブwebデザインの基礎基本

こんにちは。本日はレスポンシブwebデザインの基本的なことを説明したいと思います。スマートフォンやタブレットが普及している昨今、従来のPCだけでなくスマホやタブレットから見ても綺麗なレイアウトを提供するためにレスポンシブwebデザインは必須のツー…

box-sizing: border-box;の使い方

こんにちは。本日はCSS3から使えるようになったborder-boxについて説明したいと思います。border-boxを使えば要素内のborderとpaddingを含めて要素の幅や高さを自動で計算してくれるのですごく便利です。レイアウトとしては画像の横並びや段組み(メインとサ…

Ruby on RailsにBootstrapを導入する方法

こんにちは。本日はRailsにBootstrapを適応させる方法について書きたいと思います。Bootstrapとは便利なCSSフレームワークのことで、誰でも簡単にそれっぽいデザイン?のサイトを創れます。しかしながら、フレームワークなので見た目が似てしまう欠点があり…