[CSS] 基本メモ: overflowプロパティ

visible
はみ出した部分も表示される。

hidden
はみ出した部分は表示されない。

scroll
はみ出した部分はスクロールして見れるようになる。

サンプル

css_overflow

参考サイト

overflow-スタイルシートリファレンス
http://www.htmq.com/style/overflow.shtml

[CSS] 基本メモ: displayプロパティ

block
ブロックボックスを生成する。前後に改行が入る。

inline
インラインボックスを生成する。前後に改行が入らない。高さと幅の設定が効かなくなる。

inline-block
インラインレベルのブロックコンテナを生成する。前後に改行が入らない。高さと幅の設定は効く。

none
表示されない。

サンプル

css_display

参考サイト

display-スタイルシートリファレンス
http://www.htmq.com/style/display.shtml

[CSS] 基本メモ: ブロック要素

 ブロック要素のスタイル

参考サイト

スタイルシートリファレンス(目的別)
http://www.htmq.com/style/index.shtml

[CSS] 基本メモ: 背景

背景のスタイル

参考サイト

スタイルシートリファレンス(目的別)
http://www.htmq.com/style/index.shtml

[CSS] 基本メモ: フォント&テキスト

数あるスタイルの中から自分が良く使いそうなモノをざっくり抜粋。

フォントスタイル

テキストスタイル

参考サイト

スタイルシートリファレンス(目的別)
http://www.htmq.com/style/index.shtml

[CSS] 基本メモ: 書き方、セレクタ、優先度、色の指定

CSS再勉強。参考サイトが助けになる。

CSSの基本-HTMLクイックリファレンス
http://www.htmq.com/csskihon/index.shtml

CSSを書く場所

  • HTMLタグ中にstyle属性として書く
  • ヘッダ中に<style>タグを使って書く
  • 外部ファイルに書く <link ref=”stylesheet” href=”default.css”>

CSSの書き方

セレクタの種類

  • * – 全てのセレクタ
  • a, b – 複数のセレクタを指定 (aとb)
  • a b – a要素内のb要素を指定 (全ての子孫が対象)
  • a > b – a要素直下のb要素を指定 (子要素のみが対象)
  • a + b – a要素直後のb要素だけ指定
  • ab – a要素であって、かつ、b要素であるものだけ指定

スタイル指定の優先度

  • 後から書いた方が優先
  • インラインで書いた方が優先
  • 詳細度の高い方が優先 (#(id)100ポイント、.(class)10ポイント、タグ 1ポイント)
  • !important指定が最優先

CSSの優先順位~CSSテクニック~
http://www.stylish-style.com/csstec/base/order.html

色の指定

  • 名前で指定する red, gree, blue
  • rgb値で指定する rgb(255,0,255)
  • 16進数で指定する #00f, #ff0000

[HTML5] 新タグなどの予備知識ざっくり

最近フロントエンドはあまりやってないけど、いつ何時必要になるかわからないので、自分の古いHTMLの知識をざっくり補っておく。完全な仕様は参考サイトが詳しい。

HTML5リファレンス
http://www.htmq.com/html5/

ページの雛形

HTML5になったら最低限必要な属性はしっかり書かないとね。

テーブル

テーブルをエレメント分けするタグが増えた。

<tbody>-HTML5タグリファレンス
http://www.htmq.com/html5/tbody.shtml

trとかtdって何の略だっけ?と、記憶が怪しいので復習。

アンカー

アンカーはidで指定できるようになったみたい。

フォーム要素

たとえば以下のような入力種別が増えてる。required(必須)を指定すると、未入力だとブラウザが警告を表示。

<input>-HTML5タグリファレンス
http://www.htmq.com/html5/input.shtml

ラベル

ラベルタグで囲むことで、ラベル文字列のクリックでラジオボタンが変化するようにできる。

for属性を指定することで、ラジオボタンとラベルを離して配置することもできる。

リスト

ドロップダウンリスト。

select

窓のサイズを指定したリスト。

select_size

スタイリング関連

これはHTML5以前の内容だけど、ざっくり復習。

divとspanの違い。

  • div 汎用ブロック要素 (前後が改行される)
  • span 汎用インライン要素 (前後が改行されない)

idとclassの違い。

  • id 文章中で唯一の要素
  • class 文章中で複数存在し得る要素

サンプル

セマンティックなタグ

HTML5から文章構造を示すタグが追加されている。たとえば以下のような。

  • header
  • footer
  • nav
  • article
  • aside
  • section、など

HTML5対応ブラウザ用にはタグを書く。

旧ブラウザ用にはidを指定して書く。

HTML5のセマンティックなマークアップを知ろう(文書の構造編) [Skillhub (スキルハブ)]
http://skillhub.jp/courses/1/lessons/45

[HTML5] 新要素まとめ【2014/2/14版勧告候補】 – Qiita
http://qiita.com/maccotsan/items/20c6ea274b0190dc2c05

[JavaScript] 基本メモ: DOM操作

DOM = Document Object Model

プロパティへのアクセス

サンプル: 3秒後にGoogleへジャンプする

ドキュメントの操作

window.document = 現在開いているドキュメント (先頭のwindowは省略可)

属性の変更

要素の追加

body要素の末尾にparagを追加し、paragの末尾にtextを追加。

イベントの追加

ボタンをクリックするたびにページ末尾にHello Worldが追加される。

[JavaScript] 基本メモ: タイマー処理

タイマー関数

指定した間隔ごとにコールバック関数を呼び出す

指定した時間経過したらコールバック関数を呼び出す

setInterval()使用上の注意

setInterval()は、以前に呼び出したコールバック関数の処理が終わっているかどうかに関わらず、時間が経過したら新たにコールバック関数を呼び出してしまう。もしコールバック関数の処理に時間が掛かっていると、以前のコールバック関数が終了する前に新しくコールバック関数が呼び出されることになり、結果的に処理中のコールバック関数が増えすぎてシステムリソースを食い潰してしまうこともあり得る。

setTimeout()を使ったインターバル処理

以下のように再帰的にsetTimeout()を呼び出すことで、安全にインターバル処理を行うこともできる。

たとえば、もし60秒でインクリメント処理を終えたい場合は以下のようにすればよい。

[JavaScript] 基本メモ: 組み込みオブジェクト

良く使いそうなもの。

String

Array

Math

Date