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

どうも！LSSです！！ CSSでグラデーションやマーカーを設定する時に、linear-gradientやradial-gradientを使います。 このブログでも何度かネタにしてきましたが、グラデーションする色を指定するところで色が「○%」って指定する部分が、とにかく分かり辛く、説明しづらい！ ので、今回はそこに特化した解説記事を書いてみる事にします。 サンプル１ サンプル２ サンプル３ スクリプトで手軽に実験できるツール グラデの色の位置指定のみについての記事でしたが サンプル１ 0%　100% こんなものを書いてみました。 コード 0%<span style="display: inline-block; width: 300px; height: 30px; border: 1px solid black; background-image: linear-gradient(90de

どうも！LSSです！！ 今回は小ネタです。 たまたま、水玉 コード <div style="width: 300px; height: 200px; padding: 1em; border-radius: 25px; background-size: 30px 30px; background-color: #ddffdd; background-image: radial-gradient(circle 20px at 25% 25%,white 25%,transparent 30%),radial-gradient(circle 20px at 75% 75%,white 25%,transparent 30%);">たまたま、水玉</div> 水玉模様を作っている部分 background-size: 30px 30px; background-color: #ddffdd; b

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

どうも！LSSです！！ 先日、 という記事を書きましたが、まだまだ書き足りないので続き！ （思い出を語ります、といいながら、あまり思い出に触れてなかったのもありｗ） 発売前から凄く楽しみにしていたタイトル 確かその日は学校が昼までだった 一日目に引っかかったのは「なぞなぞ」 第四世界の衝撃 という感じで 発売前から凄く楽しみにしていたタイトル 当時、学生でしたが、このゲームについては発売前からめっちゃ楽しみにしていました！ ファミマガ等の情報誌で事前情報を仕入れ、発売日当日に入手しました。 LSSが発売日当日に買ったゲームって、SaGaとドラクエ３ぐらいじゃないかな。 ドラクエ３のほうはニュースネタになってましたねｗ 余談ですが、「ストリートファイター２」を「予約せずに買えるだろう」とタカをくくっていたら買えなくて、中古ショップで代わりに「イーアルカンフー」を買って帰った記憶がありますｗｗ

どうも！LSSです！！ ちょっとふざけて、こんなのを作ってみました 。 お前のものは俺のもの 俺のものも俺のもの <div style="background-color: orange; width: 300px; height: 200px; padding: 2.5em 0.5em; color: white; font-size: 24px; font-weight: bold; text-align: center; background-image: linear-gradient(135deg,transparent 30%,black 30%,black 50%,black 70%,transparent 70%), linear-gradient(225deg,transparent 30%,black 30%,black 50%,black 70%,transparen

どうも！LSSです！！ ↑こんな三角形が、CSSの、それもborderで描ける、というのを知ってびっくりした話です。 これ最初に見つけた人凄いな…！！ 実はこの三角、あちこちのブログで使用されています 三角形のコード 順を追って解明していきます まず、縦横50pxの黄色い四角形を作ってみます その四角形の上下左右に幅15pxのborderをつけてみます 上下左右のborderの色を変えてみます 下だけ残し、上左右のborderの色をtranparent（透明）にしてみます。 要素自体のwidthとheightを0pxにし、背景色指定を削ります border-topの指定を削り、border-bottomの幅を大きくしてみます なお、border-imageとは組み合わせられないようです 実はこの三角、あちこちのブログで使用されています CSSで吹き出しを表現されているのをよく見かけますが、

どうも！LSSです！！ やっと出来ました！これが本当の波線マーカー！ 以前、公開した記事の波線マーカー 色々やってて辿り着いた、今回の波線マーカー コード コード解説 改変調整ポイントまとめ 追記！区切り線としての利用 余談：実はマーカーじゃなくて下線なら凄く簡単ｗ 以前、公開した記事の波線マーカー …多分、多くの方が「いや、波線ってそうじゃないだろ！」っていう言葉を飲み込んだのではないでしょうか？ｗ （　こういうやつでした⛵　） あの時点の知識では、あれが精一杯でした^^; 色々やってて辿り着いた、今回の波線マーカー 波線っていったら、本来はこうですよねｗｗｗ　⛵ 欲を言えば…これはまっすぐな斜め線を交互に配置しているので、曲線であるべき「完全なる波線」ではないですが、まぁ許容範囲かなとｗ コード <span style="background-image: linear-gradien

どうも！LSSです！！ 今日は、職場の健康診断がありました。 年に一度のイベント 検便の落とし穴 朝８：３０受付 人生初体験！ 結果が出るのは後日なわけですが 年に一度のイベント 一年ぶりですねぇ。 だいたい忘れた頃にやってきますｗ 自腹を切らずに、健康状態を確認していただける、ありがたいイベントですね^^ 検便の落とし穴 健康診断の日の数日前に、A４サイズの書類が入る封筒を職場から渡されます。 中身は説明資料・問診票・検尿／検便キット。 ここで、去年の事を思い出します。 去年は封筒を受け取ってから、問診票だけ書いて 「あとは当日でいいや」 と放置したんでした。 当日になって、開けてびっくり！！ 検便キットだけ２セットあり、それぞれ「違う日」に採取するように、って事になっています^^;;;; で、仕方なしに１セットだけ採取して、会場である病院に行って説明して、別の日にわざわざ持っていったん

どうも！LSSです！！ 今日は、以前にやった、 に続いて、またしても さじ(id:conasaji)さん出題のお題？に挑戦してみました！ 小田原城の寄木細工 ↑上がさじさんがイラレで描かれた画像、下がそれをCSSで模写してみたものです。 （今回、色はツールを使って盗みました。なのに文字の色が違うような^^;;;） 元記事は↓こちら！ コード コード解説 の前に考え方から background-size と background-positionというプロパティ ここからコード解説！ もうひとつのお題 やってみて凄く勉強になりました！ コード <div style="width: 320px; height: 65px; font-size: 29px; color: #ffe9a5; text-align: center; text-shadow: 2px 2px 3px gray; fo

どうも！LSSです！！ 今回は、懐かしのゲームの思い出話。 ゲームボーイにスクウェア（現：スクウェア・エニックス）が参入した初タイトルにしてゲームボーイ初の本格RPG（RPGは一応あったんだっけ）、 「魔界塔士Ｓａ・Ｇａ」の思い出を語ります！ 世界観 システム 人間の成長 エスパーの成長 モンスターの成長 セリフが最高すぎる！ 小世界の一幕　鬱すぎる19階 ラスボス「神」と、伝説と化したある要素 世界観 せかいの　まんなかに　たつとうは らくえんに　つうじている　という はるかな　らくえんを　ゆめみて おおくの　ものたちが このとうの　ひみつに　いどんでいった だが　かれらの　うんめいを しるものはない そして　いま　またひとり‥‥ …というプロローグから始まります。 この時点でもう、かっこいい！！ で、その「世界の真ん中にたつ塔」。 最初の世界「大陸世界」の真ん中にたっているんですが、階

どうも！LSSです！！ 今回はCSS小ネタです。 「コメントを書く」ボタンの文言に付け足すCSS 一応、説明 はてなブログでＣＳＳを設定する方法 はてなブログの管理画面を開きます。 行番号つきの画面が入力欄です。 なお、この方法では これをやってみたきっかけ 追記！CSSで完全に別の文言にする方法 「コメントを書く」ボタンの文言に付け足すCSS デザインCSSに、この一行を書き足します。 .leave-comment-title:after{content:"なら、ここをクリックしてね^^";} すると、 となります^^ また、前後ともに文言を付け足す場合は .leave-comment-title:before{content:"この記事について、";} .leave-comment-title:after{content:"なら、ここをクリックしてね^^";} ↑こんな風に書けばOKで

どうも！LSSです！！ 今回は、 「はてなブログで始める！JavaScript超入門！」 と題して、 「プログラミング？やったことねー」 って人向けにさわりだけ書いてみます！！ 第一章　Hello World 第二章　変数を使ってみよう！ 第三章　計算ぐらいしておこうか 第一章　Hello World 大抵のプログラミング講座で最初の第一歩として書かされる「Hello World」をやってみます。 これは単に画面に「Hello World」と出力するだけのプログラムです。 まずは、はてなブログの「記事を書く」画面を開いてください。 ↑開いたら、「HTML編集」をクリックします。 HTML編集画面が開いたら、まず日本語変換をオフにして、そこに <div id=" と打ちます。 ↑すると、勝手に"がもう一つ付けられます。 （これは、はてなブログのHTML編集画面が持つ機能） カーソルは""の間