• 2020年8月2日
  • 2020年8月2日
  • 0件

グラデーション編集支援ツール作成!

イラストレーターなどでももちろんグラデーションは作れますが、CSSでグラデーションの指定ができるように、そのコードを作成・編集するためのツールを作りました。 気の早い方は、実物をご覧ください(笑) 今回のブログでは、主な特徴と使い方の説明だけさせていただきます。 いずれ、作成方法の主なところなどについて、解説させていただこうかと思います。 主な特徴 ○ HSLの色相、彩度、明度、RGBの各値は、実 […]

  • 2020年7月29日
  • 2020年7月29日
  • 0件

JQueryのアニメーションを使ってみよう

JQueryにユーザーインターフェースのためのライブラリであるJQuery UIというのがあるのをご存知ですか。 ちょっとした動きをつけるときなど、JQuery UIを読み込んでおけば、とても簡単にできます。 今回は、JQuery本体についているエフェクト3つと、JQuery UIについているエフェクト14個をご紹介します。 今回は、デモページに跳ぶことなく、このプログのページ上で実演できるように […]

  • 2020年7月28日
  • 2020年7月28日
  • 0件

WEBプログラミングは無料で今すぐ独学できる !!

今回はメモ帳を使って、WEBプログラミングの基本言語であるHTMLとCSSとJavaScriptを学習する方法をお伝えします。 ローカルサーバーを立てたりとか、レンタルサーバーの契約をしたりとか、FTPファイルをインストール(かつ接続)したりとか、テキストエディタをインストールとたりとか、全て不要です。 Windowsであればメモ帳、Macであればテキストエディットだけでプログラミングをする方法で […]

  • 2020年7月27日
  • 2020年7月27日
  • 0件

CSS、hoverでアニメーション(ホバーエフェクト)

WEB画面上である要素にポインターを持ってきた時に、アニメーションが起きると、ユーザーに必要なメッセージを届けたり、快適なユーザーエクスペリエンスを実現することが可能となります。 単にカッコいいというだけでなく、メニューからサブメニューの表示、拡大などの他、正解を伏せた学習に活用するなど、使いようによっては機能的に非常に重要な役割を果たさせることもできます。 ここでは、技術的に基礎となるものや実用 […]

  • 2020年7月26日
  • 2020年7月26日
  • 0件

CSSアニメーション。ボックスのデザイン

前回のテキストのCSSアニメーションに続いて、今回はボックスのアニメーションです。 比較的基本的な11タイプのアニメーションを作ってみました。 全て基本は、一定の大きさの長方形です。 まずはデモをご覧ください。 最初にこれら全てのコードを記載します。 それぞれテーブルの枠の中に入れたので、コードが冗長ですが、それぞれのアニメーションは、上のスタイルのところと、簡単なタグのみで簡単です。 CSSアニ […]

  • 2020年7月25日
  • 2020年7月26日
  • 0件

CSSアニメーション入門 -簡単に!-

CSSアニメーションは慣れると手軽に活用できます。 まずはお手軽に、書いてしまいましょう。 このサイトでは、まず、テキストを中心に基本的な10個のアニメーションを作ってみました。 デモを見ながら、WEBサイトにどの動きを取り入れるのが良いか参考にしてみてください。 もちろん、組み合わせたりもできますので、ご自由にCSSのコードを変更してください。 ややこしい話は後で書きます(笑)。 ★ + […]

  • 2020年7月24日
  • 2020年7月24日
  • 0件

テーブルと写真のドラッグ&ドロップによる並べ替え

データや写真を並べ替えたいという時は、時々あるのではないでしょうか。 例えば、ToDoリストで、優先度の高いものを最初に移動させたいというような場合があります。 また、お客さんをスタッフに割り当てる際など、スタッフの順序を入れ替えることができれば、そのまま割り当てに用いることができます。 写真の場合も同様です。例えば、美容院のホームページに記載のヘアースタイルの順番を変えたいという時などです。 こ […]

  • 2020年7月23日
  • 2020年7月23日
  • 0件

RGBで作る色の一覧

WEBのデザインをするとき、色選びに困らないように、RGBの番号順のパレットを作りました。 CSSなどでは、「#84A」のように3桁表示でも可能であることはご存知かと思いますが、この場合は「#8844AA 」を意味します。 ここにあるよりもさらに微妙に異なる色にされたい時は、このように6桁に変えてから調整してください。 #000 #001 #002 #003 #004 #005 #006 #007 […]

  • 2020年7月21日
  • 2020年7月22日
  • 0件

CSSを使った色々なテキストのデザイン

CSSでテキストのデザインとしてどんなものができるか? 書きためていく感じで、作っていきたいと思います。text-shadowや回転関係はモダンブラウザにしか対応していませんので、ご注意ください、。 基本スタイル まずは、何もなしの基本的な文字を設定しましょう。 CSSのコードはそれぞれ、デザインされた文字の下につけておきますから、適宜参考にしてください。 文字のデザイン 右に傾けた文字 文字をイ […]

  • 2020年7月19日
  • 2020年9月19日
  • 0件

CSSを使った色々なボックスデザイン

ボックスの基本形 まずは、何もなしの単に四角いだけのボックスです。 ボックスデザイン CSS 角を少し丸めたボックス 基本の角を少しだけ丸みを持たせたボックスです。真四角より少し柔らかみが出ます。border-radiusで指定し、ここでは10pxとしました。 ボックスデザイン CSS 左右の角を完全に丸めたボックス 今度は、左右の角を完全に丸めたボックスです。border-radiusを高さの半 […]