サイト制作フェードイン
難易度:★★★★★ MAX 概要 今回は、 ① CSSのグリッドレイアウト② CSSのキーフレーム③ JavaScriptのsetTimeout()メソッド の3本立てで、汎用的な「フェードイン」の動きをご紹介...
サイト制作
サイト制作
サイト制作複合式カレンダー/後編・Dateクラスの扱い方
曜 日 年 月 Dateクラスを展開 Dateクラスは、利用している...
サイト制作複合式カレンダー/前編・クラスとオブジェクトの違い
今回はJavaScriptにおける「クラス」というものと、Dateクラスについて解説したいと思います。 クラスはオブジェクトの設計図やテンプレートとして機能し、classというキーワードで定義され、インスタンス(展開)する為に、...
サイト制作流体シェイプの解析(後編)
前回はborder-radiusプロパティについて取り扱いましたが、今回は時間経過と共に形が変化する流体図形(流体シェイプ)について解説します。 一般的にCSSのキーフレームで作りますが、今回は値を表示したいので、JavaScr...
サイト制作流体シェイプの解析(前編)
前書き CSSのborder-radiusプロパティは、かなり柔軟に値を設定出来るようになっており、1～8つの値を設定する事が出来ます。 以下、4つまたは8つの値でborder-radiusを設定する基本的な方法を書きます...
サイト制作sticky要素の扱い方
難易度：★★★☆☆ 前書きとサンプル CSSのpositionプロパティにsticky(スティッキー)という値があります。これは、absolute,fixedのような絶対配置とも相対配置とも付かないような振舞いをする為、私...
サイト制作【WordPress専用】ヘッダーの作り方(後編)
注意 前編をまだ見ていない方、HTML/CSSを導入していない方は、こちらをご覧ください。 前編 ヘッダー(完成品) Logo top News Works Gallery...
サイト制作【WordPress専用】ヘッダーの作り方(前編)
今回は、レスポンシブWebデザインを用いて、本格的なヘッダーを作りながら、CSS,JavaScriptについて解説したいと思います。 ヘッダーはホームページの根幹をなす部分で、中規模以上のホームページを作る上でも、統一性を保つ上...
サイト制作【WordPress専用】グリッドレイアウト
今回は、WordPressでグリッドレイアウトを実現する際のヒントを提供出来たら幸いだと思います。 例えば、WordPressのカラム操作では、3カラムであれば、どこまでも3カラムとなり、ロー(縦)方向の長さも、heightプロ...
サイト制作点灯パズル
もう20年も前の事になりますが、子供の頃、現在のタカラトミーが2000年に発売したライツアウト※に熱中していました。 これは、どういうゲームかと言うと、一つのマス目を押すと、そのマス目と共に、上下左右のマスのランプが消⇔点へと反...