HTML CSS

初心者必見。VScode使ってコーディング中にやってしまった失敗。よくやる失敗例も紹介。

VSCodeでコーディング中に、設定が反映されてないような おかしい現象なったことありませんか? 私は、しょっちゅうです。 今回も、やっちゃいました。 コードを書いて、修正作業してる時に関係のない 文字を打ち込んでいたみたいです。 それが原...
HTML CSS

カードレイアウト BOX型デザインでカード全体をクリック出来るようにする方法。【サンプルコードあり】 初心者がよくやる失敗しないように

BOX型(カード)デザインのコーディングで初心者がよくやる失敗 の1つで、aタグを入れてるが、BOX(カード)内でリンク先に飛ばない 部分が出来る場合がある。 BOX(カード)型デザインで、ボックス内全体をクリック可能範囲にしよと 思ったが...
HTML CSS

CSSで文字の下線の長さや位置を自由に変更可能出来る方法わかったんでやってみました。上の線もOK 【サンプルコードあり】

HTML&CSSで文字の下に線を入れ長さの変更も可能になります。通常border-bottomで指定すれば線を入れることができます。ただ線の太さや色の指定はできるが、長さの指定はこの方法では出来ません。変更方法のサンプルコードも書いてます。
HTML CSS

【サンプルコードあり】HTML/CSS で画像の境目で文字の色を変更して表示する方法。数パターン参考に書いてみました。流れる文字もあり

HTML/CSS 文字を画像などの境目で左右違う色に変更する方法。 何パターンか記事にしてみました。 今回は画像の位置がずれると、色の変更部分も ズレていく感じで出来ました。 この辺は、サンプルコードも書いときますので、 色々数値変更してや...
HTML CSS

HTML/CSSで作るカード型レイアウトの一例で、カーソルホバーしたらタイトルテキストが現れる設定。【サンプルコードあり】

HTML/CSSで作るカード型レイアウトの一例を 参考までに記事にしました。 今回は、縦型のカードでカードをホバーすると 詳細のテキストとリンクボタンが表示される設定です。 実際に作成したカードデザイン カードの周りには、box-shado...
DELL INSPIRON zino HD SSD交換

DELL INSPIRON zino HD パソコンのHDDからSSDに交換してみた。今回はHDD/SSD用変換ブラケット使用。

DELL INSPIRON zino HD パソコン 今回SSDがお得に手に入ったので、このパソコンを SSD化しようと情報収集しようとしたが、情報があんまり なかった。 今回何とか成功したんで、その方法記事にしてみました。 YouTube...
HTML CSS

3DBOX 回転する3Dボックス作ってみました。HTMLとCSSだけで、3Dアニメーション transform-style: preserve-3d;【サンプルコードあり】

YouTube動画で3Dアニメーションで簡単そうなのあったんで。見ながら作ってみました。今回はtransform-style: preserve-3d; rotateY() translateZ();を使ってる。実際にコード書いてみました。
HTML CSS

white-space : pre;これを指定すると。長い文章の場合でも折り返さずに表示できる。CSS

CSS で white-space: pre;を指定すると。長い文章の場合でも折り返さずに表示できる。通常何も指定してない場合は。要素の端で自動で折り返される。white-spaceは、要素内での文字列を制御するとこが出来るプロパティ。
WordPress

WordPressの記事の中に HTMLやCSSのコードなどを見やすく表示するプラグインUrvanov Syntax Highlighter 使ってみた。

Wordpressの記事の中に、プログラミングコードの挿入が簡単に出来るプラグイン Urvanov Syntax Highlighterがあるの知ったんで入れてみました。HTML/CSS/Javascripなど様々なタイプのコード可能。
VScode

VSCode の拡張機能 LiveServer 使ってみた 簡単にローカルサーバーの立ち上げが簡単 各ファイルの内容を変更自動で更新

VSCode 拡張機能LiveServer使うと、 簡単にローカルサーバーの立ち上げができ、 各ファイルの内容を変更したら自動で更新してくれると聞いたので。 インストールしてつかってみた。 使ってみた印象は、 HTMLはリロードしないと更新...