A Little Each Day

note to self

HTML & CSS

<head>タグ内に最低限書くものまとめ

こんにちは。本日はhead内に書くタグのまとめです。タグの種類はたくさんあって、設定しておいたほうがいいタグと設定しなくても問題ないタグがあります。今回は最低限書くものと、書いてあるとメリットがあるタグをまとめてみました。

cssで画面の大きさに縛られず要素の高さや幅を画面いっぱいにする

こんにちは。本日はcssで高さ・横幅を自動で100%にする方法です。従来通りだったらcssで%やpxを使い、レスポンシブデザインでデバイスごとに要素の高さや幅を書いていたと思います。しかしながら、それでは親要素の高さ・幅に左右されてしまったり、コードが…

ヘッダーをサイト上部に固定する

こんにちは。本日はHTMLやCSSでヘッダーを固定する方法です。サイトを制作する上でヘッダー(メニューやナビバーなども)を上部に固定しておきたいと思うことがあると思います。これはよくWeb制作で使われますが、HTML・CSSの基礎基本で、比較的簡単に実装する…

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

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

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

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

flexboxでword-wrapが効かない

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

CSSのborder-radiusで角丸をつくる

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

CSS3で影をつけるbox-shadowとtext-shadowの使い方

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

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

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

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

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

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

こんにちは。本日はCSS3から使えるようになったbox-sizing: border-box; について説明したいと思います。border-boxを使えば要素内のborderとpaddingを含めて要素の幅や高さを自動で計算してくれるのでレスポンシブデザインに対してすごく便利です。レイアウ…