Web技術・Web情報

javascript 即時関数の書き方

今回はjavascriptの即時関数を紹介します。 私は最初に即時関数を見たときはその記述方法に驚きました。 しかし、その機能はいたってシンプルで「定義後、即実行」する関数だというだけです。 だんだん見慣れてもきますので、もし即時関数を難しく感じても最…

jQueryでも高速化!メソッドチェーン/連想配列で値を設定

先日、jQueryで簡単に値を取得する方法を記載しました。その中で処理を高速化することについて少しだけ言及しました。 somegoro.hatenablog.com今回はその高速化についての記事です。 jQueryの処理はjavascriptの処理と比較して遅いと一般的に言われています…

jQueryでCSSのwidth, height を簡単に取得/設定する方法

今回は jQueryで width, height の値を簡単に取得する方法をご紹介します。 今までの取得方法 今まで私は、幅と高さを取得する際に次のように書いていました。 $(this).css("width"); $(this).css("height"); javascriptで取得する方法であるdocument.getEle…

Amazon「ほしい物リスト」ボタンを作る方法!あのボタンを自作する!

今までご紹介したHTML5/CSS3の機能を組み合わせることで綺麗なボタンを自分で作成することが出来ます。 Twitter、Facebook、Amazonなどのあらゆるボタンを自由に作れますので、今回の記事では実際に「Amazon ほしい物リスト」のボタンを作成してみます。 Ama…

HTML5/CSS3 簡単に「上下中央揃え」にする2つの方法 インライン要素、ブロック要素

HTML5/CSS3ではflexが登場して、上下中央揃えがとても楽になりました。 要点を掴めばこんな風によそ見してても簡単に出来ます。 ぜひこの記事を読んで、要点を掴んでいってください。 さてそれでは、今回の記事では次の2つの上下中央揃えパターンをご紹介し…

HTML 角を丸くする方法

角を丸くする 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 グラデーションのかけかた

HTMLでグラデーション グラデーションのかけかたをご紹介 .gradient_div { background: linear-gradient(#DBDDDE, #898C90); width: 200px; height: 200px; } <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .gradient_div { background: linear-gradient(#DBDDDE, #898C90); width</meta></head></html>…

HTML 網掛け&hover テーブルの作り方

HTML 網掛け&hover テーブル 今回は「網掛け&hover テーブル」の作り方をご紹介します。 table.shade_table { font-size:11px;/* ここでテーブルサイズが決定する */ border-collapse: collapse; background-color: white; } table.shade_table th { borde…

HTMLのみでアイコンを制御する方法。サイズ・色・動きなど

今回の記事では、HTMLのみを使ってアイコンを制御する方法をご紹介します。 以前の記事で、アイコンを表示する方法をご紹介しました。今回はその応用編で、アイコンを制御する方法です。 somegoro.hatenablog.com アイコンを制御する方法 制御したいアイコン…

テキスト領域からはみ出すときに、末尾省略符号(三点リーダー...)で残りを表示させない方法

末尾省略記号の表示のさせ方 今回の記事では、領域が足りないときに三点リーダーで表示する方法をご紹介します。 テキストが領域からはみ出すときに、「...」と表示させて残りを表示させていないWebページをよく見かけますよね。あれです。画像で見るとこん…

SQL Server 2014 サービス起動の仕方(on Windows10)

SQL Serverサービス起動の方法 Windows10 での SQL Server 2014 サービス起動の仕方をご紹介します。 今回の記事は備忘録に近いです。 手順 今回は画面(GUI)操作でサービス起動していきます。このほかの手順としてはコマンドで起動する方法もあります。 Wi…

Microsoft EdgeでInternet Explorer(IE)を開く方法

Windows10ではデフォルトブラウザとして「Microsoft Edge」が採用されています。しかし、この「Edge」にまだ対応していないWebページは結構あります。ですのでWebページを「IE」で開くことも必要になります。 「Edge」で「IE」を開く方法 今回の記事では、上…

CSSを使ってアイコンを表示させる方法。時計・家・カメラなど

今日(2016年7月4日)は大雨でしたね。久しぶりに嵐のようでした。台風が来ているようなので引き続き警戒していきましょう。 さて今回の記事では、スタイルシート(css)を使ってアイコン表示をする方法をご紹介します。 以前の記事で、HTMLのみでアイコンを…

スタイルシート(css)上で計算して値を設定する方法

スタイルシート(css)上で計算して値を設定する方法をご紹介します。 スタイルシート(css)の値を記載するところに、calc(計算式)といった具合に記載します。 例: /* 横幅を設定 */ width: calc(100% - 8px); 上記の例では計算して値を算出、算出した値を…

お問い合わせフォーム作ってみた。Googleフォームをはてなブログに適用

お問い合わせフォームを作ってみました。今回はGoogleフォームというWebサービスを使用しました。このサービスはかなり秀逸で上手くはてなブログに溶け込ませることが出来たと思います。 実物はこちら somegoro.hatenablog.com 作り方 とても簡単に作れて便…

引用ルール知ってる?引用方法を引用して説明します。

ブログを書くにあたって、引用についての法律が気になったので調べてみました。 結論として、要件を満たしていれば了解なしで引用することができます。 法律の詳細 引用に関する法律の説明をしてくれているサイトはとても多いです。ですが、難解な言葉を多用…

HTMLのみでアイコンを表示させる方法。時計・家・カメラなど

今回の記事では、次のようなアイコンを使う方法をご紹介します。 アイコンを自由に使えることが出来れば表現の幅が大きく広がることでしょう。上記アイコン以外にも沢山の種類のアイコンが使用できます。それらの方法をまとめてご紹介します。ですので、きっ…

スタイルシート(css)の「 content 」について

今回は、スタイルシート(css)の「 content 」についてご紹介します。 何に適用できるのか contentは、疑似要素の「before」「after」のみに適用することが出来ます。 何が出来るのか 「content」には文字列や画像を指定することが出来ます。疑似要素「befo…

flexbox でレスポンシブデザインを作る方法(その2)横幅が足りなくなったら複数行にする

今回は「flexboxプロパティ」を使用して、横幅が足りなくなったら複数行にするデザインを作っていきます。 まずは完成図です。 1.横幅が足りるときはこのとおり。 子2は固定幅で 300px とします。 2.そして横幅が足りなくなると、複数行で表示されます…

flexbox でレスポンシブデザインを作る方法(その1)横幅を伸ばす

レスポンシブデザインを作るにあたって、flexbox は非常に有用です。今回はその「flexboxプロパティ」を使用して横幅が可変なデザインを作っていきます。 まずは完成図です。 指定した要素を伸ばすことで可変長のデザインを実現しています。このようにすれば…

CSS擬似要素 ::before ::after の使い方

擬似要素 ::before ::after の使い方 をご紹介します。 「擬似要素 ::before ::after」は指定した要素の前後に挿入されます。 例を出して、実際に確かめてみましょう。 スタイルシート(css) p::before {content:"まぁ、";} p::after {content:"うん、たぶん…

SQL Server 2014 Express をインストールする方法(2)

SQL Serverのインストール方法まではこちらの記事で紹介しました。 somegoro.hatenablog.com SQL Serverを使うには設定が必要なので、今回の記事ではSQL Serverの設定していきましょう。 SQL Server Management Studioを起動してください。TCP/IPを有効にし…

SQL Server 2014 Express をインストールする方法(1)

SQL Server 2014 Expressのインストール方法をご紹介します。 まずはこちらからインストーラ―をダウンロードします。 Microsoft® SQL Server® 2014 Service Pack 1 (SP1) Express ダウンロードボタンを押すと、このような画面が出てきます。 どれをインスト…

はてなブログ「表テーブル」の書き方

表テーブルの作り方あるいは書き方です。 完成図 クラウド名 容量 速度 機能 無料期間 AWS - - - - GCP - - - - SoftLayer - - - - Azure - - - - HTML HTMLで作ろうと思うと次のように書きます。コピペしてみてください。 <table> <tr> <th>クラウド名</th> <th>容量</th> <th>速度</th> <th>機能</th> <th>無料</th></tr></table>…

はてなブログ「プロフィール写真」を大きくする方法!各段に見やすい

はてなブログの「プロフィール写真」。これ小さくて感じません? この記事では簡単に「プロフィール写真」を大きく表示する方法をご紹介します。(※表示速度の確認のため現在表示させていません。2016.06.01~) 簡単に「プロフィール写真」を大きくするため…

自動で画像をリサイズ!投稿画像をレスポンシブデザインにする方法!

はてなブログに画像を投稿すると、その画像は「アダプティブデザイン」となりますよね。アダプティブデザインとは静的デザインのことです。いわゆるレスポンシブでないということですね。ブラウザを縮めると画像がはみ出てしまいます。 せっかくはてなブログ…

はてなブログ「読者になる」ボタンを作る方法!シンプルで軽くする!

はてなブログでは「読者になる」ボタンがありますね。機能としては非常に便利ですが、ボタンとしては小さくて押しにくくないでしょうか。しかも、これは読者数を読み込んでいるからかと思いますが重いですよね。サイトが「重い」ことの影響は次の記事で書き…

【基本編】あなたはjavascriptを使えますか?実際に書いて覚えよう!

javascriptに対してどのようなイメージを持っているでしょうか。 気軽に使える。なんでも出来る。邪魔者だからブラウザで使用できないようにしている。などなど、の意見が多いようです。(個人的感想が多分に含まれています!) 確かにプログラマでなくとも…

ランサムウェアに気を付けよう!!感染経路・予防・駆除・対策の方法

ランサムウェア(ransomware)とは、マルウェア(悪意のあるソフトウェア)の一つです。この「ランサムウェア」に犯されるとパソコンはどうなってしまうのか。 手口 勝手にロック状態になってしまいます。またはデータが暗号化されます。要は、パソコンの持…

あなたのサイトは重い!HTMLのファイル読み込み時間を確認する方法

先日の記事でHTMLファイルではjsファイルを読み込むことが出来ると記載しました。 読むこむと重くなるんじゃないの?と疑問に思われた方もいるかもしれません。今回はその読み込む速度はどんなものなのかということを確認していきます。 この確認方法を身に…

あなたはHTTP通信の説明が出来ますか?同期・非同期の仕組みを解説!

ブラウザとサーバの非同期通信って何? この疑問はAjaxについて調べていて派生したものだ。転職面接でHTTP通信が得意と話しておきながら仕組みについての理解があやふやになっていたのだ。詳細は先日の日記を見ていただきたい。 そこで、この記事ではHTTP通…

今さらAjaxを解説!私は転職面接で聞かれて回答できませんでした。

インターネット関係の業務を主とする企業の転職面接で「得意な領域はどこですか?」と聞かれました。私は「HTTP通信の部分が得意です。」と答えました。 しかし、続く「Ajaxとかやったことあるの?」という質問には「よく聞きますが、やったことはありません…

電話した?【警告】あなたのコンピュータでウイルスが見つかりました

コンピュータウィルスにやられた話。というか、詐欺にやられに行った話です。実情を確かめてきました。みなさんは、もし同じような症状になってもサポートとかには電話しなくて大丈夫です。 なので、みなさん引っかからないようにお気を付けください。 さて…

【カスタマイズ】はてなブログのトップページを一覧にしてみました。

直帰率80%越えてるので、トップページを調整してみました。(20160517実施) バキバキっと調整です。 今まではトップページに記事1つだけ載せていました。トップページを見ると常に最新の1記事が表示されます。しかし、そのページからの離脱が多かったの…

Windowsディスプレイ解像度の確認・変更方法!コマンドで簡単操作

「レスポンシブデザイン」のはてなブログを自作するための第一歩として、ディスプレイの解像度を調べる必要があります。 ご自分のパソコンあるいはスマートフォンの解像度はいくつでしょうか。 今回はWindowsPCディスプレイの解像度を調べる方法をご紹介しま…

Google Search Consoleで出来ること。最初にやるべき3つのこと。

「Google Search Console」って使ってますか? 私は使っています。しかし登録だけしてほとんど何もしていませんでした。何が出来るのか少々気になっていて、つい先ほど出来ることを調べてみましたのでご紹介します。 「Google Search Console」で出来ること…

パソコンで「スマートフォン画面」を見る方法。簡単スマホアプリ開発

今回はパソコンで「スマートフォン画面」を模擬的に表示させる方法についてご紹介します。 使用するブラウザは「クローム」です。模擬的に表示できるスマートフォンの種類については、ブラウザのバージョンによって様々でしょうが、2016.05.16現在の最新版ク…

ブログタイトルをチェンジ。同タイトルの猛者たちに勝てる気がしない

「Technical Journal」から「立川ジャーナル」にブログタイトルを変更しました。 なぜかというと、理由は3つあります。 1.英語で読みにくい。 Technicalって普段使わない単語ですよね、テクニカルって読むんです。 2.「Technical」の部分をいつも「Tach…

「茜さや」ネットでよく見る可愛らしいお方。イベント・撮影会情報も

最近ネットでよく見かける、この画像。とても可愛らしい方ですね。 おもわずクリックしてみたくなってしまうことでしょう。 あまりにも色々なところで見かけるものでしたので、著作権は大丈夫なのだろうか。きちんとこの「可愛らしい女性」に適切な給料が支…

あ、パスワード忘れた。ブラウザ登録(保存)したpasswordを見る方法

どのようなパスワードを設定したか、忘れてしまっている方は多いのではないでしょうか。 パスワードをブラウザに記憶させていていると、普段は自動でログインするのために自分でパスワードを入力する機会が少なくなってくるでしょう。 こういった状況で、ふ…

【はてなブログ】簡単・正確に、サイドバーのサイズを変更する方法

今回はサイドバーのサイズを変更する方法をご紹介します。 この方法ではブラウザの「デベロッパーツール」を使用します。私はこの方法で簡単かつ正確にサイドバーを広げました。 はてなブログを始めたばかりということもありますが毎日のように気になる箇所…

【Googleアナリティクス】自分のアクセスを除外する3つの方法!

ブログを始めたばかりのころは、自分のアクセスが多くなってアクセス解析しづらいかと思います。そんなとき自分のアクセスだけ除外したいですよね。と、いうわけで自分のアクセスを除外する方法を3つ紹介します。 3つの方法 ・Googleアナリティクスフィル…