CSSCSSを使って複数行の文章の最後に3点リーダーで省略表示する方法
この記事では、CSSを使って複数行の最後に3点リーダーで省略表示する方法を紹介します。以下のCSSを使用して、HTMLとCSSのサンプルコードを示します。サンプルコード<!DOCTYPE html>
<htm...
CODE
CSS
CSSCSSで写真画像に影を利用した装飾を付ける方法
本記事では、CSSを使って写真画像に影を付ける方法を解説します。以下の2つの見出しで、それぞれ異なる影の付け方を紹介します。画像の背景に影をつけるこの方法では、画像の背景に影をつけます。以下のCSSを使用します。
...
CSSCSSを使って画像のアスペクト比を統一する方法
Webページに画像を配置する際、異なるアスペクト比の画像が混在するとレイアウトが崩れたり、見た目が乱れることがあります。この記事では、CSSを使って画像のアスペクト比を統一する方法を解説します。使用するCSSまず、次のCS...
CSSCSSでよく使うプロパティをまとめました
CSSはHTMLを整形し、見た目を整えるために使われる重要なものになります。Webサイトをデザインする上では欠かせないものになるので、よく使うプロパティをまとめてみました。displaydisplayプロパティは、要素の表...
CSSCSS Flexboxを使ってレイアウトの基礎を学習しよう
FlexboxはCSSの強力なレイアウト機能で、簡単にコンテンツを配置、調整、整列できます。今回は、Flexboxの基本的な使い方を学習しましょう。Flexboxの基本的な書き方Flexboxを使うには、まず親要素にdis...
CODEPython(Selenium)を使ってWebサイトのテストを自動化する方法
ウェブサイト開発では、品質を維持するために、機能テストやブラウザテスト、レスポンシブデザインテストなどを実施することが重要です。これらのテストを手動で行うのは時間がかかり、効率的ではありません。Pythonを使ってウェブサイトのテストを自...
CODEChatGPT4にカルーセルスライダーをドン引きするほどいい感じに実装してもらう
ChatGPT4が公開されて巷で阿鼻叫喚というか歓声というか、盛り上がっていますね。私もその一人です。というわけでChatGPT4でどこまでコーディングが可能なのかということでカルーセルスライダーを実装してもらってみました。
...
CODEChatGPT4にアコーディオンメニューを作らせたらびっくりするほど頑張る
以前、公開した記事の時点ではChatGPTは3.5だったのですが、今回どうようの内容でどのくらい違いが出るのか試してみたいと思います。結論から言うと、ChatGPT4やばいね。サンプル
メニュ...
HTML初めてホームページを作る時にやるべきHTMLの学習
HTMLとは、Webページを作成するための言語の1つで、ハイパーテキストマークアップランゲージと呼ばれます。HTMLを使うことで、Webページにテキストや画像、動画などを表示させることができます。まず、HTMLでWebページを作る...
CODE【TKGP2022】小学生のためのプログラミングコンテスト「Tech Kids Grand Prix 2022」を観て感動した
小学生でプログラミングというだけでも驚くのに、そんな子たちがなんと5000人ほども参加していたとのこと。その中で各地域の予選を勝ち抜いてきた10名によるプレゼンテーションは大人顔負けの創意工夫、テンプレに則らない独自性、なによ...