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