読者です 読者をやめる 読者になる 読者になる

にちじょうみだれがき

役立ち情報から雑記まで幅広いジャンルを展開するブログ。

【はてなブログ】蛍光ペンでチェックしたような下線をCSSで表現する

f:id:ChihaYuu:20170406184257j:plain

蛍光ペンでチェックしたような下線

標準のアンダーライン「u」要素を弄ろうとしたけど上手くいかなかった。
視点を変えて「strong」要素をCSSで弄ったら表現できました。

設定→詳細設定→headに要素を追加に以下のコードをコピペで蛍光ペンでチェックしたような下線を実装できますよ。

<style type="text/css">
/* 蛍光ペン風に */
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:linear-gradient(to bottom, transparent 70%, rgba(252,252,50,0.8) 70%);
}
</style>

background~の所で下線の幅やら色やらを指定しているのですが、好みの色に調整するまで時間がかかりました。簡潔に色を変更する方法があると思いますが、勉強不足で実装できませんでした。

実装してみると、強調したい文を簡単に目立たせられるので便利、便利。

参考サイト

www.htmq.com

www.webcreatorbox.com

上記サイトに画像にグラデーションを重ねる応用が載っているので、勉強して使いこなせるようになりたい。おしゃれなブログ作れそうだし。

【CSS】要素の非表示はどっちを使う?display:noneとvisibility:hiddenの違い

f:id:ChihaYuu:20170405171823j:plain

CSSの要素非表示にする主な手法として、display:none;visibility:hidden;があると思いますが、この2つの違いを知らずに使用していたので、調べてまとめました。

僕はdisplay:none;を頻繁に使用しており、visibility:hidden;をあまり使ったことがありませんでしたが、違いを知ることができ、要素の表示・非表示に対する幅が広がりました。

display:none;

CSSプロパティのdisplayで指定できる値のひとつ。displayでは「inline」や「block」などの値が選べますが、詳しいことはわかりません。詳しく知りたい方は以下のサイトを参考にしてみてください。
www.htmq.com

display:noneはSEO的に「悪」だからあまり使用しないほうがいいと言われていますが、SEOとか詳しくないし便利だから僕は使う。
seopack.jp

display:none;の動作は以下の通り。


display:none;適用前
f:id:ChihaYuu:20170406135940j:plain
display:none;適用後
f:id:ChihaYuu:20170406140949j:plain

visibility:hidden;

CSSプロパティのvisibilityで指定できる値のひとつ。visibilityプロパティでは「visible(表示)」や「hidden(非表示)」を指定する。
www.htmq.com

visibility:hidden;の動作は以下の通り。


visibility:hidden;適用前
f:id:ChihaYuu:20170406141839j:plain
visibility:hidden;適用後
f:id:ChihaYuu:20170406141848j:plain

display:noneとvisibility:hiddenの違い

2つの実行結果を見ればわかるように、display:noneは要素ごと消す。visibility:hiddenは要素を非表示にするということがわかります。

ここで注意したいのがdisplay:noneでの表示・非表示の切り替え。要素ごと消す効果があるので、レイアウトが変わる場合があるので注意しましょう。

子要素の表示・非表示はdisplay:noneでは出来ないけど、visibility:hiddenでは出来る。

まとめ

今までは知識もなく、非表示になればいいとdisplay:noneばかり使用していましたが、これを気に用途ごとに使い分けるようにします。

SEO的にはdisplay:noneよりvisibility:hiddenのほうがいいのかな?

Urgod 3D VR ゴーグルが想像以上に楽しめる低価格VRだった

f:id:ChihaYuu:20170404104032j:plain


ある日、会社の先輩が大きめのゴーグルを持って出社してきて、新しい防塵ゴーグル買ったんだ~と思っていたらなんとVRらしい。

前々からVRは気になっていましたが、僕が知っているのはプレイステーションVRのみ。
値段もバカ高いので手を出せないでいました。

さっそくそのVRを先輩から奪い取り、使い方を教えてもらい装着すると・・・

おぉ・・・!!

ジェットコースターのVRをみたのですが、想像以上にリアルですね。音もあったので臨場感があり本当にジェットコースターに乗ってる感覚になりました。

ゴーグルの先端にiPhoneなどをセットして視聴するタイプで、どこでも気軽に楽しめる点はグッド。メガネをかけながらのゴーグルセットは間隔的に厳しいので、メガネユーザーにとっては・・・だと思いましたがメガネなしでも十分に見える距離なので僕は問題ありませんでした。

値段もプレイステーションVRの10分の1以下という破格の値段なので遊び用に買うのはありな商品。

続きを読む

Windows起動時に「Reboot and Select proper Boot device…」が出たときに確認するべきこと

PCケースに埃(ほこり)が目立ってきたので掃除をしたら問題発生!

Windows起動中に「Reboot and Select proper Boot device…」という画面が出てきてOSが立ち上がらないじゃまいか。Press any keyと記述されていたのでkeyを押しても同じ文章がループするだけ。

う~ん 困ったぞ。

掃除するときに掃除機突っ込んだりしてたので、ケーブルの接触具合などを確認しても問題なし。BIOSでもHDDを認識できている。

ブートする起動優先順序は・・・これだ!!

僕と同じように「Reboot and Select proper Boot device…」とでて困った人は一度以下の点を確認してみよう。

BIOSの起動

まずはBIOSの起動から。
一度パソコンをシャットダウンして起動しなおしましょう。
起動するまでの間に「F2」キーを連打すればBIOSに入れるはず。

※ご使用しているパソコンのマザーボードによってBIOSのアクセス方法は変化します。

続きを読む

和製マイケルジャクソンと称された男【三浦大知】がカッコよすぎる件

和製マイケルジャクソンと称された日本のエンターテイナー「三浦大知」がカッコよすぎる!!抜群の歌唱力と磨き抜かれた高いダンススキルが見る者を魅了します。

まだまだファン歴は4年と短いですが、魅力たっぷりの三浦大知さんを是非みなさんに知ってもらいたく記事を作成しました。

三浦大知

生誕:1987年8月24日(29歳)
出身:沖縄県

歌、ダンス共に高いスキルで自らの楽曲の振付や作詞・作曲なども行える。非常に多彩な活躍をしている。

Folderのメインボーカルとしてデビューする(9歳)
変声期を理由に一時活動を休止するが、パワーアップしてソロで復帰。

ソロデビュー曲は「Keep It Goin' On」

Keep It Goin’On

Keep It Goin’On

メディアへの露出は少なめ?

メディアへの露出は少なめな気がします。
こんなに素晴らしいエンターテイナーを推さない「avex」さんどうなってるの!?

そんな三浦大知さんがミュージックステーションに初出演した際に見せた、「アカペラシンクロダンス」は多くの視聴者を釘付けにしました。

アカペラと無音シンクロダンス

【3/4】 マツコと三浦大知とS**t Kingz (performance)

続きを読む