今回は以下のように遷移するお問い合わせフォームを作成してみようと思います。 1. 確認ボタンを押したら、フォームに入力されている値のチェックを行う 2. 値のチェックが全てOKであればポップアップで確認画面を表示する 3. 送信ボタンを押したらメールを送信する 4. 送信完了したら送信完了の旨をポップアップ画面に表示し、OKボタンを押したらポップアップ画面を閉じる #ポップアップはブロックされる可能性がありますが気にしない。。。。 #気が向いたときにポップアップを使わずhtmlで確認画面を作成する方法を書きたいと思います。 その1ではフォームに入力された値のチェックを行い、エラーとして問い合わせフォームに表示する部分を説明します。 html <h2>お問い合わせフォーム</h2> <form class="form1" action="confirm.php" method="post"

2017年4月から人生初めての新人研修講師を務めさせて頂くことになりました。プログラミング入門がテーマです。 先方は昨年までJavaでカリキュラムを組んでいたんですが、JavaをやめてPythonでやらせてもらえないかと提案し快諾頂きました。プログラミングの入門書を書いたから特に感じることなんですけど、Javaはプログラミングの初学者に向いていない言語だと思います。 クラスありきの言語設計 それがJavaの良いところでもあると思いますが、プログラミング自体が初めての方を対象に考えた場合、はじめの一歩として不適切だと感じます。 Hello Worldが重たすぎる お馴染みのHello Worldです。初めてのプログラミングで以下のコードを見たら、何のことやら分からないでしょう。 public class Test { public static void main(String[] args

Strategic Visioning with the World Bank Reflecting on Tokyo Development Learning Center’s past, present, and futureStrategic Visioning with the World Bank Reflecting on Tokyo Development Learning Center’s past, present, and future What does it mean to coexist with our ecosystem? Conducting fieldwork in MorinomiyaWhat does it mean to coexist with our ecosystem? Conducting fieldwork in Morinomiya Th

最近HTML/CSS/JavaScriptなどを初学者の方向けに教える機会がすごく増えきました。初学者の方ができるだけ詰まらずに、効率的に学習するための手順をいろいろな方と相談しながら、書きなおしています。 (11-09 12:45) Progate, atomを追加 導入編🐠 Webサイトを作ることは楽しい！ プログラミング経験ゼロだが180日で180個のウェブサイトを作るプロジェクトがゴールまであとわずかに プログラミング経験0のデザイナーさんが、毎日1つサイトを作っていったお話です。最初はテキストとリンクが並ぶだけのサイトでしたが、少しずつゲームやチャットなどが作れるようになっていきます。 今知っている知識だけで、作れるWebサイトを作っていく。そして、自分の知っている2つの知識を組み合わせたり、1つやりたいコトのためのパーツをGoogleに教えてもらうくらいが、挫折せずに続けられ

jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri

体型を支える技術 ──35歳になっても現役で戦い続けるプログラマの体づくり 現役開発者を悩ませる、プログラマ35歳定年説。体力が落ち、記憶力が衰え、一人の時間もなくなる。そんな限界にチャレンジし続けるエンジニアの熱き戦いと、体型に迫った渾身レポート。 はじめまして、白山文彦（しろやま・ふみひこ）といいます。プログラマです。 今年34歳になります。そうなるとタイムリミットまであと1年になってしまいます。 なにがって？ ……そう、「プログラマ35歳定年説」です。 プログラマ35歳定年説は本当なのか？ 体力が落ち、記憶力が衰え、一人の時間もなくなる…… あなたも35歳定年予備軍？ 無茶な減量とリバウンドから得た教訓 1回目は体重を落とすもリバウンド 現実的な目標の設定と維持 食事：楽しく美味しいダイエットメニューを取り入れる （1）シリコンスチーマー温野菜 （2）きのこたっぷり野菜鍋 （3）鶏ハ

最近ネット界隈で流行中の「基礎文法最速マスター」シリーズ。 Parlから始まったこのシリーズですが、いまやPHPやRubyをはじめ、JavaScriptからVBA、果てはjQueryに至るまで、かなりの数の言語が「基礎文法最速マスター」シリーズ化されています。 そこでワタクシもどーにか便乗してやろーと画策しまして、得意分野のCSSについてまとめてみたいと思います。 まぁCSSはプログラム言語とは呼びませんが、プログラマさんなんかは結構苦手意識のある方も多いようなので、ちょっとでも参考になればと思いますー。 CSSの基礎 CSSとは 一言で言えば、(X)HTMLでマークアップされたページの見栄えをコントロールするためのものです。 CSSを使う事で、(X)HTML側ではページの内容や構造だけの記述に留める事が出来るので、検索エンジンにも優しく、デザインの変更も容易になる（と言われてますが、実際

プログラミング経験のないジェニファー・デウォルトさんが、毎日1つずつウェブサイトを作成し、180日間で180個のウェブサイトを作り続けるプロジェクトが「180 websites in 180 days」です。 Jennifer Dewalt | 180 Websites http://jenniferdewalt.com/ デウォルトさんの作品は9月11日の時点で163日目、作成された163個のウェブサイトのプログラムは全てGitHubで公開されており、どのようなコードでプログラミングされているかが確認できます。現在はNode.jsについて勉強中とのことですが、近日中に勉強の成果を発表できると述べています。 ◆Day 2：Make a Deal（ドアを開けていくと当りと外れがあり、最後にネコの動画を表示） ◆Day 18：Building Blocks（ブロックをカーソルで持ち上げて積み木

1. はじめに 1-1. 技術の概要 エンジニアの技術は、かなりざっくり言うと、 フロントエンド　→　見える部分。 （例）HTML、CSS、JavaScriptなど サーバサイド　→　アプリケーションを動かす中身の部分。 （例）Java、PHP、Ruby、C、C++、Perlなど インフラ　→　Webアプリケーションを動かすための環境構築など。 （例）Webサーバ構築、DBサーバ構築、DNSサーバ構築など の3つに類別できる。 その中で、プログラミング未経験者が最も手をつけやすいのが、フロント（HTML、CSS、JavaScript）の技術である。 ※　上記は、「Webアプリケーション開発」のお話です。 ※　「ネイティブ開発」ではObjective-C/Swift/AndroidJava/Cocos2d-x/Unityなどがよく使われる。 1-2. フロントの概要 フロントの技術を学ぶため

【第2弾】少しのコードで実装可能な20のCSS小技集はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ 少しのコードで実装可能な 20 の CSS 小技集 目次画像を丸く表示1 本線のテーブル1 本線の水平線線色を指定しなくても文字色と同一色になる複数の背景画像背景画像のサイズWeb フォントを使う画像をモノクロやセピアにするリストマーカーの色を変更グラデーショングラデーションボーダーフラットだけど立体的ボタン画像をぼかすレスポンシブに対応した動画要素を真ん中に配置カンマで分けたリスト文字を縦書きフォーカスすると伸びるテキストボックスiOS でボタンのスタイルをリセット線のオフセット設定HTML・CSS の全

これからのCSSレイアウトはFlexboxで決まり！FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ 対応ブラウザーCan I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari 用に -webkit- のベンダープレフィックスが必要です。IE については 11 から正式に対応。IE10 にも対応していますが、書き方が少し変わって