どうも！LSSです！！ チェックボックスとラベルの話【HTML編】 の続き。 チェックボックスとラベルを紐づけたところで、それに対してCSSから効果を与える方法について書きます。 CSSセレクタについての話が中心になります。 こっちあっち この仕組みを使うと、クリックで切り替わり↑のような動作をするものが作れたりします。 idによる指定の場合 idを使わないで更にラベルが２つある場合の指定 チェックボックスを画面上で見せなくてもいい場合 まとめ idによる指定の場合 ↓このように、チェックボックスと、それに紐づいたラベルがあります。 ここをクリック コード <input id="chkbx2" type="checkbox" /> <label for="chkbx2">ここをクリック</label> この「チェックボックスにチェックが入った時」に、ラベルの文字の背景色がピンク色に変わるよ

どうも！LSSです！！ 以前に、 【CSS】本をめくる、という動作をCSSで表現してみました。 というものを作っていました。 そしてその後、【CSS】本をめくる、のページ追加方法についてにて、ページの追加方法について解説しましたが…これが不親切極まりない！^^; コード中、複数個所に追記が必要で、しかもCSSのスタイル指定部分まで手を加えないといけない。 理想としては、CSSの指定部分はそのままで、HTML部分の追記のみで解決したいところです。 その後、色々試行錯誤していましたが、だいぶ楽にページ追加可能なものができました^^ ついでに、本のサイズも「縦横比を保ったまま、スマホ画面でもPC画面でも幅めいっぱい表示」するようにしています。 本のページをめくるCSS コード ページ追加について 本自体の設定 本のサイズ ページをめくる速度 本の見ため あとがき 本のページをめくるCSS あいう

どうも！LSSです！！ 今回は、【CSS+SVG】インラインSVGを背景画像に指定に続き、画像ファイル不要で使える背景模様を考えてみました！ ちょっと変テコな模様 改変について CSSだけでも出来たかも？ですが ちょっと変テコな模様 ちょっと変テコな模様を作ってみました。 CSS＋SVGで描いているので画像ファイルのアップロード不要です^^ ちなみに、アルファベット小文字の a をモチーフにしています。 この調子で作っていくと２６種類の背景画像ネタを作れる事に！？ｗ コード <style><!-- .bga{ padding:0.6em; background-color:#ffddff; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" heig

「色やサイズを調節して作るボックスのコードをお持ち帰りできるツール」 を作ってみました。 ↓このタブの中で色々設定を変更すると、その更に下にあるサンプルとコードの内容が変化します。 気に入ったボックスが出来たら、コードをコピペして使用できます。 まずは色々遊んでみてください^^ 色設定サイズ光関連 ボックスの色 枠の色 文字の色 光の色 ボックス幅 ボックス高さ 枠幅 角の丸み 光の強さ 光の大きさ 光の位置（右） 光の位置（下） コード はてなブログの場合は「コード」の中に書かれたものをコピーして、「HTML編集」画面に貼り付ける事で使用できます。 中の文章（これはテスト文章です～という部分）は自由に書き換えできます。

どうも！LSSです！！ 今回はHTMLのフォームパーツで、今まで使った事がなかった「スライダー」を使ってみます。 こんなのです 呼び名はたくさんありますね フォームパーツなもので 横幅を広くする CSSでこのスライダーの値を利用したかった…けど無理っぽい^^; JavaScriptなら余裕！ というわけで「スライダー」の紹介でした こんなのです コード <input type="range" /> 最低限のコードでいうとこうなります。 めっちゃシンプルですねｗ 呼び名はたくさんありますね Androidにも、このコントロールはありました！ かなーり懐かしい記事ですが、Androidアプリ開発では「SeekBar」という名前がついていましたね。 HTMLタグ上では「range(レンジ)」という名前になっています。 Excelのセル範囲みたいな名前ですねｗ（VBA触ってる人にしか分からない話）

どうも！LSSです！！ なんとなく…ハンバーガーメニューについて考えているうちに、 「丸から四角に変形」 を思いついたので、試してみました。 うまく出来たので、そのままサンプルとして晒してみます^^ ちょっとした注釈？なんかに使えるかもですね。 丸から四角に変形するボックス コード 解説 あとがき 丸から四角に変形するボックス 右にある、ピンク色の丸にマウスカーソルをあわせてみてください^^ （スマホの方はタップ） ここに適当に文章を書きます。 brタグによる改行もできます。 この部分の文章は好きに変更できます！ コード <style><!-- .hamb{ position:absolute; z-index:1; top:0px;right:0px; overflow:hidden; padding:5px; background-color: pink; border-radius:

どうも！LSSです！！ ちょっと前に、 こんな記事を書いていましたが、結局のところ「これでいいや」 ってとこに落ち着いたので、それを書いてみます。 デザインCSSと定型文 要するに、見出し１個分の「項目」ごと<div>タグで囲んでます これだと見出しの高さとか気にしなくて良くなりました！ デザインCSSと定型文 デザインCSSの記載内容 .stk2{ position: -webkit-sticky; position:sticky; top:30px; } 定型文に登録した内容（から抜粋） <div> <h2 class="stk2">タイトル</h2> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div> <h2 class="stk2">タイトル</h2> <p> </p> <p> </p> <p> </p> <p> </p> </div>

どうも！LSSです！！ 以前に書いたCSSで、 が結構ウケが良いようで、いくつかのブログで続けて使っていただいています^^ で、今回はそれを改変したものを作ってみました！ もうすぐ年が明けるので、お正月っぽい？和風テイストの「鹿威しししおどし」風に仕上げました。 鹿威しのように揺れる見出し コード 見た目に関する部分 ボックス本体に関する指定 見出し部分に関する設定 今回、主にいじったのはkeyframesの内容 鹿威しのように揺れる見出し こんな風に、ボックス要素につけた見出しが鹿威しししおどしのように揺れる事で自己主張します！ また、ボックス要素にマウスカーソルが乗っている間は動作がちょっとゆっくりになります。 コード <style><!-- @keyframes shishiodoshi{ 0%{transform:rotate(-10deg);} 70%{transform:rot

どうも！LSSです！！ 今回はまたSVG。 ですが、SVGとJavaScriptの連携のごくごく基本的なところを試してみます！ 真っ赤な太陽 コード コード解説 SVGコード中の太陽にあたる部分 太陽をクリックした時に処理を実行 関数 sunclk 内での処理 SVGの一部分をJavaScriptから変化させられる、って事は 真っ赤な太陽 青空、お日様、草原！ …今となっては懐かしい？ LSSが初めてSVGで描いた絵をもう一回、引っ張りだしてきました。 で、絵自体は前と全く同じものなんですが、ここにJavaScriptの仕掛けを施してみました！ 「赤い太陽」をクリックしてみてください^^ …クリックするたび、ちょっとづつ、赤い太陽が下に降りていきます。 太陽以外の部分では反応しないのもポイント。 コード <svg xmlns="http://www.w3.org/2000/svg" wid

どうも！LSSです！！ またまた？変わり種のCSSネタを３種、作ってみました。 ちかちかアンダーライン 影分身！ アニメーションマーカー 使い方 その他、テキスト装飾関連記事 ちかちかアンダーライン このように、文章の一部に時々アンダーラインがつきます。 コード <style><!-- @keyframes uwavea{ 0%{text-decoration-line:none;} 69%{text-decoration-line:none;} 70%{text-decoration-line:underline;} 79%{text-decoration-line:underline;} 80%{text-decoration-line:none;} 89%{text-decoration-line:none;} 90%{text-decoration-line:underline;}

どうも！LSSです！！ CSS関連で色々と作ってきましたが、ここでちょっといったん、まとめ記事を書きます！ ちょっと量が多かったので、今回は「ボックス装飾」関連のまとめ記事となります^^ border-radius ボックス（枠）の角を角丸にする指定です。 コード 書式 border ボックス（枠）の外周に枠線を表示します。 コード 書式 枠線の種類 その他アレンジ background-image ボックス（枠）の背景に画像をつけます。 コード 画像ファイルの他に代替でグラデーションを使用できます。 コード 直線グラデーションの他に、円形グラデーションも使用できます。 複数のグラデーションを重ねる事もできます。 その他アレンジ box-shadow ボックスに影をつけます。 コード 書式 その他アレンジ あとがき border-radius ボックス（枠）の角を角丸にする指定です。 サン

どうも！LSSです！！ 以前にも少し、 の中で書いたような話になりますが、も少し汎用性を持たせた小ネタを思いつきました。 彫文字 コードの中で重要なのは赤文字３行 background-color: pink; color: white; text-shadow: -2px -2px 0px #00000040,2px 2px 0px #ffffff40; あとがき 彫文字 彫りこんだような、くぼんで見える文字のサンプルです。 サンプルの文章 コード <div style=" background-color: pink; font-weight: bold; font-size: 30px; color: white; padding: 0.5em; text-shadow: -2px -2px 0px #00000040,2px 2px 0px #ffffff40; ">サンプルの文章

どうも！LSSです！！ 昨日の記事、 で、 border と outline の違いを試してみました。 記事にしておきながら、書いてる自分も試しながら書いていたので、ことさら 「読んでもよく分からない」内容だったかと思います^^; 一応、自分では理解したつもりで、outlineの有効活用方法を思いついたので、今回はそんな記事です！ せっかくなので「コピペで使えるCSSサンプル」記事として挙げてみます^^ マウスカーソルを乗せると枠が太くなります サンプル コード コード解説 ここから、またborderとoutlineの違いの話 あとがき マウスカーソルを乗せると枠が太くなります サンプル ↓のどれかに、マウスカーソルを乗せてみてください てすと てすと てすと てすと コード <style><!-- .o-waku{ display:inline-block; margin:10px; w

どうも！LSSです！！ 以前からちょっと気になっていたCSSプロパティ「outline」を試してみます。 これまでもよく使ってきた「border」とよく似ていますが、ちょっと違う？らしく、本の説明を見てもイマイチよく分からないものでｗ そういう時は、試してみるに限りますね^^ ちなみに手元の本には、「borderは線の太さの分、要素が大きくなり、レイアウトに影響」「outlineは線を引いても要素の大きさは変わらず、レイアウトも変わらない」てな事が書かれています。 まずはテスト用のボックスを用意します borderを装飾用にしてみます borderをoutlineに変えてみます borderとoutlineを同時に適用してみます 空行を開けずに３つ続けて置いてみると… なるほどね ただし、borderはborderで あとがき まずはテスト用のボックスを用意します てすと コード <div

どうも！LSSです！！ 以前、記事内で花火を打ち上げるようなものを作りました。 little-strange.hatenablog.com 今回はそれの改変で「訪問した読者さんが好きな位置で打ち上げる事ができる花火」を作ってみました^^ 前回までのコードはJavaScript不使用でしたが、今回はJavaScriptを使用しています。 遊び方 コード 一部解説 最後に 遊び方 画面上の何もないところを適当にあちこちクリックまたはタップしてみてください。 そこから花火が打ち上げられます。 同時に最大１０発まで打ち上げる事ができます！！ コード <style><!-- @keyframes hnb{ 0%{top:300px;width:5px;height:2px;} 60%{top:0px;width:5px;height:2px;} 80%{top:0px;width:150px;hei

どうも！LSSです！！ 今回は、JavaScriptをちょっとやってみたい人向けに、 「なるべく簡単なコードでちょっと遊べる」 ものとして「おみくじ」を作り、その解説をしてみたいと思います^^ おみくじ コード コード詳細解説 <div id="gamen"></div> kuji=["大吉","吉","末吉","凶","大凶"]; function gamen_w(){ a=Math.floor(Math.random()*kuji.length); gamen.innerHTML=kuji[a]; <a href="#" onclick="gamen_w();return false;">おみくじを引く</a> 実行の流れ コピペで使用する際の改変ポイント おみくじ おみくじを引く コード <div id="gamen"></div> <script> kuji=[ "大吉", "吉"

どうも！LSSです！！ 今回は、だいぶ前の記事、 の続きとなります！（だいぶ前すぎるｗ） 今回は実践編です！ HTML編集画面を開きます まず手始めに、<div>タグを書いてみます divタグにstyleオプションをつけたします style=""の中に色々、追加していきます！ CSSの指定って 四角い枠を角丸にしてみます 緑が濃くて、黒い「てすと」の文字が見えづらいな 枠の端っこにくっついてるのがいただけない 枠に縁取りもつけちゃえ！ こんな感じに作っていきます 今回は実践編です！ 前回の記事の内容は 「:と;でプロパティと値を指定する」事と、 「CSSは３つの指定方法がある」事ぐらいしか書いていませんでしたね。 今回は、実際に「はてなブログのHTML編集画面」で、CSSを書いていく様子を語る記事となります^^ HTML編集画面を開きます ↑こんな感じの画面ですね。 ここにコードを書きこん