…「photo」というクラス名を持つdivタグ（<div class="photo">から</div>まで）の中に、imgタグがひとつ、空のdivタグがひとつ入っている状態です。※空のdivタグがimgタグより後ろにあるところがポイント photoクラスを持つdivタグには「position:relative;」を指定し、その中のdivタグには「position:absolute;」と「top:0;」「left:0;」を指定しています。 relativeの中に、absolute…

…しましょう testクラスを装飾するCSSを書き始めます CSSコードを書いていきます まず枠組み 中をグラデーションで塗ってみる グラデーションの位置とサイズを指定します 複合プロパティ「background」 linear-gradientの ( ) のなか まず、角度について 色位置について linear-gradientで描いた線を枠に入れてみます さらに、backgroundの値はカンマ区切りで並べられます あとがき まず、divタグを用意しましょう コード <di…

…></div> と、クラス指定したdivタグの中に５つの空divタグが入っています。 この中身のうち、１つめのdivタグは中央で動かずにいますが、残り４つが回転している物になります。 全てをコードで指定すると、回転体が増えるごとにコード量が膨大になるため、CSS変数を使って簡略化してみました。 最後の回転体を例に挙げると、 .d3dz div:nth-child(5){--i:0%;--z:4;--s:40px;--t:5s;--c1:#996644;--c2:#cc8844…

…iv></div> クラス名を「d3dz」としたdivタグ、その中に指定も中身もないdivタグが２組、入っています。 （d3dzは全体の外枠、その中の１つめのdivタグが地球、２つめが太陽となります。） 外枠のCSS .d3dz{position:relative;height:200px;background-color:black;} 「position:relative;」を指定しています。 「外枠自体は記事文脈に埋め込みつつ、その中身をゴニョゴニョする」際のお約束みた…

…として、「waku」クラスの中に「mono」クラスが入っている、という状態にしています。 「waku」クラスは、.waku{position:relative;width:280px;height:400px;background:linear-gradient(#8888ff,#ccccff 69.9%,#884444 70%);}「position:relative;」を指定した上で、幅280ピクセル、高さ400pxに。「background:linear-gradien…

…">呼吸してるみたい</div> アニメ化できましたね！ クラス名とかテキトーですが^^;。 gradient系の ( ) の内容はアニメーションにならないですが、それ以外の指定部分は結構 融通が利くようです。 他にもborder-imageで色々試してはいるのですが…「複数の画像を重ねられない」「gradient系のサイズを固定できない」あたりが、本当にできないのかな？と未練がましく試していたりしますｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…></div> と、クラス名「radials」（任意の名前）をつけたdivタグの中に、 <div> </div> を並べています。 この青いdivタグが、前述の【まず「1」が「何番目のdivタグに対する指定か」を指定】の対象となる部分です。 …例えば、今６つあるボールに７つめを追加しようと思うと、 「<div> </div>」をもうひとつ追加 「.radials div:nth-child(1){中略}」を更にもうひとつコピペし、1を7に、あと他の緑色の変更箇所を適当に書き換…

… ローラースケートはクラスメイト数人で行くところ、担任の教師もなぜか参加。（休日なのに教え子の引率…という感じではなかったような） 登山のほうにも、またなんだか奇妙で微妙な思い出があったり。 中学生時代 また紙ネタですが、「RPGすごろく」を作ってました。 紙に縦線と横線を引いてマス目を作り、通行不可な壁で迷路状にし、マスにイベントを書き込みます。 スタート地点からサイコロを振り、出た目の分だけ進める（進む方向は自由、ただし一回の移動中の逆戻り不可）、そして止まった目のイベン…

…に「.」をつけると「クラス」を指定する事になります。 つまり「hnbr」というクラス名を持つHTML要素がこの指定を受ける事になり、コードの最後の、 <div class="hnbr">桜の花、開く季節に…</div> 「クラス名をhnbrと指定したdiv要素（<div>から</div>までの部分）」が影響を受ける事になります。 先頭に「.」をつっけると「クラス」を指定、と書きましたが、ここで「.」をつけないと、「タグ名」を指定する事になります。 例えば、はてなブログでいう「…

…、コード中でそれぞれクラス名を変えていたり、divタグの中の文言を削ったりしていますが、それ以外の変更点を色付き文字にしています。 画像入り 色とりどり ななほしてんとう 他にもいただいたアイデア 画像入り .pichonimg{ width:150px; height:100px; background:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00…

…リックした時に誤って「中の文字を選択」状態になる事を防いでいます。（この一行が書かれている要素は文字選択できなくなります） .pichon:active{border-radius:60%/70% 70% 30% 30%;}「:active」疑似クラスは「クリックした時」にのみ適用される変更です。水滴の形状を作っていた、border-radiusを値を少し変えて指定している事で、ぷるぷる感を出しています。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…りますが、 前者は「クラス名を指定して、styleタグから装飾を指定している」、後者は「タグ内のstyleオプションで装飾を指定している」だけの違いで、内容的には同じものです。 参考：CSS超入門！…のさわりだけ！！ - Little Strange Software radial-gradientを３つ使用して、２つの円を描いています。 「３つで２つ？」というのは、「鎖として繋がっているように見えるように、１つの円を挟むように、手前に描画する半円、奥に描画する半円」で囲んで…

…linkbtn"」とクラス名をつけます。（linkbtnは任意の名前、好きに書き換えてOK）※ちなみに「target="_blank"」は、つけるとそのリンクが別タブで開くようになります。別タブでなく同タブでページ移動する場合は削ってください。 そしてそのクラス「linkbtn」に対して、CSSから装飾を施していきます。 今回のCSSの構造は、 .linkbtn{リンクボタンのデザイン（平常時）}.linkbtn:hover{マウスカーソルが乗った時のデザイン変更点}.lin…

…しています。 今回はクラスを設定し、共通設定となる部分を .barfont{position:absolute;color:#ffffff;text-shadow:0px 0px 2px #000000;font-weight:bold;writing-mode:vertical-rl;}.barlbl{position:absolute;font-size:60%;} と指定した上で、それぞれの位置だけ<div class="barfont" style="left: 17…

…contentというクラス名を持つ要素の中の<p>タグ」を指定している事になります。 はてなブログにおいては「entry-content」というクラス名は記事の表示部分で、「編集 見たまま」画面で記事編集中にPCのエンターキーを押すと、 <p> </p><p> </p><p> </p><p> </p> のように<p>タグが量産されます。 …自分も、改行や行間を開けるのに多用していますが、HTML本来の意味から言うと<p>タグは「paragraph（段落）」を意味するタグで、改…

…keisen」というクラス名をつけた<div>タグ内でのみ、罫線背景が有効となるようにしました。 <style>～</style>は一度書いておけば、同記事内で何度でも <div class="keisen"><p>略</p></div> を使う事が出来ます。 ちなみに、記事内容全てを罫線にするには、 コード <style>.entry-content{line-height:2.5em;background:linear-gradient(transparent 75%,#…

…v> これらが一行＝一枚の壁となりますが、表示位置が書いた順によっておかしくならないよう、CSSのほうでz-indexを指定しています。 問題点 コードが煩雑すぎます^^;;;; クラスの複数指定を使ってでも、もうちょっとマシな書き方が出来るはず…。 今後 自分で納得のいく書き方ができたら… little-strange.hatenablog.com これと組み合わせて、遊べる迷路にしたいところですね^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…）かけて変化する という事になります。（つまり、クリックしてから結果の面が出るまで合計３秒かかります） あとがき 途中、「上の方に回転」を挟まないと、「１の目から１の目の時に微動だにしない」事になり、クリックできたんだかできなかったんだか分からない、という事になるのでどうしたものか？ と考えた結果、こんな感じになりました。 あとは…クラス名やidを書き換えて、サイドバーのサイコロを置き換えてみようかな^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…タは「.」をつけるとクラス名、「#」をつけるとid名を指定する事になりますが、そのどちらもつけない場合はタグ名を指す事になり、はてなブログにおいて記事部分を囲んでいる<article>タグに対しての指定、という事になります。 もちろん、こんな記事全面じゃなくて一部の要素に対して指定したい場合は、 <div class="nantoka"></div> といった要素を置いて、セレクタ部分を .nantoka にする事で要素内だけに反映させる事ができます。 background-…

…span> のようにクラス化しても良さそうですね。 こちらの場合は<style>から</style>を書いておけば、 さしすせそ<span class="batten">太刀つって</span>となに<span class="batten">ゆーてんの</span> .batten{ background-image: linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%), linear-…

…「bgcnc」というクラス名を持つdivの中に、「ibgcnc」「i2bgcnc」という２つのdivを入れました。 この「ibgcnc」を「要素（背景用）」として使用し、その上に表示したいものは「i2bgcnc」の中に書く事にします。 大枠である、「bgcnc」は、 .bgcnc{position:relative;width:300px;height:200px;overflow:hidden;} としました。 position:relatve;は文脈の流れ上に普通に配置す…

…」は「pdwsというクラス名を持つ要素が並んでいる（兄弟要素）うち、1つめのものに対して」という意味になります。 「animation-duration:calc(30s / 11);」のanimation-durationはキーフレームアニメーションの再生にかける時間を指定し、例えば「animation-duration:5s;」だと「5秒かけて再生」という意味になりますが、今回は再生時間を「calc(30s / 11)」という変わった指定方法で指定しています。 calcは…

…の部分で、１行目は「クラス名testrの中身は全て（基本的に）文字色は赤、サイズは30pxとする」という指定。 ２行目は「クラス名testrの中にあるもののうち、チェックが入ったinputより後ろにあるもの全て（~*）の文字色を青くする」という指定となります。（チルダ「~」は「弟要素＝同じ親要素下にあるもので、それ自体より後ろにあるもの」を指し、「*」は「全称セレクタ＝タグ名・クラス名・IDがなんであれ全てのもの」を指します。） 実際にこの仕組みを元になにか作るとしたら、文字…

…tolife"に別のクラス名を半角スペースをあけて付け足し、class="hatena-fotolife anmfb1"のようにする、もしくはclass="anmfb1"のように置き換えてしまい、別途CSS指定部分である、 <style>.anmfb1{transition:1s;filter:brightness(1000%);}.anmfb1:hover{filter:brightness(100%);}</style> を前に入れてコードを完成させる事で、「マウスカーソ…

…に「.」をつけると「クラス名」を意味するようになり、「sntkと名付けたクラス名をもつもの」が対象となります。 続けて、半角スペースをあけて「input」が来ています。 この「半角スペース」は「子孫要素」を示し、「input」のように「#」も「.」もつけずに書いたものは「タグ名」を意味する事になります。 なので「.sntk input」は「sntkというクラス名を持つものの子孫要素（要素のタグで挟まれた中にある）のinputタグな要素」を指す事になります。 さらに、それに続け…

…frnd」と名付けたクラスの「:before」要素に対する指定です。 content:"＊";で「文頭に＊という文字をつける」 display:inline-block;inline-blockまたはblock要素にしておく必要があります。 transform-origin:0% 50%;回転などの動きの中心となる位置を指定しています。横位置0%（左端）、縦位置50%（上下中央）を指定した事になります。 animation:bfrnda 8s linear 0s infini…

…す。 そして、文字のクラスに対して、 opacity: var(--txtop); という指定をしておきます。 opacityプロパティは 0以上1以下 で指定し、 0なら完全に透明、1なら完全に不透明、0.5なら半透明 という風に透過度を指定するプロパティです。 あとは、画像に指定したanimationのkeyframes中に、 37%{--txtop:0;}50%{--txtop:1;}69%{--txtop:0;} と指定した事で「アニメ時間の37%経過時には変数の値は…

…。 よく似たもので「クラス」がありますが、こちらはいくつ重複してもOK！ そして「id」を使う必要がある場面をなんとか「クラス」に置き換えられないかと考えていたんです。 「本」のほうは色々複雑でまだできるかどうか見えてきませんが…「カード」のほうはなんとかいけそう！？ ってところまで漕ぎつけました^^ カードをめくる その３ サンプル コード その他 あとがき カードをめくる その３ サンプル ❤A ❤Ｋ ❤Ｑ ❤Ｊ ♠Ａ残念、ワンペアだｗ コード <style><!--.c…

…tyle><!--.クラス名::afterまたはbefore{color:transparent;content:"★";text-shadow:８つの影を指定;}.クラス名:hover::afterまたはbefore{text-shadow:８つの影（変化後）を指定;transition:0.7s linear 0s;}--></style><p>ここに→<span class="クラス名">カーソルをのせてみてね</span></p> と、さほどややこしくないコードになっ…

…assName?' クラス名:'+a[i].className:'')+'<br/>';}gamen.innerHTML=txt;},false);</script> とりあえずdivとspanだけですが はてなブログには他にもarticleタグやhタグなども使われている事、またタグの階層構造を無視した、単なる一覧な事が難点と言えば難点^^; そして、コメントやスターをいただくと更に増えるであろう事が予想されますｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願い…