Firstly (はじめに)

  • ホームページファイルについての基礎知識
  • HTML要素の構成
  • CSSの書き方
  • javascriptで「おみくじ」

HTML

  • HTML要素の構成
  • !DOCTYPE
  • a
  • abbr
  • address
  • article
  • aside
  • b
  • base
  • blockquote
  • body
  • br
  • button
  • canvas
  • cite
  • code
  • datalist
  • del
  • details
  • dfn
  • dialog
  • div
  • dl-dt-dd
  • em
  • figure
  • footer
  • form
  • h
  • head
  • header
  • hr
  • html
  • i
  • iframe
  • img
  • input
  • ins
  • kbd
  • label
  • link
  • main
  • mark
  • meta
  • meter
  • nav
  • object
  • optgroup
  • option
  • output
  • p
  • pre
  • progress
  • q
  • ruby
  • s
  • samp
  • script
  • section
  • select
  • small
  • span
  • strong
  • style
  • table
  • textarea
  • title
  • u
  • ul, ol, li
  • var
  • video

HTML input要素

  • input type=button
  • input type=checkbox
  • input type=text

Attr グローバル属性

  • accesskey
  • class
  • contenteditable
  • data
  • dir
  • draggable
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

Attr その他の属性

  • accept
  • action
  • alt
  • autocomplete
  • autofocus
  • checked
  • cite
  • colspan
  • disabled
  • Event Handler
  • form
  • height
  • href
  • hreflang
  • list
  • max
  • maxlength
  • method
  • min
  • minlength
  • name
  • pattern
  • rel
  • readonly
  • required
  • rowspan
  • size
  • src
  • step
  • target
  • type
  • value
  • width

CSS プロパティ

  • セレクターの使い方
  • CSSの書き方
  • CSSの単位について
  • @keyframes
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • attr
  • backdrop-filter
  • background
  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top
  • border-top-color
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc
  • color
  • columns
  • column-count
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • content
  • cursor
  • display
  • filter
  • flex-grow
  • float
  • font
  • font-family
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • height
  • left
  • letter-spacing
  • line-height
  • linear-gradient
  • list-style
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • opacity
  • overflow
  • overflow-wrap
  • overflow-x
  • overflow-y
  • radial-gradient
  • right
  • rotate
  • scale
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • position
  • text-align
  • text-decoration
  • text-indent
  • text-shadow
  • text-transform
  • top
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • translate
  • var
  • vertical-align
  • width
  • white-space
  • word-spacing
  • z-index

CSS 疑似クラス

  • :active
  • :checked
  • :default
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :hover
  • :in-range
  • :invalid
  • :lang
  • :last-child
  • :last-of-type
  • :link
  • :not
  • :nth-child
  • :nth-last-child
  • :nth-last-of-type
  • :nth-of-type
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :read-write
  • :required
  • :root
  • :target
  • :visited

CSS 疑似要素

  • ::after
  • ::before
  • ::first-letter
  • ::first-line

JS 他のオブジェクト

  • Image
  • navigator
  • Number
  • XMLHttpRequest

JS Array

  • Array
    • メソッド
  • Array.concat
  • Array.entries
  • Array.every
  • Array.find
  • Array.forEach
  • Array.join
  • Array.keys
  • Array.map
  • Array.pop
  • Array.push
    • プロパティ
  • Array.length

JS console

    メソッド
  • console.log

JS Date

  • Date
    • メソッド
  • Date.getDate
  • Date.getDay
  • Date.getFullYear
  • Date.getHours
  • Date.getMinutes
  • Date.getMonth
  • Date.getSeconds
  • Date.setDate
  • Date.setFullYear
  • Date.setHours
  • Date.setMinutes
  • Date.setMonth
  • Date.setSeconds
  • Date.toDateString
  • Date.toJSON
  • Date.toLocaleDateString
  • Date.toLocaleString
  • Date.toLocaleTimeString

JS Document

    メソッド
  • document.getElementsByClassName
  • document.getElementById
  • document.getElementsByName
  • document.getElementsByTagName
  • document.querySelector
  • document.querySelectorAll
  • document.write
    • プロパティ
  • document.forms
  • document.images.src
  • document.stylesheets.disabled
  • document.title

JS Element

    メソッド
  • Element.closest
  • Element.getAttribute
  • Element.getAttributeNames
  • Element.hasAttribute
  • Element.insertAdjacentElement
  • Element.insertAdjacentHTML
  • Element.insertAdjacentText
  • Element.removeAttribute
  • Element.setAttribute
    • プロパティ
  • Element.attributes
  • Element.classList
  • Element.className
  • Element.clientHeight
  • Element.clientLeft
  • Element.clientTop
  • Element.clientWidth
  • Element.firstElementChild
  • Element.id
  • Element.innerHTML
  • Element.innerText
  • Element.lastElementChild
  • Element.outerHTML
  • Element.readOnly
  • Element.scrollHeight
  • Element.scrollLeft
  • Element.scrollTop
  • Element.scrollWidth
  • Element.style
  • Element.tagName
  • Element.value
  • InputElement.checked

JS EventTarget

    メソッド
  • EventTarget.addEventListener
  • EventTarget.dispatchEvent
  • EventTarget.removeEventListener

JS HTMLElement

    プロパティ
  • HTMLElement.offsetHeight
  • HTMLElement.offsetWidth

JS HTMLFormElement

    プロパティ
  • HTMLFormElement.action
  • HTMLFormElement.elements
  • HTMLFormElement.length
  • HTMLFormElement.method
  • HTMLFormElement.name
  • HTMLFormElement.target

JS HTMLInputElement

    メソッド
  • InputElement.select

JS HTMLMediaElement

    プロパティ
  • HTMLMediaElement.src

JS Math

    メソッド
  • Math.abs
  • Math.ceil
  • Math.floor
  • Math.log
  • Math.pow
  • Math.random
  • Math.round
    • プロパティ
  • Math.PI

JS Node

    メソッド
  • Node.after
  • Node.append
  • Node.before
  • Node.prepend
  • Node.remove
  • Node.replaceWith
    • プロパティ
  • Node.baseURI
  • Node.childElementCount
  • Node.children
  • Node.nodeName
  • Node.nodeType

JS RegExp

  • RegExp
    • メソッド
  • RegExp.exec
  • RegExp.test
    • プロパティ
  • RegExp.flags
  • RegExp.source

js: screen

    プロパティ
  • screen.colorDepth
  • screen.height
  • screen.width

JS String

  • String
    • メソッド
  • String.concat
  • String.indexOf
  • String.match
  • String.padEnd
  • String.padStart
  • String.repeat
  • String.replace
  • String.replaceAll
  • String.search
  • String.split
    • プロパティ
  • String.length

JS URLSearchParams

  • URLSearchParams
    • メソッド
  • URLSearchParams.get

js: window

    メソッド
  • window.alert
  • window.clearInterval
  • window.confirm
  • window.getComputedStyle.getPropertyValue
  • window.print
  • window.prompt
  • window.open
  • window.resizeBy
  • window.resizeTo
  • window.setInterval
    • プロパティ
  • window.innerHeight
  • window.innerWidth
  • window.location
  • window.location.href
  • window.location.search
  • window.outerHeight
  • window.outerWidth
  • window.screen.height
  • window.screen.width

JS 制御文

  • break
  • for
  • if,else
  • switch
  • try,catch,finally
  • while
  • function

JS 関数

  • function
  • encodeURI
  • decodeURI
  • parseFloat
  • parseInt

JS 演算子

  • typeof
  • i++ と ++i

jQ メソッド

  • セレクターの使い方
  • jQueryの書き方
  • add
  • addBack
  • addClass
  • after
  • animate
  • append
  • appendTo
  • attr
  • before
  • children
  • clearQueue
  • clone
  • closest
  • contents
  • css
  • delay
  • dequeue
  • detach
  • each
  • empty
  • end
  • eq
  • every
  • fadeIn
  • fadeOut
  • fadeTo
  • fadeToggle
  • filter
  • find
  • finish
  • first
  • get
  • has
  • hasClass
  • height
  • html
  • innerHeight
  • innerWidth
  • insertAfter
  • insertBefore
  • is
  • last
  • length
  • load
  • makeArray
  • map
  • next
  • nextAll
  • nextUntil
  • not
  • offset
  • offsetParent
  • outerHeight
  • outerWidth
  • parent
  • parents
  • parentsUntil
  • position
  • prepend
  • prependTo
  • prev
  • prevAll
  • prevUntil
  • prop
  • queue
  • remove
  • removeAttr
  • removeClass
  • removeProp
  • replaceAll
  • replaceWith
  • reverse
  • scrollTop
    • scrollLeft
  • serialize
  • siblings
  • slice
  • slideToggle
    • slideDown
    • slideUp
  • stop
  • text
  • toggle
    • hide
    • show
  • toggleClass
  • unwrap
  • val
  • width
  • wrap
  • wrapAll
  • wrapInner

jQ 関数

  • $.ajax
  • $.ajaxPrefilter
  • $.ajaxSetup
  • $.get
  • $.getJSON
  • $.getScript
  • $.isArray
  • $.isEmptyObject
  • $.isNumeric
  • $.isWindow
  • $.merge
  • $.noop
  • $.post
  • $.type

jQ イベントメソッド

  • ajaxComplete
  • ajaxError
  • ajaxSend
  • ajaxStart
  • ajaxStop
  • ajaxSuccess
  • blur
  • change
  • click
  • dblclick
  • delegate
  • focus
  • focusin
  • focusout
  • hover
  • keydown
  • keypress
  • keyup
  • mousedown
  • mouseenter
  • mouseleave
  • mousemove
  • mouseout
  • mouseover
  • mouseup
  • off
  • on
  • one
  • ready
  • resize
  • scroll
  • select
  • submit
  • trigger
  • triggerHandler

jQ イベントオブジェクト ( EO )

  • EO.currentTarget
  • EO.data
  • EO.delegateTarget
  • EO.namespace
  • EO.pageX
  • EO.pageY
  • EO.relatedTarget
  • EO.result
  • EO.target
  • EO.timeStamp
  • EO.type
  • EO.which
  • EO.isDefaultPrevented
  • EO.isImmediatePropagationStopped
  • EO.isPropagationStopped
  • EO.preventDefault
  • EO.stopImmediatePropagation
  • EO.stopPropagation

jQ エフェクツプロパティ ( fx )

  • fx.interval
  • fx.off
  • fx.speeds

jQ プログラム

  • キーワード フォント カラー
  • スムーススクロール
  • データテーブル
  • ドラッグスクロール
  • ドロップダウンメニュー

SQL DBの操作

  • XAMPP
  • ALTER USER IDENTIFIED
  • CREATE DATABASE
  • CREATE TABLE
  • CREATE USER
  • DELETE
  • DROP USER
  • GRANT
  • INSERT INTO
  • UPDATE

SQL データの抽出

  • SELECT
  • GROUP BY
  • LIMIT
  • ORDER BY
  • WHERE
  • WHERE 1=1

SQL 演算子

  • 算術演算子
  • 比較演算子
  • 論理演算子
  • AS
  • BETWEEN
  • IS NOT NULL
  • IS NULL
  • LIKE

SQL 関数

  • AVG
  • CAST
  • CEILING
  • CONCAT
  • COUNT
  • FLOOR
  • IN
  • LAST_DAY
  • LENGTH
  • LOWER
  • MAX
  • MIN
  • MOD
  • NOT IN
  • POSITION
  • RAND
  • ROUND
  • SUBSTRING
  • SUM
  • SYSDATE
  • TRIM
  • UPPER

php 関数

    言語構造
  • echo
  • print
    • ディレクトリ
  • scandir
    • 日付・時刻
  • date
  • getdate
  • time
    • 数学
  • round
    • 文字列
  • str_contains
  • str_repeat
  • str_replace
  • strlen
  • strrev
  • substr
  • ucfirst
    • 画像
  • getimagesize
    • 変数
  • array
  • array_key_exists
  • array_keys
  • count
  • isset
  • print_r
  • var_dump

php プログラム

  • PDO & MySQL

Term (用語)

  • イベントとは
  • オブジェクトとは
  • 関数とは
  • クエリとは
  • クラスとは
  • グローバル属性とは
  • コールバック関数とは
  • コンストラクタとは
  • 正規表現とは
  • 絶対参照と相対参照とは
  • バブリングとは
  • 比較演算子とは
  • ブロックレベル要素とインライン要素とは
  • 変数と配列変数とは
  • 命名規則とは
  • term: 論理演算子とは

Ideas and Tips (アイデアとヒント)

  • セレクターの使い方 (CSS,JS,jQuery)
  • Google Fonts(グーグルフォント)の利用方法
  • XAMPP (Web開発環境の構築)
  • 色見本 (カラーサンプル)
  • RGBA 色見本ツール (カラーサンプル)
  • おみくじ
  • 掛け算九九
  • カレンダー
  • 背景画像とグラデーション