Html/css/js
Java JSP/Servlet(郵便番号検索)
郵便番号APIを利用して、郵便番号から住所を検索するアプリを作成してみよう。
作るもの
郵便番号を入れるフォームがあるので、調べたい郵便番号を入れて送信ボタンをおす。
結果が表示される
一つの郵便番...
JavaScript Webサイト制作-(郵便番号検索)
郵便番号APIを利用して、郵便番号から住所を検索するアプリを作成してみよう。
作るもの
郵便番号を入れるフォームがあるので、調べたい郵便番号を入れて送信ボタンをおす。
結果が表示される
一つの郵便番...
JavaScript JSによるゲーム制作-(PanelPazzle 2024版)
おなじみの15パズルを作成してみよう。以前の記事ではtableタグを使って作成していたが、2024版ではgridレイアウトを使って並べている。
完成イメージ
スタート画面
完成図が表示されている。このように1~15まで連...
JavaScript Webサイト制作-(カラーシュミレータ2024版)
JSを使ってカラーシミュレーターを作成してみよう。(この記事は以前に作成したものを2024年版としてリニューアルしたものです。)
作るもの
上部に色とカラーコード、下部にrgb成分を設定するスライダーと直接カラーコードを入力で...
website 一緒に作ろうHTML(カレンダー作成)
この記事はhtmlとcssを勉強し始めたばかりの人に送るWebsite作成記事だ。カレンダーを作成していくことによってhtmlとcssを学べる作りになっている。ではさっそくやっていこう。
準備編
まずは任意の場所(デスクトップ...
website Webサイト制作-3日目(css)
今回はいよいよCSSで見た目を整形していく。
css(cascading styel sheet)
csslessonフォルダの作成
まずは、デスクトップなどにcsslessonフォルダを作成する。そしてそのcssles...
website Webサイト制作-2日目(画像,動画)
今回は作成するサイトに、画像や動画を埋め込む方法を学習する。
画像や動画の埋め込み
imgmovieフォルダの作成
まずは、デスクトップなどにimgmovieフォルダを作成する。そしてそのimgmovieフォルダの中にi...
website Webサイト制作-1日目(html)
Webサイトを作成する言語HTMLを学ぼう。
はじめてのHTML
lesson1.html
まずは使い慣れているテキストエディターで以下のようにlesson1.htmlを作成する。。
<!DOCTYPE ht...
JavaScript JSによるゲーム制作-(神経衰弱2023ver)
トランプ画像を使って神経衰弱ゲームを作ってみよう。これは以前の記事を2023年版としてhtml,css,jsを書き直したものだ。以前はtableタグを使ってトランプを並べていたが、今回はgridを使ってトランプを配置している
...
JavaScript 午後のJS（フルーツリスト作成)
JavaScriptを使って以下の処理を作成してみよう。
仕様
実行すると以下のように表示される
フルーツの名前と価格を入れ登録ボタンを押す
下部にリストが表示され、入力欄が空になる
...
JavaScript テトリスを作ろう3
では前回の続きを作っていこう。
落下後、ボードに書き込む
落下したテトリミノをボード配列に書き込む処理を以下のように追記する。
//動きが止まったtetをボード座標に書き写す
const fix...
JavaScript テトリスを作ろう2
では前回の続きを作っていこう。
ボードの作成
テトリスは落下し終わったテトリミノは下部に積み上がっていく。この盤面に保存されているテトリミノの管理をするボードを作成しよう。以下のようにハイライト部を追記修正する。
<...
JavaScript テトリスを作ろう1
jsで定番ゲームテトリスを作ってみよう。
準備
tetris.htmlを任意の場所(desktop)に作成し、以下のように記述する。
<!DOCTYPE html>
<html>
<head...
JavaScript webAPIを叩いてみよう！
webAPIが何かを説明する前に実際に以下のURLを叩いてみよう。
これは国際宇宙ステーション(ISS)のリアルタイム座標をjsonで返却してくれるサービスだ。このようにURLを叩くことによって何らかの情報をレスポン...
website 疑似要素を使ってみよう
疑似要素とは要素にちょっとした装飾を施すときに便利な技術だ。さっそくやってみよう。
html & css
以下のようにマークアップする。
<!DOCTYPE html>
<html>
...
website cssグリッドでサイトを作成してみよう
アイテムをタイル状に並べたいときに便利なcssグリッドを使ってサイトを作ってみよう。今回作成するのがこちら年12月現在、アマゾンプライムで観ることのできる無料映画の中から私の好きな作品をピックアップしたものだ。（一応リンクも貼ってあるが、...
website htmlとcssでドーナツショップのメニューを作ろう
htmlとcssを使ってドーナツショップのメニューを作成します。カード型レイアウト用い、レスポンシブ対応も入れていきます。
website htmlとcssでダイスゲームの見た目を作ろう
HTMLとCSSを使ってダイスゲームの見た目を作成します。Flexboxを使ってPCで見てもスマホで見ても最適化されるようにし、CSSアニメーションを使って演出を加えます。
website htmlとcssでじゃんけんゲームの見た目を作ろう
HTMLとCSSを使ってじゃんけんゲームの見た目を作成します。Flexboxを使ってPCで見てもスマホで見ても最適化されるようにしていきます。
website 午後のhtml_4
指定されたデザインを形にできるか？html&cssを学び始めた初級者のための課題です。
作るお題
注意
左上隅はブラウザの画面にベタづきです。（隙間を開けてはいけません)
<!DOCTYPE ...