website 一緒に作ろうHTML(カレンダー作成)
HTMLとCSSを使ってカレンダーを作成する方法をステップごとに解説。基本的なコーディングから、CSS疑似クラスを活用した効率的なデザインの方法まで、初心者にもわかりやすく紹介しています。
css
website 
JavaScript 午後のJS（フルーツリスト作成)
JavaScriptを使って以下の処理を作成してみよう。仕様 実行すると以下のように表示されるフルーツの名前と価格を入れ登録ボタンを押す下部にリストが表示され、入力欄が空になる続いて入力しよう。今度はばなな100円を登録するするとリストは価...
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注)960ｐｘは画面に対してセンタリングされていること。上部はベタづき...
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.以下のファイルをダウンロードし、好きな場所に解凍する。2...
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.html11行目:window.onload=function(){};文書読み込み完了後に処...
JavaScript Webサイト制作-8日目(JavaScript)
JavaScriptはオブジェクト指向言語の側面も持っている。オブジェクトを見ていこう。jsでは波括弧でオブジェクトを定義する。以下は空のオブジェクト以下はpenオブジェクト。プロパティ名:値でプロパティを定義していく。昨今のjsはクラス構...
JavaScript Webサイト制作-7日目(JavaScript)
JavaScriptは現在もっとも人気のある言語だ。この先も活躍の場が広がることが予想され、学んで損のないコスパの高い言語と言って良いだろう。それでは、さっそくやっていこう。まずは以下のようなjsLesson1.htmlを作成する。●jsL...
website Webサイト制作-6日目(form)
今回はユーザーからのデータを受け取る時とかに使う。formについて学習しよう。デスクトップあたりにでもformLesson.htmlを作成し以下を入力しよう。ブラウザで確認してみよう。以下のように表示されれば成功だ。8,11行目:formは...
website Webサイト制作-5日目(レスポンシブ)
現在はpcでwebを見る人よりスマホなどのモバイルデバイスでwebを見る人の方が多い。なのでサイト制作もモバイルでの利用を最大限考慮しなくてはならない。今回はモバイルにも対応させたサイトを作ってみよう。注)aspect-ratioプロパティ...