通常ページ遷移を行うには、aタグで記述した文字列をクリックしてもらうことでページ遷移を行うと思います。JavaScriptはページ遷移もコードで表現することができます。location.hrefプロパティを使用することでそれは可能になります。location.hreflocation.hrefは関数ではなくlocationオブジェクトのプロパティです。location.hrefにURLを代入するこ……
サーバーで情報を更新しても、HTMLは静的なコンテンツなためすぐにその結果をページ上に表示することはできません。その際、ページ全体をリロードする必要があります。リロードさせるにはブラウザの更新ボタンを押してもらうことで実現しますが、できればページ上のギミックで更新できたほうがよいです。そんなときは、JavaScriptのreload関数を用いて実現します。reload関数には二つの使い方があるので……
ランダムな値を用いてWebページのコンテンツをおもしろくすることがあると思います。JavaScriptで乱数を発生させるにはMath.random()を使用します。Math.random()は０以上１未満の数をランダムに生成します。0〜99の範囲の値をとる0〜99までの中でランダムな値を取得することを考えます。Math.random()は必ず１より下の数になります。そのため100をかけることにより……
JavaScriptには他の言語と同様に条件分岐をすることができます。ここでは一般的に条件分岐として使われるif文の使い方を解説します。基本的なif文の文法if文は以下のように書くことができます。var flg = true; if(flg){ console.log("true"); } else { console.log("false"); }flgの中身によって表示される文字列が……
コードを試したい場合だったり、プログラミングの学習をしたりするときに、開発環境を整えるのが面倒なことはありませんか？今回は面倒なアカウント登録も不要で、ブラウザだけですぐにプログラミングができるWebサービスをご紹介します。 Runstant http://phi-jp.github.io/runstant/release/alpha/ 対応言語：HTML, CSS, JavaScript ……
Webデザイナーがコードを書くべきか、書かないべきか？ これはたいへん物議をかもす話題です。一人分支払額が減るため、クライアントはコードが書けるWebデザイナーを好みます（他にも理由はあると思いますが）。一方でデザイン優先で考える人はコードについて、創造性を抑制する技術的な足かせになるといいます。更に議論をややこしくするのは、私達を取り巻く情報環境は常に複雑化しているということです。しかしながら、……
グリッド状に並んでいる画像を見たとき、白の交差部分に灰色の影のようなものが現れたことはありませんか？ これは幻覚ではなく、ハーマングリッド現象が起こったときに見えるものなのです。2ピクセル超の余白をとり、画像をグリッド状に並べた時にこの現象は起こります。この灰色の影のようなものは交差部分に焦点を合わせると見えなくなります。[caption id="attachment_1576" align="a……
box-shadowプロパティを使うと、簡単にボックスに影を付けることができます。デザインの幅を広げる上で、とても重宝するプロパティなので、是非覚えておきましょう。box-shadowプロパティの使い方まず基本的な記述の仕方を見ていきます。box要素{ box-shadow: 横方向 縦方向; }この様に、box-shadow: 横方向 縦方向; を追加するだけで、簡単に影をつけられます……
text-alignというプロパティはよく使わていますが、vertical-alignを知っていますか？ text-alignがテキストを横方向の左右真ん中の位置を指定するプロパティなのに対して、vertical-alignは縦方向の位置を指定するプロパティです。 ですが、このvertical-alignにはルールがあり、このルールを守っていないとうまくデザインが適用されません。今回は、verti……
自分で１からサイトを制作するのはハードルが高いという方や、CSSの勉強をしている方にお勧めしたいテンプレート7選です。 利用の際は配布元の利用規約に従ってください。 1.無料レスポンシブHTMLテンプレートNo.021 配布ページ 無料ホームページテンプレート.com様のテンプレートです。 レスポンシブデザイン対応で、表示領域が携帯の幅になると、メニューがアコーディオンタイプに切り替わります。シ……
