チュンチュン

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

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

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

今回は、レスポンシブWebデザインを用いて、本格的なヘッダーを作りながら、CSS,JavaScriptについて解説したいと思います。ヘッダーはホームページの根幹をなす部分で、中規模以上のホームページを作る上でも、統一性を保つ上で、大半が決ま...

今回は、WordPressでグリッドレイアウトを実現する際のヒントを提供出来たら幸いだと思います。例えば、WordPressのカラム操作では、3カラムであれば、どこまでも3カラムとなり、ロー(縦)方向の長さも、heightプロパティの基本操...

もう20年も前の事になりますが、子供の頃、現在のタカラトミーが2000年に発売したライツアウト※に熱中していました。これは、どういうゲームかと言うと、一つのマス目を押すと、そのマス目と共に、上下左右のマスのランプが消⇔点へと反転するものです...

難易度：★★★☆☆試作およそ93px:743px:93px(画面幅1023pxで) タイトル テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキス...

難易度：★★☆☆☆この頃は、汎用的なウェブデザイン/レイアウトの知識や知見を広げる方向で、仕事に取り組ませて頂いております。今回は疑似要素とz-index,opacityプロパティを変更する事で、従来では2カラム仕切る所を、仕切らずに奥行き...

難易度：★★☆☆☆四方にpaddingを設定した場合今回は、私の苦手な疑似要素を用いて、親要素にpaddingがあり、子要素がposition: absolute;配置である場合、配置の基準位置はpaddingの外側になるか、内側になるか試...

前回の記事(4月15日)で取り上げたものを発展させ、ドラッグアンドドロップで、ジグソーパズルを作りたかったのですが、座標の位置関係などの問題から、今後の課題です。今回は、位置を入れ替えるプログラムと、ピース一つ一つの座標を、配列化した定数配...