CodingHaku|プログラミング学習・開発Tips・技術情報

HTML、CSS、Javascript、PHPなどサイト制作についてのお役立ち記事を配信していきます。

2023-02-01から1ヶ月間の記事一覧

クリックで拡大する画像の実装方法

画像を大きくして表示したい時、画像をクリックしたら、大きな画像が表示されるシーンがよくあると思います。 javascriptを使わない方法 まず、一番簡単なやり方を紹介します。 <a href="image.jpg" target="_blank"><img src="image.jpg" width="200px"></a> 画像の横幅を200pxと指定することで、ページ上では、画像が小さく表示されます…

placeholder属性

placeholder属性 placeholder属性は、HTMLのフォーム要素でよく使われる属性の1つです。 inputやtextareaに設定され、ユーザーが何を入力するべきかを示す簡単なテキストメッセージが表示されます。言い換えれば、薄い文字を表示することができます。 例えば…

絶対パスと相対パス

HTMLやCSSなどのウェブページを作成する際に、ファイルの場所を指定する方法には、絶対パスと相対パスの2つがあります。 絶対パスと相対パスとは? パスとは「Path」、「経路」という意味です。 絶対パスは、ウェブサイトのルートから直接ファイルにアクセス…

buttonタグとaタグの使い分け

HTMLにおいて、buttonタグとaタグは両方ともユーザーがクリックできる要素ですが、使い分けには適切な場面があります。本文では、buttonタグとaタグの使い分けについて解説します。 buttonタグの使い方 buttonタグは、フォームを送信するためのボタンを作成…

CSSでbuttonタグを装飾する方法

HTMLでボタンを作る方法は概ね三つがあります。buttonタグ、aタグ、inputタグです。この記事では、CSSを使用してbuttonタグを綺麗にする方法を紹介します。 buttonタグとは <button>ボタンです。</button> ボタンです。 ボタンの見た目にはブラウザごとのデフォルトのスタイル…

CSS一行だけでサイトを白黒にする

結論 filter: grayscale(1) ページ全体に設定を適用したい場合はhtmlタグの中に書きます。 <style> html { filter: grayscale(1); } </style> 解説 CSSのfilterフィルタープロパティを使うと、画像にフィルターをかけることができます。 grayscaleグレースケールは画像をモ…