website 午後のhtml_3
指定されたデザインを形にできるか？html&cssを学び始めた初級者のための課題です。作るお題寸法だいたいその通りになればOKですが、以下の寸法は遵守してください。(最初にCSSresetしてください)width:960px...ブラウザに...
website
website 
website Webサイト制作(レイアウト)
htmlとcssの基本がわかったところで、基本的なレイアウトを作ってみよう。いつものようにLesson6フォルダを作り、その中にcss,js,imagesフォルダを作成し、lesson6_1.htmlとmain_1.cssを以下のように記述...
website 一緒に作ろうHTML(カレンダー作成)
この記事はhtmlとcssを勉強し始めたばかりの人に送るWebsite作成記事だ。カレンダーを作成していくことによってhtmlとcssを学べる作りになっている。ではさっそくやっていこう。準備編1.まずはデスクトップに新規フォルダを作成する。...
website Webサイト制作(Flexbox_レスポンシブ)
今回制作するのがこちら以前は結構面倒だったのだがFlexboxを使えるようになってだいぶ楽になった印象だ。完成版サイトはこちらFlexSampleSite2ブラウザを狭めたり広げたりして動きを確認しよう。今回はスマホ版から作成していくモバイ...
website 午後のhtml_1
午後のひとときにhtml,cssの腕試しをしてみよう！細かい指定がない部分はだいたい見た感じが同じならOK。ただし、最初にヤフーのcssリセットをしてから行うこと。お題1注)960ｐｘは画面に対してセンタリングされていること。上部はベタづき...
website Webサイト制作(Flexbox)
HTML+CSSでのレイアウトが格段にやりやすくなるFlexbox、策定から長い年月が経ち主要ブラウザで安心して使えるようになってきた。今回はこのFlexboxを実際のサイト作成を行いながら使ってみよう。今回作成するサイトはこちらFlexS...
website Atomでスニペット（定型文登録)
AtomでHTMLをコーディングしていてダミーテキストをさっと埋め込みたいと思いAtomのスニペットを調べました。このサイトが端的にまとまっていました。スニペット登録実際に今回登録したsnippets.csonが以下です。□HTML○ダミー...
JavaScript 午後のJS（九九表作成)
午後のひととき、サクッとJSで遊びましょう。for文の練習でよく出てくる九九表に今回は見出しが付いています。html,css,jsを使ってコーディングしてみてください。○JS以外が書き込まれたところからやりたい人はこちら
JavaScript JSONP(郵便番号APIとの連携)
前回はproxyを設置してAjaxにて通信を行った。これはAjaxからでは直接外部ドメインにアクセスできないという制約のためだ。zipcloudはjsonp(json with padding)にも対応しているので今回はそれを利用してみる。...
JavaScript Ajax通信(郵便番号APIとの連携)
Ajax(Asynchronous JavaScript + XML)を利用して非同期通信を行ってみよう。郵便番号APIに接続し郵便番号を入れると住所が自動入力されるようにする。今回はzipcloudというサービスを利用させていただく。zi...
JavaScript bootstrap4
cssを１から書いてもよいが汎用的に使えるスタイルをまとめてくれているcssフレームワークというものが存在する。今回はそのcssフレームワークの代表格bootstrapを使ってみよう。なおbootstrapのバージョンは４.0を使う。準備●...
JavaScript Ajax通信
Ajax(Asynchronous JavaScript + XML)を利用して非同期通信を行ってみよう。今回サーバーサイドはJavaを利用する。●エクリプス新規動的プロジェクトからajaxlessonを作成する。●新規サーブレットからco...
JavaScript JSによるゲーム制作-(神経衰弱)
トランプ画像を使って神経衰弱を作ってみよう。2023作成の最新版があります1.まずは以下をダウンロードし、デスクトップに展開する。2.以下のようなフォルダ構成になっている。imagesフォルダにはトランプの画像が入っている。3.index....
JavaScript JSによるゲーム制作-(PanelPazzle)
パネルをスライドさせてもとの配置に戻すゲームを作成してみよう。記事を新しくしました。こちらを参照してください。スタート画面スタートボタンを押すとシャッフルされる。15パズルの要領で移動させていく、動かせるパネルをクリックすると移動する。完成...
JavaScript Webサイト制作-(カラーシュミレータ)
JSを使ってカラーシミュレーターを作ってみよう。この記事には2024版があります上部に色とカラーコード、下部にrgb成分を設定するスライダーが表示されている。スライダーを設定すると色とカラーコードが表示される。●index.html
JavaScript Webサイト制作-(BMIアプリの作成)
JSを使ってBMI測定アプリを作成しよう。フォーム表示身長と体重を入力して計測ボタンを押すと結果が表示される。なおBMIは体重kg/(身長m*身長m)で求められ判定基準は以下とする。18.5未満 低体重18.5～25未満 普通25～30未満...
JavaScript Webサイト制作-12日目(実習)
今まで学んだことをいかして、下のようなサイトを作成してみよう。以下の仕様を満たすこと。◯重なっているコビトカバの写真をクリックすると最前面に表示される。◯表の偶数行に色をつける。◯jQueryは不可なお、コビトカバの画像は下からダウンロード...
JavaScript Webサイト制作-12日目(JS_プロトタイプ)
Javaは継承という仕組みを使ってオブジェクトを再利用するがJSはプロトタイプという仕組みを使う。ここではこのプロトタイプは一体なんぞやというところを見ていこう。JavaScriptのプロトタイプからオブジェクト指向を学ぶJSではすべてのオ...
JavaScript Webサイト制作-11日目(createElement)
JSによって動的に要素を作成し追加できる。さっそくやってみよう。ボタンがある。押すと要素が追加される。押すたびに要素が追加されていく。web11フォルダを作成しその中にlesson1.htmlを以下のように作成する。●lesson1.htm...
website Webサイト制作(float,absolute)
floatfloatを使ったときの回り込みの挙動を確認しよう。1.デスクトップに新しくフォルダ(sample)を作り、その中にcss,images,jsフォルダを作成する。2.下の画像をダウンロードしてimagesフォルダに格納する。3.f...