css

website

一緒に作ろうHTML(カレンダー作成)

この記事はhtmlとcssを勉強し始めたばかりの人に送るWebsite作成記事だ。カレンダーを作成していくことによってhtmlとcssを学べる作りになっている。ではさっそくやっていこう。 準備編 まずは任意の場所(デスクトップ...
JavaScript

午後のJS(フルーツリスト作成)

JavaScriptを使って以下の処理を作成してみよう。 仕様 実行すると以下のように表示される フルーツの名前と価格を入れ登録ボタンを押す 下部にリストが表示され、入力欄が空になる ...
jQuery

jQuery(タイピング風テキストアニメーション)

jQueryでタイピング風テキストアニメーションを作成します。今回はプログラムコーディングを意識して作ってみました。
jQuery

jQuery(サムネつきスライドショー)

jQueryでサムネをクリックすることで画像が入れ替わるスライドショーを作成します。
jQuery

jQuery(fadeIn,fadeOut)

準備 1.以下のファイルをダウンロードし、好きな場所に解凍する。2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Templateフ...
website

一緒に作ろうHTML(カレンダー作成)

この記事はhtmlとcssを勉強し始めたばかりの人に送るWebsite作成記事だ。カレンダーを作成していくことによってhtmlとcssを学べる作りになっている。 ではさっそくやっていこう。 準備編 1.まずはデスクトップに新規フォルダを作成...
website

午後のhtml_1

午後のひとときにhtml,cssの腕試しをしてみよう! 細かい指定がない部分はだいたい見た感じが同じならOK。 ただし、最初にヤフーのcssリセットをしてから行うこと。 お題1 注)960pxは画面に対してセンタリングされている...
JavaScript

午後のJS(九九表作成)

午後のひととき、サクッとJSで遊びましょう。 for文の練習でよく出てくる九九表に今回は見出しが付いています。 html,css,jsを使ってコーディングしてみてください。 ○JS以外が書き込まれたところからやりたい人はこ...
jQuery

jQuery(mouserover,mouseenterの違い)

似てて異なるmouseoverイベントとmouseenterイベントの違いを確認しよう。 準備 1.以下のファイルをダウンロードし、好きな場所に解凍する。 2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最...
jQuery

jQuery6(スティッキーの作成:応用)

前回、スティッキーの基本を学習したが、今回はそれの応用だ。画面に常駐させるのは便利である反面、画面を占有してしまうデメリットがある。画面の小さいノートパソコンで閲覧していると邪魔に感じることも少なくない。そこで常駐させる際にサイズを縮めてあ...
jQuery

jQuery5(スティッキーの作成:基本)

ナビゲーションの常時表示などに使われるスティッキーを作成してみよう。 準備 1.以下のファイルをダウンロードし、好きな場所に解凍する。 2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これ...
jQuery

jQuery4(スライダーの作成)

おなじみのスライダーだ。実際は人が作ったプラグインを利用させてもらうことの方が多いが、自分で一度作っておくとプラグインを利用する際でも理解度が違う。一度は自分でつくってみよう。 準備 1.以下のファイルをダウンロードし、好きな場所に解凍...
jQuery

jQuery3

準備 1.以下のファイルをダウンロードし、好きな場所に解凍する。 2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Template...
jQuery

jQuery2

準備 1.以下のファイルをダウンロードし、好きな場所に解凍する。 2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Template...
jQuery

jQuery1

jQueryとはJavaScriptライブラリの一つでこれを使うと、簡単に記述でき、ブラウザ間によるjs挙動の差異も埋めてくれる。 人気のピークはすぎた感があるがそれでも便利なことには変わりはない。早速使ってみよう。 準備 1.以...
JavaScript

Webサイト制作-9日目(JavaScript)

JavaScriptといえばイベント処理だ。ここまででもクリックイベントは出てきたが様々なイベントがあるさっそく見ていこう。 ●jsLesson9.html 11行目:window.onload=function(){};文...
JavaScript

Webサイト制作-8日目(JavaScript)

JavaScriptはオブジェクト指向言語の側面も持っている。オブジェクトを見ていこう。 jsでは波括弧でオブジェクトを定義する。以下は空のオブジェクト 以下はpenオブジェクト。プロパティ名:値でプロパティを定義していく。 ...
JavaScript

Webサイト制作-7日目(JavaScript)

JavaScriptは現在もっとも人気のある言語だ。この先も活躍の場が広がることが予想され、学んで損のないコスパの高い言語と言って良いだろう。 それでは、さっそくやっていこう。まずは以下のようなjsLesson1.htmlを作成す...
website

Webサイト制作-6日目(form)

今回はユーザーからのデータを受け取る時とかに使う。formについて学習しよう。 デスクトップあたりにでもformLesson.htmlを作成し以下を入力しよう。 ブラウザで確認してみよう。以下のように表示されれば成功だ。 ...
website

Webサイト制作-5日目(レスポンシブ)

現在はpcでwebを見る人よりスマホなどのモバイルデバイスでwebを見る人の方が多い。なのでサイト制作もモバイルでの利用を最大限考慮しなくてはならない。 今回はモバイルにも対応させたサイトを作ってみよう。 注)aspect-rati...
スポンサーリンク
タイトルとURLをコピーしました