website

Html/css/js

JavaScript

JSによるゲーム制作-(神経衰弱2023ver)

トランプ画像を使って神経衰弱ゲームを作ってみよう。これは以前の記事を2023年版としてhtml,css,jsを書き直したものだ。以前はtableタグを使ってトランプを並べていたが、今回はgridを使ってトランプを配置している ...
JavaScript

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

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

JSによるゲーム制作-(PanelPazzle)

おなじみの15パズルを作成してみよう。 完成イメージ スタート画面 完成図が表示されている。このように1~15まで連続で並べられれば完成だ。 スタートボタンでスタート スタートボタンを押すとシャッフル...
JavaScript

テトリスを作ろう3

では前回の続きを作っていこう。 落下後、ボードに書き込む  落下したテトリミノをボード配列に書き込む処理を以下のように追記する。 //動きが止まったtetをボード座標に書き写す const fix...
JavaScript

テトリスを作ろう2

では前回の続きを作っていこう。 ボードの作成 テトリスは落下し終わったテトリミノは下部に積み上がっていく。この盤面に保存されているテトリミノの管理をするボードを作成しよう。以下のようにハイライト部を追記修正する。 &lt...
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 注)960pxは画面に対してセンタリングされている...
website

Webサイト制作(Flexbox)

HTML+CSSでのレイアウトが格段にやりやすくなるFlexbox、策定から長い年月が経ち主要ブラウザで安心して使えるようになってきた。 今回はこのFlexboxを実際のサイト作成を行いながら使ってみよう。 今回作成するサイトはこち...
website

Atomでスニペット(定型文登録)

AtomでHTMLをコーディングしていてダミーテキストをさっと埋め込みたいと思いAtomのスニペットを調べました。このサイトが端的にまとまっていました。 スニペット登録 実際に今回登録したsnippets.csonが以下です...
スポンサーリンク
タイトルとURLをコピーしました