どうも！LSSです！！ かなり前の過去記事で、 というのがあります。 Androidアプリを作っていた頃の記事ですね。 タイマーアプリというのは、ありふれていながらも実用性が広くありそうです。 が、ブログの方向性がAndroidから離れてWebネタばかりになって久しくｗ じゃあ「Webアプリとしてタイマーは作れるのか？」というと… 「カウントダウンもストップウォッチも作れる、けど、カウントダウン終了時に音で通知するのに音声ファイルを用意したりする必要がありそう」 だったんです…

…語につきものなのが「クラス」という概念です。 オブジェクト＝モノクラス＝型 で、「クラスって何？型ってどういう事？」の説明によく引き合いに出されるのが「たい焼き」の話。 「たい焼き」は小麦粉の生地が魚のカタチになっていて、中にあんこが入っているスイーツですが、その「魚のカタチ」にするのに「焼き上げた後からいちいち魚のカタチになるように彫刻する」なんて作り方はしません。 あらかじめ、魚のカタチにくぼませた鉄板に生地を流し込むと、たい焼きの形に焼き上がりますね。 この「鉄板」に当…

…を作ります testクラスにキーフレームを呼び出すアニメを指定 最後まで再生したら逆再生で戻る 静と動 あとがき はじめに、土台となるものから作ります テスト中… コード <style><!--.test{width:100px;background-color:lightgreen;}--></style><div class="test">テスト中…</div> まず、「test」というクラスを持つ<div>タグを用意して、中に適当に文字（テスト中…）を入れておきます。 …

…てください。 CSSクラスとして指定しているので、class="dblsq"を入れるだけで他の要素にも当てられます。 枠線の正体 この赤と青の四角、実は合計８つの「背景画像」だったりします。 CSSの「background-image」「background-size」「background-position」、いずれも「カンマ区切りで複数指定できる」事を利用し、 background-image;赤ベタ,赤ベタ,赤ベタ,赤ベタ,青ベタ,青ベタ,青ベタ,青ベタ;backgro…

…/li></ul> クラス名を yubi2 に変えた他は、赤文字部分「pink」に変えただけです。 閉じた図形でなくても塗りつぶせるんですね（今、試して初めて知りましたｗ） 今回のは適当に描いた図形ですが SVG形式でさえあれば、もっとカラフルな画像でも、かっこいい画像でも、画像ファイルを使用せずに自由なマークを付ける事ができます^^ 【CSS+SVG】インラインSVGを背景画像に指定 に挙げたような「謎の制約」があるぐらいで^^; ってなとこで、今回はこのへんで！ 次回もま…

…つ入っていますが、それらを安直に name="rdb2" としました。 以上で、タブ切り替えを２つ、同じページに置いて干渉せずに動作させる事ができます。 最後のついでに、２つめのタブ切り替えの方の色指定を変更してみました。 あとがき コードをなるべく短くしよう、という方向で書いたCSSでしたが、こういう時の修正はちょっと面倒になっちゃいましたね^^; クラス指定も織り交ぜて使うとちょっとマシだったかも…？ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…^^そう思うと、疑似クラス「:checked」は革新的なセレクタかも！！ コード <style><!--.divbox{position:relative;}#lb1,#lb2,#lb3,#lb4{position:relative;top:8px;padding:0px 10px;border-width:1px;border-color:black;border-style:solid solid none solid;border-radius:8px 8px 0px …

…なく「stk」というクラスを持つ要素に対して指定、という事にしました。 あと、 height:130px; を追加し、高さを広くとっています。現在の文字サイズだと３行までこれでいけます^^…もちろん、広くした事でそれだけ、後の文章のスペースが狭くなる、というデメリットもあります^^;;; あとは記事のほうで見出しを書く時に、 <h2 class="stk">実は以前からやってみたかった！</h2> のように書く事で、クラスにstkを指定した場合のみ、stickyに対応する事に…

…nt:nmb;} .クラス名{counter-increment:変数名;} …と<style>タグ内に書いておくと、そのクラス名を持つ要素が出てくる度にカウントが１増えます。 カウンターは複数利用する事もできて、任意の名前をつけた変数で管理します。（今回の例ではnmbとしました） .cnt:after{content:counter(nmb);} このカウンター変数、CSSのプロパティ指定に使えたら面白そうなんですが（要素が出てくる度に少しづつ色が変わるとか出来そう…だった…

…ass="それぞれのクラス名">装飾したい部分</span> のように<span>タグでクラスを指定する事で効果がのります。 なお、<style>タグ数行をコピペした同ページ（記事）内では、<span>タグはいくつでも配置する事ができます^^ その他、テキスト装飾関連記事 CSSでの装飾、大きく分けると 「ボックス（枠）装飾」 「テキスト（文字）装飾」 に大別できるかと思います。 今回の記事は後者、テキスト装飾ですね。 その他、テキスト装飾関連記事はこちら！ ってなとこで、今…

…デなし</div> クラス名以外には赤文字部分を変えただけですねｗ blue 50%,transparent 50%のように、色の変わり目で同じ数値を指定するとグラデーションしなくなります。 失敗例 失敗例 コード <style><!--.ex1{border:5px inset gray;background-color:white;background-repeat:no-repeat;background-image:linear-gradient(150deg,blu…

…「tachi」というクラス名を付けて、「斬られ役」という言葉が入っているだけの要素ですね。 で、この「tachi」というクラス名（任意の名前。好きに名付けてOKです！）に対する指定を、<style>タグに書いています。 その<style>タグですが、<style>～</style>の中に今回は、 .クラス名{マウスカーソルが乗ってない時の基本的なCSS設定;}.クラス名:hover{transition:変化にかけるアニメーションの再生時間;変化する部分のプロパティ;} とい…

…書いた「コメント欄のクラス」は、これからコメント欄のデザイン変更に挑戦しよう！と思われた方の役に立ちそうなので、再掲します！ li entry-comment js-entry-comment comment-hatena-user コメント１件分の枠 p comment-user-name img hatena-id-icon 投稿者のアイコン画像 a comment-user-id span comment-nickname span user-name-nickname…

…ほぅ、やるねぇ。君のクラスの生徒は。」「”ピー”山…。」 さすがに吉賀のショックは大きかったようだ。 「さて、返事を聞かせてもらおうか。吉賀先生。」 「”ピー”山君。 あたしね、一つだけ、先生に話さなかった事があるんだ。」「へぇ…、何？」「…あたし、本当は ずっと前から、”ピー”雄の事スキだったの。」 ～次回予告～ 「先生はド田舎の学校に転勤する事になった。」 吉賀の突然の発表に、教室はどよめいた。「”ピー”岡。…前にも言ったが、”ピー”山を宜しく頼む。」「先生…。」 幼い二…

…で、私が今日からこのクラスの担任になった、吉賀ピー太郎だ。以後、よろしく。」「はぁ？何が『と、ゆ～わけで』なんだよ？」「今、言った筈だ。…聞いてなかったのか？」「すいませ～ん、聞いてませんでした～。許してくらさ～い。」「昨日まで担任だった濡田先生は、何故か突然旅行に出られた。そこで私が代わりに来たわけだ。他に聞きたいことは？」「特にありますぇ～ん。」「…君、そのしゃべり方は何なんだ。名前は？」「”ピー”山”ピー”雄、小学６年。特技は担任イビリどぅえ～す。」「”ピー”山”ピー”…

…001 という名前のクラスを指定した要素の、その中に入っている<li>タグに対して」の指定、って事になります。 そして、冒頭に書いた通り、「ナンバリングを使うなら、list-style-image は使えない」ので、background-image を使用しています。 ※background-imageを使った例の記事は↓こちら little-strange.hatenablog.com 今回は、 background-image:linear-gradient(45deg,…

…目は、「hnbdm」クラスの中で指定しました。 指定しなかったanimation-delayはここ、「<div>タグを複数用意して、それぞれちょっとだけ開始タイミングを変更する」事で、花火の多重化を実現しています。 あと、中身のないdivが はてなの機能で消されてしまう事が多発したので、中に「.」を入れ、「hnbdm」クラス内に color:white; を入れて見えないようにしましたｗ 前回 書かなかった、花火風のドットについて ↑の記事に書いた、border-radius…

…が、今回はcsizeクラスに統一し、３か所から この指定を読みにくるようにしています。 このしておいた方が変更が容易、という利点がありますね^^ カード背面デザイン部分 #ura{transform:rotateY(0deg);background:pink;border:10px double black;background-image:linear-gradient(45deg,#ffffff00 50%,#ffffff80 50%);background-size:2…

…たんじゃねーの？」 クラスの男子が一斉にひやかす。 啓子はボソッと答えた。 「うん、実はそうなの。」「わー！ヘビ女だー！！楳図かずおだー！！！」「…ううん、啓子…蛙少女よ…。」 さっきまで騒がしかった教室が一瞬で静まりかえったのを覚えている。 それは、異生物に対する恐怖などではなく、単にシラけただけだった。 その静寂を破ったのは啓子の幼馴染み、真吾だった。 「つまらねー嘘つくなよ、サボリヤロー。」「嘘じゃないよ。啓子、昔は手も足も無いおたまじゃくしだったんだから。」「そんな嘘…

…言語でいうところの「クラス」は、最近触ってる「CSSのクラス」と性質の異なるもので、下手にまぜこぜに話すと混乱を招きそうな気がしていますｗでも、複数のプロパティを持ち、オブジェクト（タグ）に同じ性質を持たせるもの、としては共通点もありますね。 2020年2月21日 あー、こんな記事も書きましたねｗ ほんと、このネタ元のオチは衝撃でした！ 2020年3月21日 CSSのgridレイアウトと玉ねぎの話（関連性全くなしｗ） そうか、スマホでも21マス並べる事ができたんですね。 超巨…

…} このようなCSSクラスを用意しています。 .c1～.c9までが９種類のコマ色（背景色と枠線色）だけを指定している部分。 その上の.kmがコマの形状などを指定している部分になります。 今回、その.kmのほうに、 background-image:radial-gradient(circle at 70% 30%,#ffffffc0,transparent); を追記しています。 で書いた、 赤い背景色の方は別途、「background-color: red;」の方で指定して…

…て使う際の手順 複数クラス指定による恩恵 まずはサンプルから 天満 玲子 あははは！何が魔女っ子よ。マキなんてスティックがなけりゃタダどんくさいだけの女じゃない。 立倉 麻希 返せーっ。ドロボーっ！ 天満 玲子 人聞きが悪いわね。あなたがこれを持ってたってロクな事に使わないから取り上げただけよ。あなたがこれを使ったおかげで、私は…私は…。 立倉 麻希 何いってんの。あんたなんてあぁでもしなきゃ、一生、男とヤレないじゃない。感謝してよね。 天満 玲子 こ…殺してやる！ブッ殺して…

…す。 wakuというクラスに対しての指定で、「インラインブロックとして表示」「枠線を1pxの黒い普通の線で表示」という指定になります。 min-width:600pxという条件のメディアクエリ <style><!--@media screen and (min-width:600px){ .waku{ width:150px; }}@media screen and (max-width:599px){ .waku{ width:100px; }}.waku{display:…

…、このfkdsというクラス名も任意につけた名前で、好きに名付けてOKな部分です^^ ↓この赤文字３か所で名前をあわせておく必要はあります。 <style><!--.fkds::before{content:"";position:absolute;top:-14px;left:50px;width: 0px;height: 0px;border-left: 10px solid transparent;border-right: 10px solid transparent;…

…した。 コメント欄のクラス まとめ コメント欄の内側のデザインをいじってみた！ コード ざっくりと断片的な解説 display:inline-block; content:"\A";white-space:pre; border:4px inset #E0F0C0;の２段重ね float:left; ところどころ、クラス名を並べて指定している理由 コメント本文をどうするか、最後まで迷いましたが… とりあえずこれで コメント欄のクラス まとめ 前回の記事でソースをそのまま載せま…

…s名 CSSで、このクラスに対する指定を書くと こういうコメント欄 ↑こういうコメント欄のソースを調べてみました。 GoogleChromeを使用していますが、右クリックからの「ページのソースを表示」では、このコメント部分は見られないんですね。 ですが、「名前をつけて保存」から「ウェブページ、完全」としてHTMLファイルを保存し、保存したものをメモ帳で開く事でやっと中身を見る事ができました！ 該当部分のコード <li id="comment-26006613586836317…

…omment"というクラスが指定されており、</ul>までの間に<li>タグが入っています。 恐らく、はてなブログのシステムは、この<ul>タグの中に、JavaScriptで<li>で囲んだコメントを書き出して並べてるものと思われます。 ですので、個々のコメントに対する指定として .comment li （訳：「commentクラスの中のliタグ）というセレクタを指定しています。 border-radius:12px; 12ピクセルの角丸 border:5px ridge #…

…、付け足したい対象のクラス名やID名の後に:afterをつけると後ろに、:beforeをつけると前に対する指定、という事になります。 で、{ }内にcontent:"なら、ここをクリックしてね^^";と指定する事で、元々の「コメントを書く」という文章に続けて文言が足されるんですね。 はてなブログでＣＳＳを設定する方法 ※この部分は以前の自分の記事からまるまるコピペしていますｗ はてなブログの管理画面を開きます。 画面左に、 こう、並んでるもののうち「デザイン」ってところをクリ…

…す。 ※青字は任意のクラス名。好きに名付けてOKです。 解説 background-image:linear-gradient(0deg,lightblue ,pink ); まず、最初と最後の黄緑の部分は決まり文句で、変更する必要はありません。 角度の指定 0deg,lightblue ,pink ,（カンマ）で区切った３つの項目のうち、１つめが「グラデーションが向かう角度」を指定する部分になります。 「deg」という単位は、算数で習った「度」と全く同じで、例えば90deg…

…す。 ※青字は任意のクラス名。好きに名付けてOKです。 解説 background-image:radial-gradient(circle 150px at 65% 35%,#ffffff,#888888); まず、最初と最後の黄緑の部分は決まり文句で、変更する必要はありません。 形状の指定 circle 150px at 65% 35%,#ffffff,#888888 最初の,（カンマ）までの、 circle 150px at 65% 35% が、形状を設定している部分に…