Html/css/js
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 ...
website 午後のhtml_3
指定されたデザインを形にできるか？html&cssを学び始めた初級者のための課題です。
作るお題
寸法
だいたいその通りになればOKですが、以下の寸法は遵守してください。(最初にCSSresetしてくださ...
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を実際のサイト作成を行いながら使ってみよう。
今回作成するサイトはこち...
website Atomでスニペット（定型文登録)
AtomでHTMLをコーディングしていてダミーテキストをさっと埋め込みたいと思いAtomのスニペットを調べました。このサイトが端的にまとまっていました。
スニペット登録
実際に今回登録したsnippets.csonが以下です...
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というサービスを利用させてい...