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

2021-08-29 / tau / コメントする

概要

外枠の中に複数カラムを起き、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画像のフィッティングとセンタリング

2021-03-29 / tau / コメントする

概要

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

HTML

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

<div class="image-frame">
  <img src="https://dummyimage.com/400x300/272ef5/eaf520.png">
</div>

</div>

CSS

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

.image-frame {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
.image-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.image-frame {

width: 200px;

height: 200px;

border: 1px solid black;

}

.image-frame img {

width: auto;

height: auto;

max-width: 100%;

max-height: 100%;

}

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

.image-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
.image-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.image-frame {

display: flex;

justify-content: center;

align-items: center;

width: 200px;

height: 200px;

border: 1px solid black;

}

.image-frame img {

width: auto;

height: auto;

max-width: 100%;

max-height: 100%;

}

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

2021-03-25 / tau / コメントする

アイコン

Font Awesome

概要

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

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

JSの記述

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

<script src="https://kit.fontawesome.com/[Kit Number].js" crossorigin="anonymous"></script>

1	<script src="https://kit.fontawesome.com/[Kit Number].js" crossorigin="anonymous"></script>

タグの記述

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

<i class="fas fa-sign-out-alt"></i>

1	<i class="fas fa-sign-out-alt"></i>

スタイル設定

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

HTML

<i class="fa fa-sign-out-alt header_icon"></i>

1	<i class="fa fa-sign-out-alt header_icon"></i>

CSS

.header_icon {
  font-size: 30px;
  color: #0af;
}

.header_icon {

font-size: 30px;

color: #0af;

}

タイトル設定

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

<i class="fa fa-sign-out-alt header_icon" title="サインアウト"></i>

1	<i class="fa fa-sign-out-alt header_icon" title="サインアウト"></i>

ダミー画像

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

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

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

<img src="https://dummyimage.com/300x200/272ef5/eaf520.png">

1	<img src="https://dummyimage.com/300x200/272ef5/eaf520.png">

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

<img src="https://dummyimage.com/300x200/0b0e4d/23f534.png&text=自由なテキスト">

1	<img src="https://dummyimage.com/300x200/0b0e4d/23f534.png&text=自由なテキスト">

Tips – ヘッダーメニュー

2021-03-18 / tau / コメントする

概要

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

HTML/CSS

HTML

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ヘッダーメニュー</title>
    <link rel="stylesheet" href="header_menu.css">
  </head>
  <body>
    <header>
      <div class="header_logo"></div>
      <ul class="header_menu">
        <li>新規作成</li>
        <li>編　集</li>
        <li>プロフィール</li>
        <li>ログアウト</li>
      </ul>
    </header>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>ヘッダーメニュー</title>

</head>

<body>

<li>プロフィール</li>

<li>ログアウト</li>

</ul>

</header>

</body>

</html>

CSS

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

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

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */
:root {
  --header-height: 50px;
}

/* スタイルをリセット */
* {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: space-between;
  height: var(--header-height);
  background-color: #8ef
}

.header_logo {
  background-image: url('logo_org_simple_transparent.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--header-height) * 2);
  height: var(--header-height);
}

.header_menu {
  display: flex;
  list-style: none;
}

.header_menu li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0px 10px 5px;
  width: 90px;
  font-size: 14px;
  color: #c00;
}

.header_menu li + li {
  padding-left: 5px;
  border-left: 1px solid black;
}

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */

:root {

--header-height: 50px;

}

/* スタイルをリセット */

* {

margin: 0;

padding: 0;

}

header {

display: flex;

justify-content: space-between;

height: var(--header-height);

background-color: #8ef

}

.header_logo {

background-image: url('logo_org_simple_transparent.png');

background-repeat: no-repeat;

background-size: contain;

width: calc(var(--header-height) * 2);

height: var(--header-height);

}

.header_menu {

display: flex;

list-style: none;

}

.header_menu li {

display: flex;

align-items: center;

justify-content: center;

margin: 10px 0px 10px 5px;

width: 90px;

font-size: 14px;

color: #c00;

}

.header_menu li + li {

padding-left: 5px;

border-left: 1px solid black;

}

最初のブロックでスタイルをリセット。
header要素
- display: flex指定でコンテンツ(ロゴ、メニューブロック)をフロートさせて配置
- justify-contentで2つのコンテンツを左端と右端に寄せる
- 高さを指定
.header_logo
- div要素に背景画像を指定
.header_menu
- Flex-boxによりリストを横並びにしている
.header_menu li
- 最初の3行はリストの中の文字を縦横センタリングする設定
.header_menu li + li
- 隣接セレクターによってリストアイテムの間に境界線を描いている

ロゴのサイズについて

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

Rails/SCSS

HTML

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

<!DOCTYPE html>
<html>
  <head>
    <title>Styles</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <header>
    <div class="header_logo"></div>
    <ul class="header_menu">
      <li>新規作成</li>
      <li>編　集</li>
      <li>プロフィール</li>
      <li>ログアウト</li>
    </ul>
  </header>

  <body>
    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Styles</title>

<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head>

<li>プロフィール</li>

<li>ログアウト</li>

</ul>

</header>

<body>

<%= yield %>

</body>

</html>

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

class PagesController < ApplicationController
.....
  def header_menu
    render layout: "application_with_header"
  end
.....
end

class PagesController < ApplicationController

.....

def header_menu

render layout: "application_with_header"

end

.....

end

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

 *= require layout.scss

1	*= require layout.scss

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

@import "reset.scss";

@import "header_menu.scss";

@import "pages.scss";

@import "reset.scss";

@import "header_menu.scss";

@import "pages.scss";

SCSS

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

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */
:root {
  --header-height: 50px;
}

header {
  display: flex;
  justify-content: space-between;
  height: var(--header-height);
  background-color: #8ef
}

.header_logo {
  background-image: image-url('logo_org_simple_transparent');
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--header-height) * 2);
  height: var(--header-height);
}

.header_menu {
  display: flex;
  list-style: none;
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0px 10px 5px;
    width: 90px;
    font-size: 14px;
    color: #c00;
    &+li {
      padding-left: 5px;
      border-left: 1px solid black;
    }
  }
}

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */

:root {

--header-height: 50px;

}

header {

display: flex;

justify-content: space-between;

height: var(--header-height);

background-color: #8ef

}

.header_logo {

background-image: image-url('logo_org_simple_transparent');

background-repeat: no-repeat;

background-size: contain;

width: calc(var(--header-height) * 2);

height: var(--header-height);

}

.header_menu {

display: flex;

list-style: none;

li {

display: flex;

align-items: center;

justify-content: center;

margin: 10px 0px 10px 5px;

width: 90px;

font-size: 14px;

color: #c00;

&+li {

padding-left: 5px;

border-left: 1px solid black;

}

Tips – フォームのデザイン

2021-03-17 / tau / コメントする

概要

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

共通事項

元になるHTML

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

<body>
  <div class="form_block">
    <h1>Input Form</h1>
    <form action="#" method="post">
      <input type="text" name="user_name" placeholder="ユーザー名">
      <input type="email" name="email" placeholder="メールアドレス">
      <input type="password" name="password" placeholder="パスワード">
      <button>サインアップ</button>
    </form>
  </div>
</body>

<body>

<h1>Input Form</h1>

<button>サインアップ</button>

</form>

</div>

</body>

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

<div class="form_block">
  <h1>Input Form</h1>
  <%= form_with(url: '#') do |f| %>
    <%= f.text_field(:user_name, placeholder: "ユーザー名") %>
    <%= f.email_field(:user_name, placeholder: "メールアドレス") %>
    <%= f.password_field(:user_name, placeholder: "パスワード") %>
    <button>サインアップ</button>
  <% end %>
</div>

<h1>Input Form</h1>

<%= form_with(url: '#') do |f| %>

<%= f.text_field(:user_name, placeholder: "ユーザー名") %>

<%= f.email_field(:user_name, placeholder: "メールアドレス") %>

<%= f.password_field(:user_name, placeholder: "パスワード") %>

<button>サインアップ</button>

<% end %>

</div>

リセットCSS

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

body, button, div, form, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body, button, div, form, input {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

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

body要素

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

body {
  background-color: #e8e8e8;
}

body {

background-color: #e8e8e8;

}

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

CSS

CSSの内容

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

/* フォームの外枠～フォーム全体の位置調整 */
.form_block {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 400px;
  height: auto;
  padding: 20px;
  background-color: #cdf;
}

/* フォームブロックの表題スタイル */
.form_block h1 {
  font-family: fantasy;
  font-size: 28px;
  text-align: center;
}

form {
  padding: 12px;
  background-color: #8cf;
}

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  margin-bottom: 12px;
  padding: 3px 10px;
  font-size: 16px;
}

form button {
  display: block;
  width: 50%;
  margin-top: 10px;
  margin-left: auto;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

/* フォームの外枠～フォーム全体の位置調整 */

.form_block {

position: absolute;

top: 20%;

left: 40%;

width: 400px;

height: auto;

padding: 20px;

background-color: #cdf;

}

/* フォームブロックの表題スタイル */

.form_block h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

form {

padding: 12px;

background-color: #8cf;

}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

margin-bottom: 12px;

padding: 3px 10px;

font-size: 16px;

}

form button {

display: block;

width: 50%;

margin-top: 10px;

margin-left: auto;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

div要素によるラップ

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

.form_block {
  width: 400px;
  padding: 20px;
  background-color: #cdf;
}

.form_block {

width: 400px;

padding: 20px;

background-color: #cdf;

}

表題

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

.form_block h1 {
  font-family: fantasy;
  font-size: 28px;
  text-align: center;
}

.form_block h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

form要素

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

form {
  padding: 12px;
  background-color: #8cf;
}

form {

padding: 12px;

background-color: #8cf;

}

input要素

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

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  margin-bottom: 12px;
  padding: 3px 10px;
  font-size: 16px;
}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

margin-bottom: 12px;

padding: 3px 10px;

font-size: 16px;

}

button要素

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

form button {
  display: block;
  width: 50%;
  margin-left: auto;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

form button {

display: block;

width: 50%;

margin-left: auto;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

フォームの位置調整

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

.form_block {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 400px;
  padding: 20px;
  background-color: #cdf;
}

.form_block {

position: absolute;

top: 20%;

left: 40%;

width: 400px;

padding: 20px;

background-color: #cdf;

}

SCSS

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

.form_standard {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 300px;
  padding: 20px;
  background-color: #cdf;
  /* フォームブロックの表題スタイル */
  h1 {
    font-family: fantasy;
    font-size: 28px;
    text-align: center;
  }
  // フォーム本体
  form {
    padding: 12px;
    background-color: #8cf;
    // フォーム内のinput要素
    input {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 32px;
      margin-bottom: 12px;
      padding: 3px 10px;
      font-size: 16px;
    }
    // フォーム内の送信ボタン
    button {
      display: block;
      width: 50%;
      margin-left: auto;
      padding: 10px;
      background-color: #ccc;
      font-size: 16px;
    }
  }
}

.form_standard {

position: absolute;

top: 20%;

left: 10%;

width: 300px;

padding: 20px;

background-color: #cdf;

/* フォームブロックの表題スタイル */

h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

// フォーム本体

form {

padding: 12px;

background-color: #8cf;

// フォーム内のinput要素

input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

margin-bottom: 12px;

padding: 3px 10px;

font-size: 16px;

}

// フォーム内の送信ボタン

button {

display: block;

width: 50%;

margin-left: auto;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

方法2～flex-box

CSS

CSSの内容

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

      /* フォームの外枠～フォーム全体の位置調整 */
/* フォームの外枠～フォーム全体の位置調整 */
.form_block {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 400px;
  height: auto;
  padding: 20px;
  background-color: #cdf;
}

/* フォームブロックの表題スタイル */
.form_block h1 {
  font-family: fantasy;
  font-size: 28px;
  text-align: center;
}

form {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 12px;
  background-color: #8cf;
}

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 3px 10px;
  font-size: 16px;
}

form button {
  align-self: flex-end;
  width: 50%;
  margin-right: 0;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

/* フォームの外枠～フォーム全体の位置調整 */

.form_block {

position: absolute;

top: 20%;

left: 40%;

width: 400px;

height: auto;

padding: 20px;

background-color: #cdf;

}

/* フォームブロックの表題スタイル */

.form_block h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

form {

height: 200px;

display: flex;

flex-direction: column;

justify-content: space-around;

padding: 12px;

background-color: #8cf;

}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

padding: 3px 10px;

font-size: 16px;

}

form button {

align-self: flex-end;

width: 50%;

margin-right: 0;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

div要素によるラップ

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

.form_block {
  width: 400px;
  height: auto;
  padding: 20px;
  background-color: #cdf;
}

.form_block {

width: 400px;

height: auto;

padding: 20px;

background-color: #cdf;

}

form要素

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

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

form {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 200px;
  padding: 12px;
  background-color: #8cf;
}

form {

display: flex;

flex-direction: column;

justify-content: space-around;

height: 200px;

padding: 12px;

background-color: #8cf;

}

input要素

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

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 3px 10px;
  font-size: 16px;
}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

padding: 3px 10px;

font-size: 16px;

}

button要素

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

form button {
  align-self: flex-end;
  width: 50%;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

form button {

align-self: flex-end;

width: 50%;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

SCSS

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

.form_standard {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 300px;
  padding: 20px;
  background-color: #cdf;
  /* フォームブロックの表題スタイル */
  h1 {
    font-family: fantasy;
    font-size: 28px;
    text-align: center;
  }
  // フォーム本体
  form {
    padding: 12px;
    background-color: #8cf;
    // フォーム内のinput要素
    input {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 32px;
      margin-bottom: 12px;
      padding: 3px 10px;
      font-size: 16px;
    }
    // フォーム内の送信ボタン
    button {
      display: block;
      width: 50%;
      margin-left: auto;
      padding: 10px;
      background-color: #ccc;
      font-size: 16px;
    }
  }
}

.form_standard {

position: absolute;

top: 20%;

left: 10%;

width: 300px;

padding: 20px;

background-color: #cdf;

/* フォームブロックの表題スタイル */

h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

// フォーム本体

form {

padding: 12px;

background-color: #8cf;

// フォーム内のinput要素

input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

margin-bottom: 12px;

padding: 3px 10px;

font-size: 16px;

}

// フォーム内の送信ボタン

button {

display: block;

width: 50%;

margin-left: auto;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

Tips – リストを横並びに

2021-03-16 / tau / コメントする

概要

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

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

HTML/CSS

HTML

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

<body>
  <ul class="menu">
    <li>新規投稿</li>
    <li>プロフィール</li>
    <li>設定</li>
    <li>ログアウト</li>
  </ul>
</body>

<body>

<li>プロフィール</li>

<li>ログアウト</li>

</ul>

</body>

CSS

CSSの例は以下のとおり。

/* リセットCSS */
body, div, li, ul {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* リストのul要素全体のスタイル */
.menu {
  list-style-type: none;
  display: flex;
}
/* 個々のli要素のスタイル */
.menu li {
  margin: 10px;
  padding: 10px;
  width: 100px;
  background-color: #ccc;
  text-align: center;
}

/* リセットCSS */

body, div, li, ul {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* リストのul要素全体のスタイル */

.menu {

list-style-type: none;

display: flex;

}

/* 個々のli要素のスタイル */

.menu li {

margin: 10px;

padding: 10px;

width: 100px;

background-color: #ccc;

text-align: center;

}

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

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

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

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

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

Rails/SCSS

HTML

HTMLの内容は同じ。

SCSS

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

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

// リストの水平配置
.menu {
  list-style-type: none;
  display: flex;
  /* 個々のli要素のスタイル */
  li {
    margin: 10px;
    padding: 10px;
    width: 100px;
    background-color: #ccc;
    text-align: center;
  }
}

// リストの水平配置

.menu {

list-style-type: none;

display: flex;

/* 個々のli要素のスタイル */

li {

margin: 10px;

padding: 10px;

width: 100px;

background-color: #ccc;

text-align: center;

}

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

2021-03-16 / tau / コメントする

概要

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

HTML/CSS

HTML

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

<body>
  <div class="button_like_anchor">
    <a href="#">ボタンのようなアンカー</a>
  </div>
</body>

<body>

<a href="#">ボタンのようなアンカー</a>

</div>

</body>

CSS

CSSの例は以下のとおり。

/* 関係要素のスタイルのリセット */
a, body, div {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* body要素の背景色を設定 */
body {
  background-color: #e8e8e8;
}

/* ボタン風でラップしたアンカーのスタイル */
.button_like_anchor a {
  display: inline-block;
  box-sizing: border-box;
  margin: 10px;
  padding: 8px 12px;
  border: 1px solid #000;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  background-color: #a0a0a0;
}
/* アンカー上に */
.button_like_anchor a:hover {
  background-color: #acacac;
  cursor: pointer;

/* 関係要素のスタイルのリセット */

a, body, div {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* body要素の背景色を設定 */

body {

background-color: #e8e8e8;

}

/* ボタン風でラップしたアンカーのスタイル */

.button_like_anchor a {

display: inline-block;

box-sizing: border-box;

margin: 10px;

padding: 8px 12px;

border: 1px solid #000;

border-radius: 5px;

text-decoration: none;

color: white;

background-color: #a0a0a0;

}

/* アンカー上に */

.button_like_anchor a:hover {

background-color: #acacac;

cursor: pointer;

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

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

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

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

Hover時の変化

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

Rails/SCSS

html.erb

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

<div class="button_like_anchor">
  <%= link_to('ボタンのようなアンカー', '#') %>
</div>

<%= link_to('ボタンのようなアンカー', '#') %>

</div>

SCSS

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

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

// body要素の背景色を設定
body {
  background-color: #e8e8e8;
}

// ボタン風でラップしたアンカーのスタイル
.button_like_anchor a {
  display: inline-block;
  box-sizing: border-box;
  margin: 10px;
  padding: 8px 12px;
  border: 1px solid #000;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  background-color: #a0a0a0;
  // Hover時のスタイル変化
  &:hover {
    background-color: #acacac;
    cursor: pointer;
  }
}

// body要素の背景色を設定

body {

background-color: #e8e8e8;

}

// ボタン風でラップしたアンカーのスタイル

.button_like_anchor a {

display: inline-block;

box-sizing: border-box;

margin: 10px;

padding: 8px 12px;

border: 1px solid #000;

border-radius: 5px;

text-decoration: none;

color: white;

background-color: #a0a0a0;

// Hover時のスタイル変化

&:hover {

background-color: #acacac;

cursor: pointer;

}

CSS – リセットCSS

2021-03-16 / tau / コメントする

概要

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

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

各種リセットCSS

Eric Meyer’s “Reset CSS” 2.0

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

HTML5 Doctor CSS Reset

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

100

101

102

html5doctor.com Reset Stylesheet

v1.6.1

Last Updated: 2010-09-17

Author: Richard Clark - http://richclarkdesign.com

Twitter: @rich_clark

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {

margin:0;

padding:0;

border:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

body {

line-height:1;

}

article,aside,details,figcaption,figure,

footer,header,hgroup,menu,nav,section {

display:block;

}

nav ul {

list-style:none;

}

blockquote, q {

quotes:none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content:'';

content:none;

}

a {

margin:0;

padding:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

/* change colours to suit your needs */

ins {

background-color:#ff9;

color:#000;

text-decoration:none;

}

/* change colours to suit your needs */

mark {

background-color:#ff9;

color:#000;

font-style:italic;

font-weight:bold;

}

del {

text-decoration: line-through;

}

abbr[title], dfn[title] {

border-bottom:1px dotted;

cursor:help;

}

table {

border-collapse:collapse;

border-spacing:0;

}

/* change border colour to suit your needs */

hr {

display:block;

height:1px;

border:0;

border-top:1px solid #cccccc;

margin:1em 0;

padding:0;

}

input, select {

vertical-align:middle;

}

Yahoo! (YUI 3) Reset CSS

/**
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * http://cssreset.com
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * http://yuilibrary.com/license/
 */
/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
	color:#000;
	background:#FFF;
}
/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
		- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,
img {
	border:0;
}
/*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
}

ol,
ul {
	list-style:none;
}

caption,
th {
	text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,
q:after {
	content:'';
}
abbr,
acronym {
	border:0;
	font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input,
textarea,
select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
	*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

/**

* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)

* http://cssreset.com

* http://yuilibrary.com/license/

TODO will need to remove settings on HTML since we can't namespace it.

TODO with the prefix, should I group by selector or property for weight savings?

html{

color:#000;

background:#FFF;

}

TODO remove settings on BODY since we can't namespace it.

TODO test putting a class on HEAD.

- Fails on FF.

body,

div,

dl,

dt,

dd,

ul,

ol,

li,

h1,

h2,

h3,

h4,

h5,

h6,

pre,

code,

form,

fieldset,

legend,

input,

textarea,

blockquote,

th,

td {

margin:0;

padding:0;

}

table {

border-collapse:collapse;

border-spacing:0;

}

fieldset,

img {

border:0;

}

TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...

address,

caption,

cite,

code,

dfn,

em,

strong,

th,

var {

font-style:normal;

font-weight:normal;

}

ol,

ul {

list-style:none;

}

caption,

th {

text-align:left;

}

h1,

h2,

h3,

h4,

h5,

h6 {

font-size:100%;

font-weight:normal;

}

q:before,

q:after {

content:'';

}

abbr,

acronym {

border:0;

font-variant:normal;

}

/* to preserve line-height and selector appearance */

sup {

vertical-align:text-top;

}

sub {

vertical-align:text-bottom;

}

input,

textarea,

select {

font-family:inherit;

font-size:inherit;

font-weight:inherit;

}

/*to enable resizing for IE*/

input,

textarea,

select {

*font-size:100%;

}

/*because legend doesn't inherit in IE */

legend {

color:#000;

}

/* YUI CSS Detection Stamp */

#yui3-css-stamp.cssreset { display: none; }

その他

Normalize.css

A Modern CSS Reset

Tips – headerの固定

2021-02-12 / tau / コメントする

概要

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

CSSで以下を設定する。

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

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="header_fix.css">
    <title>Fix Header</title>
  </head>
  <body>
    <header>
      <h1>吾輩は猫である</h1>
    </header>
    <main>
      <p>
        吾輩は猫である。名前はまだ無い。
      </p>
      ・・・・・・
    </main>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Fix Header</title>

</head>

<body>

<h1>吾輩は猫である</h1>

</header>

<main>

<p>

吾輩は猫である。名前はまだ無い。

</p>

・・・・・・

</main>

</body>

</html>

CSS

body {
  margin: 0;
}

header {
  position: fixed;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  height: 6em;
  border: solid 2px blue;
}

main {
  margin-top: 6em;
}

body {

margin: 0;

}

header {

position: fixed;

top: 0;

box-sizing: border-box;

width: 100%;

height: 6em;

border: solid 2px blue;

}

main {

margin-top: 6em;

}

body要素

margin: 0を指定する

header要素

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

メインコンテンツ

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

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

2021-01-23 / tau / コメントする

スタイルファイル(css)

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

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>自動販売機</title>
    <link rel="stylesheet" href="../include/view.css">
    <!-- includeディレクトリーがhtdocsの外側にあるときは読み込まれない -->
  </head>
  <body>
  .....
  </body>
</html>

<head>

<title>自動販売機</title>

</head>

<body>

.....

</body>

</html>

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>自動販売機</title>
    <style><?php include_once '../include/view.css' ?></style>
  </head>
  <body>
  .....
  </body>
</html>

<!DOCTYPE html>

<head>

<title>自動販売機</title>

</head>

<body>

.....

</body>

</html>