サイト制作

はじめまして。圧縮おにぎりです。普段はデータ入力と、たまにホームページのパーツ作成と称としてHTMLやCSSをいじったり、画像をいじったりしています。今回はWEB用の背景素材の色の組み合わせで色々試したことについて簡単に書いていきたいと思い...

デモンストレーションデモページへJavaScriptでは、あらかじめ0～21番が割り当てられたカードをシャッフルし、山札として用意します。カードのシャッフルにはフィッシャー–イェーツ方式というアレゴリズムを用います。フィッシャー–イェーツ方...

前書きご無沙汰しております。昨年11月30日、横手駅前の交流センターにて、素材画像を除いて自前で作ったシューティングゲームを公開させて頂いてから、長い冬を終えて、遠い時を過ごしたような気がします。2024年度の第4四半期を通しで、2024年...

難易度:★★★★★ MAX概要今回は、① CSSのグリッドレイアウト② CSSのキーフレーム③ JavaScriptのsetTimeout()メソッドの3本立てで、汎用的な「フェードイン」の動きをご紹介したいと思います。今回は、見易いように...

曜 日 年 月 Dateクラスを展開Dateクラスは、利用しているデバイスから日時を取得するクラスで、以下のようなメソッドがあります。getFullYear():年を取得します。getMonth():月を取得します(0が1月、1が2月、.....

今回はJavaScriptにおける「クラス」というものと、Dateクラスについて解説したいと思います。クラスはオブジェクトの設計図やテンプレートとして機能し、classというキーワードで定義され、インスタンス(展開)する為に、newというキ...

前回はborder-radiusプロパティについて取り扱いましたが、今回は時間経過と共に形が変化する流体図形(流体シェイプ)について解説します。一般的にCSSのキーフレームで作りますが、今回は値を表示したいので、JavaScriptを用いて...

前書きCSSのborder-radiusプロパティは、かなり柔軟に値を設定出来るようになっており、1～8つの値を設定する事が出来ます。以下、4つまたは8つの値でborder-radiusを設定する基本的な方法を書きます。4つの値を設定する場...

難易度：★★★☆☆前書きとサンプルCSSのpositionプロパティにsticky(スティッキー)という値があります。これは、absolute,fixedのような絶対配置とも相対配置とも付かないような振舞いをする為、私も含め、最初から苦手意...

注意前編をまだ見ていない方、HTML/CSSを導入していない方は、こちらをご覧ください。前編ヘッダー(完成品)LogotopNewsWorksGalleryAboutContactMenuNewsWorksGalleryAboutConta...