JQueryにユーザーインターフェースのためのライブラリであるJQuery UIというのがあるのをご存知ですか。 ちょっとした動きをつけるときなど、JQuery UIを読み込んでおけば、とても簡単にできます。 今回は、JQuery本体についているエフェクト3つと、JQuery UIについているエフェクト14個をご紹介します。 今回は、デモページに跳ぶことなく、このプログのページ上で実演できるように […]
今回はメモ帳を使って、WEBプログラミングの基本言語であるHTMLとCSSとJavaScriptを学習する方法をお伝えします。 ローカルサーバーを立てたりとか、レンタルサーバーの契約をしたりとか、FTPファイルをインストール(かつ接続)したりとか、テキストエディタをインストールとたりとか、全て不要です。 Windowsであればメモ帳、Macであればテキストエディットだけでプログラミングをする方法で […]
WEB画面上である要素にポインターを持ってきた時に、アニメーションが起きると、ユーザーに必要なメッセージを届けたり、快適なユーザーエクスペリエンスを実現することが可能となります。 単にカッコいいというだけでなく、メニューからサブメニューの表示、拡大などの他、正解を伏せた学習に活用するなど、使いようによっては機能的に非常に重要な役割を果たさせることもできます。 ここでは、技術的に基礎となるものや実用 […]
前回のテキストのCSSアニメーションに続いて、今回はボックスのアニメーションです。 比較的基本的な11タイプのアニメーションを作ってみました。 全て基本は、一定の大きさの長方形です。 まずはデモをご覧ください。 最初にこれら全てのコードを記載します。 それぞれテーブルの枠の中に入れたので、コードが冗長ですが、それぞれのアニメーションは、上のスタイルのところと、簡単なタグのみで簡単です。 CSSアニ […]
CSSアニメーションは慣れると手軽に活用できます。 まずはお手軽に、書いてしまいましょう。 このサイトでは、まず、テキストを中心に基本的な10個のアニメーションを作ってみました。 デモを見ながら、WEBサイトにどの動きを取り入れるのが良いか参考にしてみてください。 もちろん、組み合わせたりもできますので、ご自由にCSSのコードを変更してください。 ややこしい話は後で書きます（笑）。 ★ + […]
データや写真を並べ替えたいという時は、時々あるのではないでしょうか。 例えば、ToDoリストで、優先度の高いものを最初に移動させたいというような場合があります。 また、お客さんをスタッフに割り当てる際など、スタッフの順序を入れ替えることができれば、そのまま割り当てに用いることができます。 写真の場合も同様です。例えば、美容院のホームページに記載のヘアースタイルの順番を変えたいという時などです。 こ […]
WEBのデザインをするとき、色選びに困らないように、RGBの番号順のパレットを作りました。 CSSなどでは、「#84A」のように3桁表示でも可能であることはご存知かと思いますが、この場合は「#8844AA 」を意味します。 ここにあるよりもさらに微妙に異なる色にされたい時は、このように6桁に変えてから調整してください。 #000 #001 #002 #003 #004 #005 #006 #007 […]
CSSでテキストのデザインとしてどんなものができるか? 書きためていく感じで、作っていきたいと思います。text-shadowや回転関係はモダンブラウザにしか対応していませんので、ご注意ください、。 基本スタイル まずは、何もなしの基本的な文字を設定しましょう。 CSSのコードはそれぞれ、デザインされた文字の下につけておきますから、適宜参考にしてください。 文字のデザイン 右に傾けた文字 文字をイ […]
ボックスの基本形 まずは、何もなしの単に四角いだけのボックスです。 ボックスデザイン CSS 角を少し丸めたボックス 基本の角を少しだけ丸みを持たせたボックスです。真四角より少し柔らかみが出ます。border-radiusで指定し、ここでは10pxとしました。 ボックスデザイン CSS 左右の角を完全に丸めたボックス 今度は、左右の角を完全に丸めたボックスです。border-radiusを高さの半 […]
JQueryは「バニラな」(そのままの)JavaScriptに比べて、書式が簡単なので、とても使いやすいと思います。また、アニメーションなども手軽に使えるのでお勧めです。 JQueryの利用の仕方は、難しくありません。インストールなどは不要で、CDN方式を使えば、冒頭のhead内で2,3行読み込めば準備終了です。 今回はJQuery利用の上でもっとも基礎になる、要素の指定の仕方を整理してみましょう […]