GooBlog編_おはら野のブログ

_この世は猫のみる夢_

2021.3.3おはら野の日記WEB【あずまや|CSSの「linear-gradient」でラインマーカーっぽいことを実現してみる/2015.3.24

2021年03月03日 | おはら野の日記(ブログ版)since:2018-02-23
2021.3.3おはら野の日記WEB【あずまや|CSSの「linear-gradient」でラインマーカーっぽいことを実現してみる/2015.3.24
午前7:09 · 2021年3月3日
**これやってみたかったんですよ。 

** あなたは△△を知ってますか!で始まるブログ記事のほとんどがネットに既出したものばかりをコピペ集めしたものなので、私はグーグルでヒットした時点で、見に行きません。そういった記事ほど半分マーカー文字列が多いので、出現したところで黙って閉じます。SEO対策は、PV稼ぎのためにグーグルの検索上位にくるようHTMLを記述することに陥ってます。
 「検索エンジン最適化」Search Engine Optimization。みんなが同じ対策をしたら目立たなくなって沈んでいくことが分からないのだろうね。SEOを売る方は、落ちこぼれていく客を見つければいいので、それはある意味楽ですよね。

カテゴリを変更するかも、です。
by龍隆2021.3.3

あずまや|CSSの「linear-gradient」でラインマーカーっぽいことを実現してみる/2015.3.24
https://azuma006.hatenablog.com/entry/2015/03/24/232309
面白いCSSを見つけたのでご紹介します。

ラインマーカーっぽいこと

いろはにほへと

閲覧しているブラウザでのCSSの対応状況にもよりますが、「いろはにほへと」の"はにほ"の部分の下半分くらいに色が付いているかと思います。

これは、CSSのbackgroundまたはbackground-imageにlinear-gradientというグラデーションを定義する指定を利用しています。
(引用終わり。あずまやさんのブログに詳しく載ってます。)

HTML文をつぎのように書きます(<>カギカッコを全角で記していますが、半角カギカッコに置き換えて記述してください)
いろ<span style="background-image: linear-gradient(transparent 50%, #ffafaf 50%); ">はにほ</span>へと
*ブログサービスで、利用できる「HTMLタグ」などの案内がありますから。調べてください。このようにgooブログは使えますね。

spanはインラインin-line要素の時に使います。行の装飾ですね。
divはDIVision。ブロックとか区分とかある塊に対して、そのブロック塊だけに当てはまる記述(装飾など)ができます。テレビジョンtelevisionなどの-visionです。

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)
sheets紙・モニターなどに表示するスタイル。滝が流れるCascadingように、スタイルを制御する
「滝が流れるCascadingように」。何段も滝が連なって在るときに、ある段の表示を前後の段と連続して記述すうるスタイルでっす。


紹介:関連するおはら野のブログ記事名orURL


 
研究者リサーチreserchMap:https://researchmap.jp/researchers(研究者氏名を入力)

《滋賀県立図書館横断検索》画面(どこかに在架あれば、最寄り図書館へ取り寄せできるサービス)
 http://cross.shiga-pref-library.jp/dog/crs/
長浜市立図書館(長浜・びわ・浅井・虎姫・湖北・高月・余呉)の簡単検索
 https://www.library.city.nagahama.shiga.jp/WebOpac/webopac/index.do?clear=1&target=adult
米原市立図書館(近江・山東)の簡単検索
新:https://www.lics-saas.nexs-service.jp/maibara/webopac/index.do?target=adult
「書籍横断検索システム」は、オンライン書店の横断検索システムです。
 http://book.tsuhankensaku.com/hon/
by龍隆2021.3.3
** ここより下は本文記事ではありません(#ハッシュタグの表示を除いて) **


最新の画像もっと見る