…変更しやすい要素を、CSS変数で一か所にまとめました。 一番上の --schc1 はサーチライトの色で、#ffff00（黄色）を不透過度 ff（全く透明でない）としています。 二つめの --schc2 はサーチライトの外側の色で、#ffff00（黄色）を不透過度 00（完全に透明）としています。 みっつめの --schsz1 はサーチライトの内側のサイズ、よっつめの --schsz2 はサーチライトの外側のサイズ、50%と60%にしていますが、この間の10%部分が「黄色から透…

…も！LSSです！！ CSSに実装されている「キーフレームアニメーション」機能、このブログでもたびたびサンプルなどで使用しています。 だいぶ前（一年ぐらい前）に、 こんな記事も書いていましたが、今回は「実際にキーフレームアニメーションを使ったものを作るのに、どんな手順で書いているか」を書いてみます！ はじめに、土台となるものから作ります 次に、動き（変化）を指定するkeyframesを作ります testクラスにキーフレームを呼び出すアニメを指定 最後まで再生したら逆再生で戻る …

…！ また、なんか謎のCSSサンプルを作ってみました。 カーソルを載せると動くグラデーションバー コード 色変更・移動量変更・変化時間変更について あとがき カーソルを載せると動くグラデーションバー カーソルを載せると動くグラデーションバー ↑にマウスカーソルを載せてみてください。（スマホの方はタップ） コード <style><!--.grdbar{--gc1:#aaaaee;--gc2:#bbbbee;background-image:repeating-linear-gra…

…うに、白鍵の音（ドレミファソラシ）だけが出るようにしました。 ただ、加速中に次々となるため、ごちゃごちゃな音になってますｗ あとがき 【CSS＋JavaScript】フルスクリーン表示サンプル 【WebAudioAPI】なぞのがっき を作ってみました で やった事＋加速度センサー、という感じで作成した今回の「なぞのがっき２」ですが、鳴らしてると…赤ちゃん向けのガラガラを鳴らしてるみたいな気になってきますｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…張り出してみます！ CSSサンプルのできそこない SVGアイコン案 せざるを得ない 自作小説 「黄金の霧雨」 あとがき CSSサンプルのできそこない コード <style><!--.nnm01{width:300px;height:300px;background-image:linear-gradient(135deg,#ff000080,#ff000000 50%),linear-gradient(225deg,#0000ff80,#0000ff00 50%),linea…

…す！！ 実は以前からCSSサンプルのネタとして↑のような枠を思いついていたんですが、 border outline box-shadow のどれを使ってもしっくりこなくて、伸ばし伸ばしになっていました^^; …が、ふっと別の方法を思いついたのでやってみたところ、うまくいったのが今回のサンプルとなります！ コード 枠線の正体 アニメ―ションもつけてみました 他にも改変のやりようはあります コード <style><!--.dblsq{padding:15px;background…

…ル コード 使い方 CSS装飾・仕組みに関係ある部分と関係ない部分 問題は…「何を見せるか」ですねｗ サンプル 閉じるここに、フルスクリーンで見せたい内容を記述します。何を書くか迷っちゃいますね^^;;; 開く ↑の「開く」をクリックすると、ブログの記事幅設定に関係なく、画面いっぱいに表示されます。 表示中に右上に出てくる「閉じる」をクリックすると元に戻ります。 コード <div id="fullscr" style="position: fixed; width: 100%…

…わりだけ HTML・CSS・JavaScriptなど、「全く知らないが、これから勉強し始めたい。でもどこから始めたらいいの？」という方向けに書いた、超入門記事シリーズです。 まとめ記事 CSSなどのサンプルをこれまで色々書いてきましたが、まったく体系的になっていなかったので、たまにジャンル別にまとめた記事を書いています。 が、そのまとめ記事自体が埋もれてしまっているという状態でしたので、新カテゴリにしましたｗ WebAudioAPI ごく最近になって初めて「JavaScrip…

…すっかり「HTML・CSS・JavaScript」ブログの様相を呈していますねｗ じゃあ、「今年こそAndroidアプリ開発」か？というとそうでもなく…引き続き、Web関連をまだまだ覚えていきたいです。 浦島太郎状態 何度か書いている事ですが、その昔、HTML4.0の時代にも、HTML+CSS＋JavaScriptを書くのにハマっていた時期がありました。 昔話モードになりますが、あの頃はCSSとJavaScriptを組み合わせて動きのあるサイトを作る技術を「DynamicHT…

…です！！ なんとなくCSSをいじっていたら、「かなりシンプルな記述で面白い効果」を見つけました！ シンプルなサンプル box-shadowって border-radiusとpaddingを使わないとこんな感じ 見出し装飾や、ちょっとしたポイントに良さそうですね シンプルなサンプル この枠には、border-radius、box-shadow、paddingしか使っていません。box-shadowにinsetをつけて、ぼかしを大きめにとるだけでこんな効果に！お手軽に やわらかく…

…う^^; HTML+CSS は、綺麗にレイアウト・装飾されたWebページを構築でき、HTML+JavaScript は、動的なコンテンツ（ブラウザゲームとか）を作る事ができます。 HTML+CSS+JavaScript で綺麗かつ動的なWebページが作れるようになりますが、CSSが苦手とするタイプの描画を埋められるのがSVGで HTML+SVG+JavaScriptでもコンテンツとして良さげなものができそう^^…でも、絵心は欲しいですｗ ただ、お絵描きって意味では、SVGがな…

…です！！ 今回は、【CSS+SVG】インラインSVGを背景画像に指定に続き、画像ファイル不要で使える背景模様を考えてみました！ ちょっと変テコな模様 改変について CSSだけでも出来たかも？ですが ちょっと変テコな模様 ちょっと変テコな模様を作ってみました。CSS＋SVGで描いているので画像ファイルのアップロード不要です^^ちなみに、アルファベット小文字の a をモチーフにしています。この調子で作っていくと２６種類の背景画像ネタを作れる事に！？ｗ コード <style><!-…

…ログ】機能紹介記事・CSSカスタマイズ記事 まとめ はてなブログにアイキャッチ画像作成機能が追加されました！ 【はてなブログ】はてなブログに「下書きプレビュー共有」機能があったのを初めて知りましたｗ はてなブログ「絵を描く」機能を使って、オリジナルゆるキャラを描いてみた！ などなど過去記事に書いてます。 同じ「はてなブログ」でブロガーライフを楽しむ皆様に「これは知らなかった！面白そう！」というものがあれば幸いです^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願…

どうも！LSSです！！ 今回は、「漫画のような雲型のフキダシをSVGで描いてみたけど下手すぎた」話と、「雲型のフキダシSVGを画像borderに使用してみたけど…」という話の２本立てでお送りします！！ SVGで描いてみたフキダシ かっこいいフキダシとは 以下、未解決案件^^; SVGで描いてみたフキダシ なんとか頑張って描いてみました（例によってコード手打ち） 中の四角は後で消しますが、文字を入れるスペースを確保するための目安です。 コード <svg xmlns="http:…

…のサイズで表示）と、CSS指定としてのstyle="border: 1px solid black;"（この範囲が画像である事が分かるように枠線を表示）しておきます。 なお、はてなブログでインラインSVGを書く際には、 のように前後に [] をつけて置かないと勝手にコード削除されます^^; さて、他に指定している項目について。 xmlns="http://www.w3.org/2000/svg" これは、まぁ、お約束的なものですね。 viewbox="0 0 20 20" S…

…もやっぱり SVGとCSSの比較（画像として考えた場合） メリットとデメリット まぁ、あの意味不明な文字の羅列を見た事がある人はまず、「めっちゃ面倒くさそう。画像を貼り付けたらいいだけの話でなんでこんな面倒な事すんの？」って思われるかな？とは、いつも思いますｗ デメリット：面倒くさい でも、それを上回るメリットもあります！ メリット：文字列なのでプログラムから加工しやすい ただし、これはこのメリットをどう活かすか？を考える方がちょっと面倒くさそうでもありますがｗ んでも、画像…

…用していました。が、CSSには background-imageと似た書式を利用する「border-image」や「list-style-image」があります。 そのうち、list-styleについては、 【CSS】箇条書きのドットに色をつける【list-style-image】 【CSS】ナンバリング付きの箇条書き、ナンバー部分に背景色を付けてみます 【CSS】ナンバリング箇条書き装飾サンプル集 これらの記事で、gradientを使って色々試みていましたが…「ここにSVG…

… サンプル コード CSSのbackground-imageプロパティについて 同様に画像を扱うプロパティとして 色変更・サイズ調節など いくつかのトラブルに悩まされました… その１ widthとheightの指定が必要らしい その２ <use>が使えない その３ 色指定にRGB16進数指定が使えない あとがき サンプル こんな風に、SVGで描いた模様を背景として使用できます！画像ファイルを使わず、コードだけで表現しています。CSSのコードの中に埋め込む、という形になるので、…

…こ一年ほど？すっかりCSS＋JavaScriptブログになってますｗ レスポンシブ対応後の処置が、CSS覚え直しの始まりだったのと、この後も少しKotlin関連のネタを出しているところから、「ブログの方向性が変化しはじめてからちょうど一年」ぐらいになるっぽいです。 little-strange.hatenablog.com がっつりJavaScriptを使用した記事は little-strange.hatenablog.com このあたりが始まりかな。 そうか、もう一年になる…

…avaScript+CSS」の３つも同時進行になりかねない、という点があります^^; ので、ブロガーさんにはかなりオススメなんですが、上記の職場同僚の場合はちょっと迷うところですね^^; スマホで自分のプログラムを動かしたい！ この場合、Androidスマホなら、無料でPCにインストールできるAndroidStudioで始める事ができ、GooglePlayに登録しなくても、普通にmicroUSBケーブルでPCとスマホを繋いで転送する事で、作りかけのプログラムでも動作させる事が…

…です！！ 最近、 【CSS】チェックボックスの代わりにラジオボタンでも「:checked」の仕掛けは動作するか実験してみました！【実験】 - Little Strange Software 【HTML】初めてスライダー（<input type="range"/>）を使ってみました - Little Strange Software 【HTML】HTMLタグにカラーピッカーが実装されてた！ - Little Strange Software などの記事で、様々な<input>タ…

…のところ、HTMLもCSSも、改行は意味を持っておらず、あってもなくても画面上は同じ結果となります。 が、最終的に画面上に表示されるコードを見やすく改行させるために、まず変数txtの内容に改行を含めたい場合、次のような書き方ができます。 コード txt='<style>\n';txt+='.waku{\n';txt+='border:'+haba.value+'px double '+colp.value+';\n';txt+='}\n';txt+='</style>\n';…

…分だけではあるまい。CSSの本を読んでいると眠くなってくるのはかつて数学の授業で感じたあの感覚と同じなのではないだろうか。特別講演CSSをゼロから理解する。MARUINOfutureOnline eventCSSとSVGの未来2021.2/1 16:00startMARUINO future Online event運営事務局 問い合わせ 000-0000-0000 須藤 どうも！LSSです！！ 冒頭から「いきなり 何！？」って感じで失礼しました^^; （何人かはこの記事を予…

…まず、ごくごく簡単にCSSを使ったコードを書いてみます。 コード <style>.waku{border:10px double #ffaaaa;}</style><span class="waku">テストです</span> ↑のようなコードを書くと、 テストです のように表示されます。 はてなブログの場合、その後プレビューした後、HTML編集画面に戻ると、 <style><!--.waku{border:10px double #ffaaaa;}--></style><p…

…&lt;').replace(/>/g,'&gt;');}// ]]></script> 問題点は、はてなブログのテーマ 以前にも惑わされていましたが、どうも今のLSSのこのブログで使用中のテーマ、<table>タグ関連に対してCSS装飾をかけているようで、「意図した通りに表示されない」という難点を抱えておりますｗ ちょっと格闘するのに時間くいそうなので、作りかけではありますが、いったん晒してみますｗｗｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…たり。 あ、昨日のはCSSを調節するものでしたが、SVGでもいけますね！ 「〇〇を調整できるツールがあったらいいな」みたいなのはありますか？ YouTubeで名前を連呼された話ｗ 泣きながら「一緒に日本を変えよう」などと勧誘する、嘘くさい男の動画 呼ばれておりますｗ いうほど大したヤツじゃないですよｗｗｗ まじめな記事なのに爆笑ｗｗｗ プロのデザイナーである さじさん。紙ベースのデザインをされていたデザイナーから見た、WebデザインとSEOの関係性について書かれた、とっても真…

…ナメに分けた背景」をCSSでスマートに表現するには？に挑戦してみたりしています。 …これがなかなか実は難しい^^; 「こういう、って、できてるじゃないか」と思われるかもですが、↑のは決してスマートとは言えない方法でやってますｗ コードはこんな感じ <div style="position: relative; width: 300px; height: 200px;"><div style="position: absolute; top: 0px; left: 0px; b…

…いぶ経った今、改めてCSSやJavaScriptを覚え直しているLSSです。 知らないうちに、色々な機能が追加されていてビックリする事も多々ありますが（※この場合の「知らないうち」＝およそ20年ですｗ）、CSSやJavaScriptだけじゃなくHTMLも新しいタグや、既存タグの機能拡張が見受けられます。 特に<input>タグ！ 昔は「基本的には一行の入力欄。ボタンなんかにも使ったりする。」程度の認識でしたが、 スマホ時代に合わせてなのか、こんなコントロールも追加されてたりす…

…、青文字にした部分がCSSの指定で、オレンジ文字の部分が実際に表示されるタブ切り替えの部分です。 これをそれぞれ、コピーして、続けてペーストします。 この時点でほぼコード量が２倍に！ｗ そして、２つめになったほうの#がついているもの… #nkm1 とか #rdb1 とか #lb1 とかを全て末尾の数字部分を+4しました！ 例えば#nkm1は#nkm5に、#rdb3は#rdb7に、といった具合です。 （別のidであればなんでもいいのですが、指定箇所も多いので統一ルールで行いまし…

…で 横幅を広くする CSSでこのスライダーの値を利用したかった…けど無理っぽい^^; JavaScriptなら余裕！ というわけで「スライダー」の紹介でした こんなのです コード <input type="range" /> 最低限のコードでいうとこうなります。 めっちゃシンプルですねｗ 呼び名はたくさんありますね Androidにも、このコントロールはありました！ かなーり懐かしい記事ですが、Androidアプリ開発では「SeekBar」という名前がついていましたね。 HT…