コーディングWEBサイトで「乗算」を再現。CSSだけでできます。
画像編集で使う「乗算」の合成をCSSで再現する方法を紹介します。Webページ上で色や画像を重ねたときの見え方をサンプルで確認できます。
タグ: HTML
コーディング
コーディングスクリーンセーバーみたいな回転する文字を作ってみた
スクリーンセーバーのように文字が回転する表現を作ったサンプルを紹介します。動きを作るソースコードと、その仕組みを解説します。
コーディング【初心者でもわかる】セレクトボックスの選択で、リンク先を変更する方法
セレクトボックスの選択に応じてリンク先を変える方法を紹介します。ボタンを押して移動する形式と、選択時に移動する形式をコードで解説します。
テクニック【初心者でもわかる】タップしたら電話がかけられるようにする方法（レスポンシブ対応）
電話番号をタップして発信できるリンクの作り方を紹介します。スマホだけで有効にするレスポンシブ対応と、国際電話の指定例も解説します。
コーディング【初心者向け】ボタンホバー時に透過しても背景が見えないようにする方法
ボタンをhover時に半透明にしても、背後の画像などが透けないようにする方法を紹介します。HTMLとCSSのサンプルを使って仕組みを解説します。
コーディング【初心者向け】画像hover時に背景が透けてしまう問題の解決法2選
画像のhover時に背景が透けてしまう問題への対処法を2つ紹介します。白い背景を加える方法と、背景画像を切り替える方法を解説します。
コーディング【初心者でもわかる】疑似要素を使って、文章の最初や最後に文字や記号を入れる方法（New とか おすすめ！とか）
CSSの疑似要素で文章の前後に文字や記号を加える方法を紹介します。「New」や「おすすめ」などの装飾を付けるサンプルを解説します。
コーディング【初心者向け】タブ等で内容を出し分けるメニューの作り方
タブをクリックして表示内容を切り替えるメニューの作り方を紹介します。タブとコンテンツの対応付け、選択状態の切り替えをコードで解説します。
コーディング【初心者でもわかる】スクロールしたら下からふわっと出てくるコンテンツの作り方
スクロールするとコンテンツが下からふわっと現れる表現を紹介します。表示位置に合わせて動きを付けるサンプルと、その仕組みを解説します。
コーディング【初心者でもわかる】webサイトのショートカットアイコン（スマホ用アイコン）の設定方法（iPhone側のショートカットの作り方も！）
スマホのホーム画面に使うWebサイトのアイコンを設定する方法を紹介します。画像とHTMLの準備に加え、iPhoneのSafariから追加する操作も解説します。