未分類 Sass（SCSS記法）を使ってみよう！
Sassとは？
Sassとは、CSSをより使いやすくするための言語で、その記法としてScssとSASSがあります。ここではScssでの記法を説明します。
Sassは特に、”変数を使用することができること”と”入れ子でCSSを記...
未分類 未分類 reset.cssの作り方
reset.cssというファイルを新規作成し、以下のコードを入力してhtml側で読み込みをする。
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, i...
DIVパズル レスポンシブ課題
レスポンシブでの実装に挑戦しましょう。DIVパズルで実践したcssを使用したレイアウトに慣れたら、次はパソコン画面の幅とスマートフォンの幅それぞれでレイアウトが切り替わるレスポンシブな実装に取り組んでください。
スタイルの切り替え方...
jQuery jQueryの使い方
jQueryとは
jQueryはJavaScriptのライブラリの一種です。jQueryを使用することで簡単にJavaScriptを記述できるようになります。
jQueryはhtmlの要素をクリックやスクロール、ホバーなどの操...
jQuery jQuery課題01
このページへアクセスしたりリロードをするとアラートが発動します。Hello World!とアラートを表示してみましょう。
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<...
jQuery jQuery課題02
jQueryを使ってタグにスタイルをつけてみましょう。
pタグの色をredに指定してみましょう。
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
...
jQuery jQuery課題03
jQueryを使ってタグにスタイルをつけてみましょう。
pタグの中の”change”というidを持つタグだけ文字色をredにしてください。
//サンプルのHTML
<!DOCTYPE html>
<html la...
jQuery jQuery課題04
jQueryを使ってテキストを表示しましょう。"text"というidを持つタグに"テキスト"と追加してください。
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
&...
jQuery jQuery課題05
jQueryを使ってクラスを追加しましょう。クラスを追加して、スタイルを付与してください。
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<me...
jQuery jQuery課題06
jQueryを使って要素を削除しましょう。ulタグ直下のliタグを削除してください。
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta ...
jQuery jQueryの使い方
jQueryとは
jQueryはJavaScriptのライブラリの一種です。jQueryを使用することで簡単にJavaScriptを記述できるようになります。
jQueryはhtmlの要素をクリックやスクロール、ホバーなどの操...
jQuery jQuery課題01
このページへアクセスしたりリロードをするとアラートが発動します。Hello World!とアラートを表示してみましょう。
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<...
jQuery jQuery課題02
jQueryを使ってタグにスタイルをつけてみましょう。
pタグの色をredに指定してみましょう。
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
...
jQuery jQuery課題03
jQueryを使ってタグにスタイルをつけてみましょう。
pタグの中の”change”というidを持つタグだけ文字色をredにしてください。
//サンプルのHTML
<!DOCTYPE html>
<html la...
jQuery jQuery課題04
jQueryを使ってテキストを表示しましょう。"text"というidを持つタグに"テキスト"と追加してください。
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
&...
jQuery jQuery課題05
jQueryを使ってクラスを追加しましょう。クラスを追加して、スタイルを付与してください。
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<me...
jQuery jQuery課題06
jQueryを使って要素を削除しましょう。ulタグ直下のliタグを削除してください。
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta ...
jQuery jQuery課題07 ボタンを押したら発動
jQueryを使ってボタンを押したらアラートが出る処理を実装しましょう
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset...
jQuery jQuery課題08 クリックすると要素が増える
jQueryを使ってボタンを押したらリストが増える処理を実装しましょう
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset...
jQuery jQuery課題09 クリックするとフェードアウトして消える
jQueryを使ってボタンを押したら要素がフェードアウトして消える
//サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="...
DIVパズル レスポンシブ課題
レスポンシブでの実装に挑戦しましょう。DIVパズルで実践したcssを使用したレイアウトに慣れたら、次はパソコン画面の幅とスマートフォンの幅それぞれでレイアウトが切り替わるレスポンシブな実装に取り組んでください。
スタイルの切り替え方...
DIVパズル DIVパズル01
reset.cssの作り方
※現在Gitでdevelopブランチにチェックアウトするとreset.cssが自動で生成されます。 以下のファイルの作成は参考までにしてください。
コーディングを始める時にreset.css...
DIVパズル DIVパズル02
注意事項
高さ（height）は指定しなくても良いところは指定しないようにしましょう
タグの間違えに注意しましょう
コンテンツ全体が画面の中央に表示されるように margin: 0 auto; などを使用してく...
DIVパズル DIVパズル03
注意事項
高さ（height）は指定しなくても良いところは指定しないようにしましょう
タグの間違えに注意しましょう
コンテンツ全体が画面の中央に表示されるように margin: 0 auto; などを使用してく...
DIVパズル DIVパズル04
注意事項
高さ（height）は指定しなくても良いところは指定しないようにしましょう
タグの間違えに注意しましょう
コンテンツ全体が画面の中央に表示されるように margin: 0 auto; などを使用してく...
DIVパズル DIVパズル05
注意事項
高さ（height）は指定しなくても良いところは指定しないようにしましょう
タグの間違えに注意しましょう
コンテンツ全体が画面の中央に表示されるように margin: 0 auto; などを使用してく...
DIVパズル DIVパズル06
注意事項
高さ（height）は指定しなくても良いところは指定しないようにしましょう
タグの間違えに注意しましょう
375px以下になっても画面が見切れたりしないようにする
「☆」は分かりやすくするための...
DIVパズル DIVパズル07
注意事項
タグの間違えに注意しましょう
375px以下になっても画面が見切れたりしないようにする
「☆」は分かりやすくするためのマークなので、コードには記載しないでください。