テクノロジー
AWSについて調べた 公開したいWebサービスを作ったので、AWSでサーバを借りようかと思っています。憧れのクラウドデビューです。（実際には２年くらい前にテスト環境を作ったことがありますが、どんな感じだったかすっかり忘れてしまっています） そのため、…
データベースとプログラムを繋ぐ仕組みの解説 今回の記事ではデータベースとプログラムを繋ぐ仕組みを解説します。まずは、さらっと前回までのおさらいをしましょう。 データベースとは 初回の記事では基本的な知識である次の２点について学びました。 ・デ…
クラウドの利用形態 AWS、Azureという言葉を聞くようになって久しいですね。今更ながらクラウドの利用形態について調べてみました。クラウドの利用形態は次の３つに大別されます。それぞれ詳しくみていきます。 ・IaaS ・PaaS ・SaaS 「IaaS」イァース Infra…
W3Cドキュメント検証サイト 私は驚きました。なんて便利なんだ、と。W3Cのドキュメント検証サイトが便利で感動したので紹介します。 validator.w3.org このサービスでは、URLを入力するだけでそのWebサイトがW3Cの標準規格に沿ってコーディングされているか…
シークレットウィンドウとしてブラウザを開く方法 Google Chromeをシークレットウィンドウとして開く方法をご紹介します。 シークレットウィンドウとしてGoogle Chromeを開くと、次の情報がChromeに記憶（保存）されません。 ・閲覧内容 ・Cookie ・サイトの…
本記事を書いた頃よりだいぶTomcatへの理解が深まりましたので、本記事の内容を書き直しました。最新版記事 Tomcat9のインストール方法 on Windows10 Tomcatのインストール方法 Tomcatをインストールしてブラウザに「Hello World !」と表示させます。 ダウン…
今回の記事では可愛い系サイトに合いそうなローディングサンプルのご紹介です。前回のローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。 somegoro.hatenablog.com 画像やjavascriptは使用していませんので、とっても簡単にアプリに…
何にでも合いそうなローディングサンプルです。前回のローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。 somegoro.hatenablog.com 画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。 @chars…
Windows10っぽいサンプルです。HTML5 / CSS3 のみで作成しています。画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。 @charset "utf-8";.load-container {width: 200px;height: 200px;background: rgba(33, 150, 2…
Javaで画面遷移する方法 Javaで画面遷移するにはどのようにすればいいのか。 基本的な方法は次の２つ。 １．リダイレクト（Redirect） ２．フォワード（Forward） １．リダイレクト サーバ移転などの時や別システムにするときに使用する。 指定されたURLに処…
先日の記事で吹き出しをHTML5/CSS3を作りました。 somegoro.hatenablog.com 今回はそれを応用して、矢印を２パターン作ってみます。 下向き矢印 下向き矢印はこんな感じになります。 ソースコードです。 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .formBalloon { padding-bott</meta></head></html>…
「飛び越え線」の書き方 線が交差したときに見やすくする「飛び越え線」の書き方をご紹介します。 設計書を書くときなどは何かと線が多くなりますよね。Microsoft製品のVisioなら「飛び越え線」があるのですがExcelはありません。 ですので、簡単に作成する…
ギザギザの吹き出し 前回の記事で、HTML5/CSS3 だけで吹き出しを作る方法をご紹介しました。 somegoro.hatenablog.com しかし、公開した後になってだんだんと気になってきてしまったのです。ここのギザギザが。。。 これは線（border）を重ねて三角に見せて…
今回の記事では、HTML5/CSS3 だけで「吹き出し」を作る方法をご紹介します。 記事下にあるソースコードをコピー＆ペーストすると、このような「吹き出し」が出来ます。画像を使うよりも軽量かつサイズ操作が簡単なのでおススメです。 .formBalloon{padding-b…
直下の要素のみスタイル指定する方法 たまに使いどころが出てくる「直下の要素のみスタイル指定」したいケースへの対応です。 「idがparentの要素」の直下である「div要素」のみ背景色をつけています。 #parent > div { background-color:#4CAF50; } #hatena…
今回の記事では「記号の読み方」をご紹介します。日常にあふれている記号ですが、意外と読めないものも多いですよね。 システム開発の現場でも記号はよく使用します。自分で使ってる分には読めなくとも問題ないのですが、人に伝えるとき「あれ、くにゃっとし…
HTML5.1からpictureという要素が使用可能になりました。今まで知らなかったのですが、これがなかなか便利らしいというので調べてまとめてみることにします。 ブラウザの対応状況 さて、HTML5.1から使用可能とのことでしたがブラウザの対応状況はどのような状…
今回はjavascriptの即時関数を紹介します。 私は最初に即時関数を見たときはその記述方法に驚きました。 しかし、その機能はいたってシンプルで「定義後、即実行」する関数だというだけです。 だんだん見慣れてもきますので、もし即時関数を難しく感じても最…
今回は javascript / jQuery の読み込まれる仕組みを解説します。 window.onload / ready / $(function(){}) など 色々なイベント処理があります。みなさんはフロントエンドの基本であるこれらをきちんと理解しているでしょうか。これらの理解があるかどうか…
こんにちは。今回は「Windows10 サービスの起動の仕方」をご紹介します。 Windows10が発売されてから久しいですが、コントロールパネルの配置などユーザーインターフェースに色々と変更がありましたのでお困りの方も多いかと思います。 私自身もサービスを起…
先日、jQueryで簡単に値を取得する方法を記載しました。その中で処理を高速化することについて少しだけ言及しました。 somegoro.hatenablog.com今回はその高速化についての記事です。 jQueryの処理はjavascriptの処理と比較して遅いと一般的に言われています…
今回は jQueryで width, height の値を簡単に取得する方法をご紹介します。 今までの取得方法 今まで私は、幅と高さを取得する際に次のように書いていました。 $(this).css("width"); $(this).css("height"); javascriptで取得する方法であるdocument.getEle…
今までご紹介したHTML5/CSS3の機能を組み合わせることで綺麗なボタンを自分で作成することが出来ます。 Twitter、Facebook、Amazonなどのあらゆるボタンを自由に作れますので、今回の記事では実際に「Amazon ほしい物リスト」のボタンを作成してみます。 Ama…
HTML5/CSS3ではflexが登場して、上下中央揃えがとても楽になりました。 要点を掴めばこんな風によそ見してても簡単に出来ます。 ぜひこの記事を読んで、要点を掴んでいってください。 さてそれでは、今回の記事では次の２つの上下中央揃えパターンをご紹介し…
角を丸くする HTMLで角を丸くする方法のご紹介です。 .radius_div{ border: 1px solid black; border-radius: 6px; width: 100px; height: 40px; } <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .radius_div{ border: 1px solid black; border-radius: 4px; width: 100px; height</meta></head></html>…
HTML 網掛け＆hover テーブル 今回は「網掛け＆hover テーブル」の作り方をご紹介します。 table.shade_table { font-size:11px;/* ここでテーブルサイズが決定する */ border-collapse: collapse; background-color: white; } table.shade_table th { borde…
リンクを押せる範囲を拡大する方法 divで範囲を決めて、aはいっぱいに広げる。 .link_wrapper{ border:solid 1px black; height:50px; position:relative; width:200px; } .link_wrapper a{ height:100%; position:absolute; width:100%; } .link_wrapper a:…
今回はHTML5/CSS3で、シンプルなテーブルの作り方をご紹介します。 久しぶりにWebページを作るときに忘れがちですよね。 また、プログラム経験が浅い方はテーブル作りに手間取ることもあるでしょう。 今回の記事ではそんなテーブルを出来るだけシンプルな形…
久しぶりの更新になってしまいました。 久しぶりすぎて90日以上更新のないブログに出てしまう広告が出てしまっている。。。 最近は資格の勉強にプラスして「仕事」と「筋トレ」に力を入れていました。 仕事について お仕事では無事に転職することが出来まし…
今回の記事では、HTMLのみを使ってアイコンを制御する方法をご紹介します。 以前の記事で、アイコンを表示する方法をご紹介しました。今回はその応用編で、アイコンを制御する方法です。 somegoro.hatenablog.com アイコンを制御する方法 制御したいアイコン…
