CSSで3Dな球体の作り方

CSS 3Dデザイン,CSS

CSSでtransform-styleのpreserve-3dを使って、3Dな球体を作成する方法を紹介しています。 See the Pen CSS | 3D Shape by yochans (@yochans) on CodePen. 3 ...

CSSで3Dなサイコロの作り方

CSS 3Dデザイン,CSS

CSSでtransform-styleのpreserve-3dを使って、3Dなサイコロを作成する方法を紹介しています。 See the Pen CSS | 3D Dice by yochans (@yochans) on CodePen. ...

CSSで3Dなピラミッド型の作り方

CSS 3Dデザイン,CSS

CSSのpreserve-3dを使って、3Dなピラミッド型を作成する方法を紹介しています。 See the Pen CSS | っっx by yochans (@yochans) on CodePen. ピラミッド型の作り方(3D) この記 ...

3Dな円柱の作り方

2021-06-12CSS 3Dデザイン,CSS

CSSのpreserve-3dを使って、3Dな円柱を作成する方法を紹介しています。 See the Pen CSS | Cylinder by yochans (@yochans) on CodePen. 円柱の作り方(3D) この記事のサ ...

CSSで立方体の作り方

2021-06-12CSS 3Dデザイン,CSS

CSSで簡単に立方体(正六面体、キューブ)を作成する方法を紹介しています。 See the Pen CSS | Rotating cube by yochans (@yochans) on CodePen. 立方体を作成する方法 CSSの「 ...

CSS、要素のアスペクト比を固定する方法

CSS,CSS デザイン

CSSでdivタグなどの要素のアスペクト比率(縦横比率)を横幅を基準に固定したレスポンシブデザインの指定方法です。 heightをvwで指定してアスペクト比を固定する方法 高さ(height)をvwでの指定は、幅(width)デバイスやブラ ...

CSSでエヴァンゲリオンの各話タイトル

CSS,CSS デザイン サンプル集

CSSだけでエヴァンゲリオンの各話タイトル風のデザイン集です。 「第壱話 使徒、襲来」「第弐話 見知らぬ、天井」「第参話 鳴らない、電話」「第六話 決戦、第3新東京市」「第拾弐話 奇跡の価値は」「第拾伍話 嘘と沈黙」「第六話 決戦、第3新東 ...

CSS 、半円で弧の部分にだけborderをつける方法

CSS,CSS デザイン

CSSで作成した半円(半月)で弧の部分にだけborderをつける方法を紹介しています。 半円(半月)で弧の部分にだけborderをつける 半円(半月)で弧の部分にだけborderがある形状が必要な場合があります。 上向き、下向き、左向き、右 ...

borderで波状の線、曲線を作成する方法

2021-06-09CSS,CSS デザイン

CSSのborderを使って、波状の線(波線)や曲線を作成する方法を紹介しています。 borderで波状(波線)の線 CSSのborderで作った波状の線です。 おそらく、このページにアクセスした殆どの方が「これじゃない」と思っていらっしゃ ...

2021-06-08CSS,CSS テキストデザイン

円形に沿ったテキストを表示する方法と、そのCSSデザインサンプルを紹介しています。 CSSだけで簡単にテキストを円状に描画する良い方法はないか、たまに気になっていましたが、ようやく思いつきましたのでメモ的な記事です。 CSSで円形に沿ったテ ...

裏返った文字を使ったCSSテキストデザインサンプル集

2021-06-09CSS テキストデザイン サンプル集,CSS

裏返ったテキスト、左右反転した文字、または上下反転した文字を使ったCSSテキストデザインサンプル集です。 テキストを反転させる テキストを反転させたテキストデザインのサンプルコードです。 See the Pen CSS | Flipped ...

CSS,CSS アニメーション サンプル集

CSSのanimationプロパティを使って、テキストや画像などの要素を横にスライドしながらフェードイン(スライドイン)、横にスライドしながらフェードアウト(スライドアウト)させるCSSアニメーションのサンプルコードです。 テキストをスライ ...

Microsoft Edge

2021-06-07Microsoft Edge 新機能,Microsoft Edge

Microsoft Edgeで新たに追加された新機能、検索窓と天気とニュースなどの情報をEdgeの状態に関わらずデスクトップに表示する「Webウィジェット」が実装されました。 プレビュービルド版では、実装後にデフォルトで有効になっておりEd ...

CSS,CSS アニメーション サンプル集

CSSのアニメーションを利用して画像やテキストなどの要素を徐々にフェードイン、フェードアウトさせるサンプルコードです。 フェードイン・フェードアウトだけでしたらtransitionプロパティでも実装可能ですが、この記事ではanimation ...

PHP

PHP,PHP 条件分岐

PHPで使える条件分岐文のひとつswitch()の基本的な使い方や、複数のcaseを指定する方法や、配列や比較演算子を使った条件分岐方法などをサンプルコードで紹介しています。 switch()の基本的なサンプルコード switch()で使わ ...

PHP

PHP,PHP MySQL

PHPからMySQLのSELECT文やUPDATE文などを使う際に利用されるORDER BYの基本的な使い方、複数のカラムを指定する方法、昇順・降順のソート、文字数が多い順または少ない順でのソート方法など紹介しています。 サンプルに利用して ...

PHP

PHP,PHP ファイル操作

PHPで特定のディレクトリ内のファイル情報から、最終更新日を取得して古いファイルを削除するサンプルコードです。 最終更新日を取得して古いファイルを削除する ファイルの最終更新日を取得するfilemtime()で得られる返り値はUNIXタイム ...

PHP

PHP,PHP 変数

PHPのextract()関数を使って連想配列のキー名を使った変数名にして変数を生成または上書きし、値を生成した変数の値を挿入する方法です。 連想配列のキー名を変数名にして値を挿入する extract()関数は配列からシンボルテーブルに変数 ...

PHP

PHP,PHP 日付・時刻

PHPのDateTime()を使って更新日になるまでの残り日数などを表示するパターンを含めて、指定した時間になったらコンテンツの内容を更新する方法を紹介しています。 ※サンプルと表示結果は2021年に作成されたものです 現在日時と指定日のD ...

PHP

PHP,PHP ループ

PHPのforeach()を使って配列やファイル情報などを繰り返す際に、インデックス番号を取得する方法の紹介しています。 配列のインデックス番号を取得する 値のみの配列の場合、以下のようにしてインデックス番号を取得する事が可能です。 $ar ...

PHP

PHP,PHP ファイル操作

PHPを使って特定のディレクトリ内にあるファイルを一括でリネームする方法を紹介しています。 ファイルを一括で連番リネームする ディレクトリ内のファイルを連番でリネームするにはforeach()、glob()を使ってディレクトリ内のファイルを ...

CSS,CSS アニメーション 基本

CSSのanimationプロパティで、ひとつの要素に対して複数の@keyframesを指定する方法を紹介しています。 ひとつの@keyframesに様々な要素を追加してもどうしても単調な動きになってしまいますが、アニメーション時間や繰り返 ...

2021-06-06CSS,CSS アニメーション サンプル集

CSSのアニメーションを利用して画像やテキストなどの要素を徐々にぼやかす、くっきりさせるサンプルコードです。 徐々にぼやかすCSSアニメーション 徐々にぼやかすCSSアニメーションのサンプルです。 See the Pen CSS | ima ...

PHP

PHP,PHP エラー

PHPで発生するエラー「Use of undefined constant(未定義定数の使用)」は、定義できない変数や定数が使われている場合に発生します。 Warning: Use of undefined constant ~ これはPH ...

Python

2021-06-08Python 開発環境,Python

PythonをWindows10にpythonをインストールする方法を紹介しています。 Pythonのダウンロード Python.orgからpythonをダウンロードします。 Download Python | Python.org アクセ ...