Tips – カラムの幅を一杯に広げる

概要

外枠の中に複数カラムを起き、1つのカラムを最大幅まで伸長するためのCSS。

外枠

外枠を表示領域の80%の幅とし、センタリング。

  • 幅を表示領域の80%に:width: 80%;
  • 左右方向のセンタリング:margin: 0 auto;
 width: 80%; margin: 0 auto;

外枠の中に複数カラム

親要素にdisplay: flex;を指定し、伸長する子要素のみflex: 1;を指定。

2カラム~右拡張

  • 外枠(親要素):display: flex;
  • 左側カラム:幅指定なし→内容に合わせる
  • 右側カラム:flex: 1;→残り幅一杯
margin: 10px;
margin: 10px;flex: 1;
いづれの御時にか、女御、更衣あまた候ひ給ひける中に、いとやむごとなき際にはあらぬが、すぐれて 時めき給ふありけり。

3カラム~中央拡張

  • 外枠(親要素):display: flex;
  • 左側カラム:width: 10%;
  • 中央カラム:flex: 1;→残り幅一杯
  • 右側カラム:width: 10%;
width 10%;
margin: 10px;flex: 1;
いづれの御時にか、女御、更衣あまた候ひ給ひける中に、いとやむごとなき際にはあらぬが、すぐれて 時めき給ふありけり。
width 10%;

 

HTML/CSS – img画像のフィッティングとセンタリング

概要

  • img要素で表示させる画像をdiv要素で囲む
  • div要素でサイズを指定して画像を収める
  • 画像を縦横にセンタリングする
  • 画像のサイズがdiv要素のサイズより大きい場合を想定している(画像の方が小さい場合に伸長はされない)

HTML

画像をdiv要素で囲み、CSSでサイズを設定する。画像ファイルは、CDNによるダミー画像を使っている。

CSS

画像を収めるための設定。画像ファイルより小さい枠のサイズを設定している。ただしこのままでは画像が左寄せか上寄せになる。

上の設定に画像の縦横センタリングを含めた設定。

Tips – CDN – アイコン・ダミー画像など

アイコン

Font Awesome

概要

Font Awesomeのアイコンを利用するための手順。

  1. メールアドレスでアカウントを取得する
  2. アイコンを利用するためのキット番号を取得
    • アカウント取得後は”Manage Kitのリンク先で確認できる
  3. アイコンを使うページのheadセクションに、Font AwesomeのJSを読み込むスクリプトを書く
  4. Font Awesomeのページで使いたいアイコンのタグ表現をコピーする
  5.  アイコンを利用する場所にコピーしたタグを張り付ける
  6. 必要なら、タグのスタイルを設定するクラスやマウスオーバー時のタイトルなどを指定する

JSの記述

まずhead部に以下のスクリプトを記述する。

タグの記述

アイコンを表示する場所にアイコンを表示するタグを記述。Font Awesomeのサイトでコピーできる。

スタイル設定

サイズや色などのスタイルをクラスで設定する場合、Font Awesome自体がclassで設定されているので以下の様になる。

HTML

CSS

タイトル設定

マウスオーバーで文字列を表示させる場合、以下の様にtitle属性を追加する。

ダミー画像

Dynamic Dummy Image Generatorは自由なサイズと色の画像ファイルをリアルタイムで取り込める。

  1. サイトで画像のサイズ、背景色、前景色、ファイルタイプを指定すると、それを織り込んだURLが表示される
  2. そのURLをimgタグで指定すると、ページレンダリング時に必要なファイルがダウンロードされて表示される

以下は指定の例で、サイトに表示されたURLをそのままコピー&ペーストしたもの。

また、表示させるテキストも自由に設定できる。

Tips – ヘッダーメニュー

概要

HTMLのheader要素内に固定メニューを配置する。左端にロゴ画像を置き、メニューは右寄せで配置する例。

HTML/CSS

HTML

ヘッダーにdiv要素によるロゴ画像とulによるメニューを配置し、スタイルはCSSで設定する。

CSS

header内のロゴとメニューブロックをFlex-boxで配置し、左右に寄せている。メニューリストの水平配置にもFlex-boxを使っている。

なおheaderを固定してbodyのみをスクロールさせることもできる。

  • 最初のブロックでスタイルをリセット。
  • header要素
    • display: flex指定でコンテンツ(ロゴ、メニューブロック)をフロートさせて配置
    • justify-contentで2つのコンテンツを左端と右端に寄せる
    • 高さを指定
  • .header_logo
    • div要素に背景画像を指定
  • .header_menu
  • .header_menu li
    • 最初の3行はリストの中の文字を縦横センタリングする設定
  • .header_menu li + li

ロゴのサイズについて

  • div要素で背景画像のみを表示させるときはwidth/heightを明示的に設定しなければならない
  • 当初はheight: 100%headerの高さに合わせ、width: autoで表示されていた
  • ところがそこで親のheaderdisplay: flexを設定すると表示が消えてしまった
  • そこでここでは、グローバルなカスタムプロパティーを使っている

Rails/SCSS

HTML

  • 通常すべてのレンダリング時に使われる共通レイアウト
    • app/views/layouts/application.html.erb
  • これとは別にヘッダーメニューが必要な場合の共通レイアウトファイルを作成
    • app/views/layouts/application_with_header.html.erb

ヘッダーメニューが必要なアクションのみこのレイアウトを使うため、コントローラーでレイアウトファイルを指定。

レイアウトファイルが読み込むスタイルシートは標準と同じapplication.css

requireされるlayout.scssで、ヘッダーメニュー用のSCSSを読み込む(ヘッダーメニューがない場合も読み込む)。

SCSS

以下のSCSSファイルを作成して読み込ませる。リセットCSSは別に読み込んでいる。

 

Tips – フォームのデザイン

概要

  • テキストフィールドや送信ボタンなどを含むフォームのデザインについて
  • input要素などのコンテンツから組み上げる方法と、flex-boxを使った方法の2つ。
  • フォーム全体のページ内の位置設定についても含めた

共通事項

元になるHTML

3つのinput要素と1つのbutton要素を含むform要素。form_blockというクラスのdiv要素でラップする。

Railsのhtml.erbの場合は以下の様になる。

 

リセットCSS

CSSでは以下で関係要素のスタイルをリセットする。

Railsの場合は別にreset.cssを準備する(Eric Meyer’s “Reset CSS” 2.0)。

body要素

body要素は背景色だけを設定する。

方法1~要素スタイルの積み上げ

CSS

CSSの内容

CSSの全体は以下のとおり。以下、手順を分解して整理する。

div要素によるラップ

  • div要素で表題(h1)とform要素全体をラップする
  • 幅は400pxに設定
  • 高さ指定をしない(auto)なので、子要素に応じて全体の高さが変わる

表題

  • フォームの表題をh1要素で書いている

form要素

  • form要素のパディングと背景色を設定
  • 幅は親要素のdivにフィットし、高さは子要素群に合わせて変わる

input要素

  • インラインレベル要素のinputをブロックレベル要素に変更
  • box-sizingborder-boxに指定
    • これを指定しないとinput要素がはみ出てしまう
  • 幅(width)は親要素に合わせる
  • 高さは32px固定
  • マージン(下)を設定して間隔をあける

button要素

  • インラインレベル要素のbbuttonをブロックレベル要素に変更
  • 幅は親要素formの50%
  • margin-left: autoで右寄せ
    • 中央に置く場合はmargin-right: autoも加える

フォームの位置調整

  • もう一度全体をラップしているdiv要素に戻り、bodyに対する位置を指定する
    • フォームの左上隅が上端から20%、左端から40%

SCSS

RailsなどでSCSSを使う場合の例。

 

方法2~flex-box

CSS

CSSの内容

flex-boxを使ったCSSの全体は以下のとおり。フォーム全体の位置設定は方法1と同じ。

div要素によるラップ

  • 幅は400px
  • 高さはautoとし、子要素のformの髙さに合わせる

form要素

方法1と違うのは以下の点。

  • display: flexで子要素へのflex適用を指定
  • flex-direction: columnで子要素を縦並びに
  • justify-content: space-aroundで子要素を均等に配置
  • 高さを200pxに固定

input要素

要素の間隔は自動的に決まるので、方法1で設定していたmragin-bottomを削除している。

button要素

  • button要素もマージンを削除している
  • 右寄せにするため、align-self: flex-endを設定
    • 中央に置く場合はcenterを指定

SCSS

RailsなどでSCSSを使う場合の例。

 

Tips – リストを横並びに

概要

デフォルトのHTML/CSSでは、リスト内の各要素(li)は縦に並べられ、各要素の先頭にマーカーが付される。

このスタイルを変更し、li要素を横に並べるスタイルを設定する。

HTML/CSS

HTML

以下のリストでulタグにクラスを指定し、スタイルを設定する。

CSS

CSSの例は以下のとおり。

冒頭のブロックは関係する要素のリセットCSS。

ulタグに設定したmenuクラスのスタイル

  • list-style-type: noneでリストのマーカー表示を抑止
  • display: flexは、この指定1つで子要素のボックス要素が横並びになる

menuクラスの下のli要素のスタイル

  • 親のulflexを指定しているので、個別要素としてのスタイルを設定
  • liを等幅に設定し、背景色を指定している

Rails/SCSS

HTML

HTMLの内容は同じ。

SCSS

リセットCSSはreset.cssファイルとして切り分けている。

考え方はCSSと変わらず、子要素liをブロック内に入れ子にしている。

 

Tips – アンカーをボタン風に

概要

アンカー要素(a)にスタイルを適用して、ボタンの様な形にする。

HTML/CSS

HTML

HTMLではa要素をdivタグで囲んでクラス定義している。

CSS

CSSの例は以下のとおり。

前段のブロックで関係要素のスタイルをリセットし、bodyの背景色をセットしている。

アンカーのスタイル設定については以下のとおり。

.button_like_anchorクラスの中のa要素のスタイル

  • marginpaddingの設定のためにdisplay: inline-blockを指定
  • box-sizingの設定はここでは影響しないが、サイズ指定してボタンを並べるときなどに関係
  • border-radiusで角を丸くしている
  • text-decoration: nonecolor設定でデフォルトのアンカーの装飾を変更

Hover時の変化

  • 元の背景をbackground-colorで設定
  • 疑似クラスhoverでカーソルが領域に入った時のスタイルを設定
    • 背景色を少し明るくしている
    • cursorでカーソル形状を変更(デフォルトがpointerのため、ここでは影響しない)

Rails/SCSS

html.erb

Railsではアンカータグをヘルパーで実装している。

SCSS

リセットCSSはreset.cssファイルとして切り分けている。

また、疑似クラスhoverの記述をSCSSに合わせて変更している。

 

CSS – リセットCSS

概要

ブラウザーによってデフォルトで設定されているスタイルをリセットしてシンプルにするためのCSS。

リセットに加えて単純のスタイルを設定するものもある。

各種リセットCSS

Eric Meyer’s “Reset CSS” 2.0

HTML5 Doctor CSS Reset

Yahoo! (YUI 3) Reset CSS

 

その他

Normalize.css

A Modern CSS Reset

 

Tips – headerの固定

概要

body内にheader要素を置き、全体をスクロールしたときにheaderのみ固定されて動かないようにしたいとき。

CSSで以下を設定する。

  • position: fixed
  • top: 0
  • box-sizing: border-box
  • width: 100%

HTML

CSS

body要素

  • margin: 0を指定する

header要素

  • position: fixed指定でheader要素を固定する
    • header要素の幅がコンテンツの文字の長さまで短くなってしまう
  • width: 100%指定でheaderの親要素bodyの幅まで広げる
    • ただしCSSのボックスモデルではwidthheightはコンテンツの幅と高さなので、右端がはみ出てしまう
  • box-sizing: border-box指定でheaderのボーダーがbodyの幅に合うようにする
  • top: 0指定で

メインコンテンツ

  • margin-topを指定して、メインコンテンツの先頭がheaderとラップしないようにする

 

PHP – ドキュメントルート外のファイル

スタイルファイル(css)

HTMLのスタイルを別のcssファイルにするとき、ファイルの位置がドキュメントルートの外にあるとlinkタグからは読み込めない。

このようなとき、style定義であればstyle要素の内容としてphpでそのファイルをincludeするとHTML内に展開される。