大豆猫の空

気になること備忘録

htmlのソースコードをブラウザで表示したい//初心者がやってみた

 

 

くろ
htmlの解説記事を読んでるとコードがそのまま表示されてる 
どうやってるんだろ?不思議~
 
しろ

 

と思って調べてる途中で気がついてしまいました。

ブログだと編集に「見たまま」モードと「html」モードがあって切り替えるとちゃんと表示されているではないですか。

 ー了ー

 

だがしかし、そもそも仕組みに興味があるので、続行です。

参考にしたサイトはこちら▽

HTMLでコードを表示する方法【初心者向け】 | TechAcademyマガジン

 https://techacademy.jp/magazine/5711

【初心者向け】コードを表示する簡単な方法 | CodeCampus

 https://blog.codecamp.jp/programming-code-indicate-1

 

 

 

htmlのソースコードを表示する

 

エスケープする

特殊文字に指定されている文字に、割り当てられている記号を記述する。

< は &lt 、> は &gt など。 

lt=less than 、gt=greater than だそうな。

前述通り、編集モードを切り替えると確認できます。

エスケープ処理というのは結構大事みたいで、対策してないと入力フォームなどから攻撃されてしまう可能性があるという。怖っ。

参照:

HTMLで特殊文字エスケープ処理を行う方法【初心者向け】 | TechAcademyマガジン

  https://techacademy.jp/magazine/12553

  XSS(クロスサイトスクリプティング)やSQLインジェクションというものだそう。

▽こちら分かりやすかったです。

【初心者向け】SQLインジェクションの概要と対策方法 | カゴヤのサーバー研究室

 https://www.kagoya.jp/howto/network/sql-injection/

<code>~</code>で囲む

コードをその他の文字列と区別して表示できる。

 囲まれた部分は等幅フォントで表示される。

囲まれた中の特殊文字は記号(&ltなど)で置き換える(エスケープ)必要有り。

 

通常の表示 <em class="blogicon-home">HOME</em> 

codeタグ使用 <em class="blogicon-home">HOME</em>

 

囲った箇所のフォント(and/or表示)が変わっているのが分かります。

英文中にソースコード表示する場合特に有用なのかもしれません。

 

<pre>~</pre>で囲む

 

 <pre></pre>で囲むと改行やインデントの整形がそのまま表示される

エスケープの必要有り

preformatted text 書式化されたテキスト の意 

htmlでは連続したタグなどは一つにまとめられるので、改行は<br>を用いますが、<pre>タグ使用では改行・インデントなどがそのまま表示されるので、特に長いコードを表示する際など見やすくなる、とのこと。

 

長いコード、うーん、imgとかでいいんですかね。

この画像のをそのまま使ってみます。

イラスト

 これをエスケープして改行。そのまま連続して表示されてます。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/soycatblg/20210520/20210520122504.jpg" width="200" alt="イラスト" title="" class="hatena-fotolife" itemprop="image" />

 htmlに戻ると改行はなくなり連続表示に戻っています。

 

 

これを改行して<pre></pre>で囲むと

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/soycatblg/20210520/20210520122504.jpg" 
     width="200" 
     alt="イラスト" 
     title="" 
     class="hatena-fotolife" 
     itemprop="image" />

改行がそのまま表示されてます。背景色も変わっている。

ホホゥ。

 

特殊文字は他にも色々指定されてるんですね。

文字化けは分かりましたが、セキュリティーにも関係するとは、発見でした。

毎回感じますが、実際に覗いてみないと分からないことばかりです。 

 

 

TechAcademyさん、CodeCampusさん、カゴヤのサーバー研究室さん、ありがとうございました。

 

 

関連  ブログのhtml カテゴリー記事一覧



 

 

サンクコストと認知バイアス

 

投資でよく言われる「冷静に」。

つまり判断が感情に振り回されてしまうということ。

そこで紹介されている用語を調べてみました。

 

認知バイアス

直観や先入観、自らの願望やこれまでの経験、他人からの影響によって論理的な思考が妨げられ、不合理な判断や選択をしてしまう心理現象のこと。

 出典:認知バイアス|証券用語解説集|野村證券     https://www.nomura.co.jp/terms/japan/ni/A02740.html

 

コンコルド効果

埋没費用効果(サンクコスト)とも言われます。

旅客機コンコルドの開発にまつわるエピソードが由来だそうです。

すでに確定した投資費用を惜しんで、回復の見込みが無いにもかかわらず投資を継続してしまうこと。

投資に限らず様々な場面で起こり得ると考えられるので、止められない理由が「今までの金銭・労力・時間がもったいないから」というのはちょっと考え直してみるポイントなのかもしれません。

 

たしかインベスターZにも映画館でのそのようなエピソードがありました。

支払った映画の代金と鑑賞に費やす時間の価値をどう判断するのかというもの。

(そもそも映画にしろマンガにしろエンターテイメント性のあるものは、観客を惹きつけるポイントを序盤に持ってくる傾向があるので、いわゆる”つかみ”、そこで判断するのは合理的だとも言えますヌ。)

 

インベスターZ(1)

インベスターZ(1)

 

 マーケティングでも用いられているとのこと。

浪費傾向が気になる場合こういった視点を持つといいかもしれません。

 

プロスペクト理論

投資の場面では、損失が確定する事を嫌い、購入時価格より下がって損失が拡大してもそのまま保有してしまい(塩漬け)さらなるリスクを取ってしまうこと。

逆に上昇局面では下落を恐れて早めに利益確定しやすくなるなど。

 

同じ1万円でも、1万円貰って嬉しいという感情よりも、1万円失って悲しい感情をより重大に受け止めてしまう。そしてその損失を回避する行動をしてしまいがち。

と理解しています。

 

ざっくり言うと、同じ局面で、売買ポジションによって取る行動が変わっちゃうよ、人類だもの、ってことかなと。

 

 アンカリング

一番最初に接した情報、印象に残った情報を元に判断してしまうこと。

投資では「高値覚え」「安値覚え」というのがあり、以前の上昇や下落の印象が強く売買判断に影響してしまうことを言うそう。

 

身の回りで考えると、車を購入する際、オプションを付けるのもコレが関係してるんですかね。

車体の価格と比較してあまり高額に感じないというかなんというか。

 

 認知バイアスは他にも

  • 正常性バイアス:災害や事件のとき都合の悪い情報を無視し状況を過小評価
  • 確証性バイアス:先入観に基づいた情報収集で先入観を補強してしまう
  • 生存者バイアス:例えば証言は生き残った人からしか聞けず他が見逃される
  • ハロー効果:印象の良い人を信頼してしまう

参照:認知バイアス - Wikipedia

などなど。

 

多いと何十と分類を挙げてあったりするのですべて把握できてませんが。

 

 

情報収集の際、意識したい項目も含まれています。

アンカリング、確証性バイアス、ハロー効果あたりはまさに、自省も含めて。

SNSだとリプライに多様な意見が提示されやすいので参考になります。

先入観に影響されず多角的な視点を持つ、というのはディスカッションの訓練経験があると得やすいんですかね。

 

感想

脳 の ク セ が す ご い

 

人類史においては(括りがデカいですが)そういう特性の方が生存に有利だった期間が長かったってことなんですかね。

それが今の時代だと不利になってしまう場面があるのかも。

 

そういえば、何か大きな出来事があってメディアで大々的に報じられているようなとき、意外に相場がすぐ落ち着いたりする事があります。

投資家の発言とも温度差があるというか。

投資で成功している人は感情やバイアスをうまく扱えていると考えるとスゴイ。(小並感)

 アルゴリズムなのでは、というツッコミは甘んじて。

(牛歩で牛丼銘柄がスパイク、ということもありました。)

コインのイラスト

 

 

 

 関連  投資雑記 カテゴリー記事一覧

 

画像にリンクを貼り付けてみたい//初心者がやってみた

画像にリンクを貼り付けて、目的のURLやリンク先にジャンプ

というのにトライしてみたいと思います。

 

 

以前、ページ内リンクでジタバタした回はこちら▽

 

soycatblog.hatenablog.com

 

 

 前回のおさらいをば。

 <a href="目的のURLまたは#○○  ">表示されるテキスト </a>
#○○の場合は到着地点のタグにid="○○ "を。 

 

URLリンクの方法は、 ツールバーにある リンクのアイコンに目的地のURLをコピペで完了。

 

 

もっとスマートな方法ありや

というか、文字列や画像を選択した状態で リンクのアイコンをクリック 、URLをコピペすると自動でリンクできるようになっているそうな。

参考にしたサイト:はてなブログでのリンクの貼り付け方、文字や画像にリンクを埋め込む方法 - Random Life Blog

https://randamlife.hatenablog.com/entry/20190816/blog-link#

 
さっそく試してみます。

 なんだコレ、めっちゃシンプルにできる。

白状すると文字列をhtml編集で書き直したりしてましたょォゥゥゥ。

 

手動?で画像にリンク

手動で画像にリンクを貼り付ける場合は、上記の”表示されるテキスト”のところに

画像のURLを入れればいいと思われ。

 

<a href="目的のURLまたは#○○  "><img  src="~"/></a>

 試してみましたょッコラショウイチ。

 

 

 

 

Random Life Blogさん、ありがとうございました。

 

関連  ブログのhtml カテゴリー記事一覧

 

続・画像の位置、画像と文字いろいろ//初心者がやってみた

前回調べた画像と文字の配置のつづきです。

▽前回

画像の位置・画像と文字いろいろ//初心者 - 大豆猫の空

 

タグや属性が使用可・不可があるのでナンデカナ~と。

(使えなかった理由がこれだと断定はできませんが)

 

HTMLは最新がHTML5で、変更・廃止されたものがあるとのこと。

参照:

HTML5で廃止された属性|HTML5|HTML-havin' a coffee break|珈琲とウェブデザイン

https://web.havincoffee.com/html/html5/html5_b_att-disuse.html

今のところ使えていてもそのうち使えなくなっていく感じでしょうか。

 

前回で該当するのは

・hspace=""

・img align="",div align=""

・br clear=""

 

これらの代わりになるのないかな~とウロウロしました。

無かったら詰むで、しかし。

(注)素人が気ままに試してるだけなのでこれが正解かは全く不明です。ご理解のほど。

 

hspaceの代わりにpadding、margin

参照:

【HTML入門】余白の取り方(paddingとmargin)について | プログラミング教育ナビ

 黒地に白線で猫のイラストmarginを10px

paddingを20px

marginを10pxpaddingを10px

 

 

 div align="center"の代わりにdiv style="text-align: center;"

 

黒地に白線で猫のイラスト

このこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ

 

 

img align="leftまたはright"の代わりにdiv style="float:rightまたはleft;

 

黒地に白線で猫のイラスト

このこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ



 

floatとtext-alignの比較

・floatはブロック単位、text-alignは要素内の並び

・text-alignはclearによる解除不要

・div、p、h、表のセル内など余白のある部分で使用

 参照:

http://homepage.sinoffice.com/css/text-align.html|いちから始めるホームページ作成

 

 

回り込み解除 br clear=""の代わりに

・p style="clear:rightまたはboth;を解除点に入れる

・div class="clearfix"で囲む

 参照:

clear-スタイルシートリファレンス

css】floatで回り込みを解除する方法 「clear」と「clearfix」 | WEBクリエイターの部屋 https://arts-factory.net/float/

 

 

このこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ

このこねこのここのねここねここのこねこのここのねここねこ

 

 

なんとなく見つけて引っ張ってきて書いて試してるだけ なので、微妙ですが。

 が、なんとかなりました(なっていない)。

 

珈琲とウェブデザインさん、プログラミング教育ナビさん、一から始めるホームページ作成さん、HTMLクイックリファレンスさん、WEBクリエイターの部屋さん、ありがとうございました。

 

 以下、今日のぼやきです。

かなーり迷子になってました。

気になったら次々タブ増殖→読み漁る→寄り道→タブ絞り込み→ブログで実践→失敗→実践→失敗をひたすら繰り返す、という泥臭いというか効率の悪い方法なので。

 

結構初歩的な[ ” ]を忘れたり[;]忘れたり。

 未読タブがどっか不明になったり。

とは言え面白いのは面白い。

 

なにか構造物を分解し中の仕組みを覗くのに似ているかも。

 

 

画像の位置・画像と文字いろいろ//初心者がやってみた

前回は画像のサイズを指定するとどうなるのか試してみました。

soycatblog.hatenablog.com

 

 

関連していろいろと画像についての記事が出てきたので、続けて挑戦してみようと思います。気になったのは以下3点。

こちらのサイトを参考にしました。

HTMLで画像の位置を中央や左右に固定する方法|はてな記法markdownのやり方も紹介 - ぴっぴのはてなブログアフィリエイト

https://baby-chicken.hatenablog.com/entry/hatenablog-picture-html-ichikotei

 

HTMLで画像の横に文字をグルグル回り込みさせてブログ記事をオシャレにしない? - ぴっぴのはてなブログアフィリエイト

https://baby-chicken.hatenablog.com/entry/hatenablog-html-picture-mozi-mawarikomi

 

【HTML入門】画像の位置を指定してテキストを回り込ませる方法 | 侍エンジニアブログ

 https://www.sejuku.net/blog/52694

 

左右に配置

“img要素にalign属性でleftまたはrightを指定する”

 

 黒猫のイラスト

 

 

 

黒猫のイラスト

 

 

 

 

ちなみに[ align:整列 ]の意でした。

 

中央に配置

”align属性にcenterを指定しても中央に表示されない。

imgタグをdivタグで囲みalign属性にcenterを指定する。”

 

黒猫のイラスト

 

 

文字を回り込ませる

“前出の左右に寄せて画像を表示する方法にテキストを書くだけ”

 

黒猫のイラストこのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ

 

”回り込みを止めたいところに<br clear="leftまたはrightまたはall"/>を書く”

 

黒猫のイラストこのこねこのここのねここねこ
このこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ

 

”画像と文字列の間に余白を入れるにはimgタグの最後にhspace="数字"を書く”

 

黒猫のイラストこのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ

 

できました。間に余白がちゃんと入ってます。

(追記5/24:違う環境だとブラウザでは再現できてなかったりしました。追加で調べたらHTML5では見栄えに関する設定はCSS、ということになったそう。

参照:

HTML5 & CSS3 リファレンス - hspace属性 (左右の余白(廃止))

http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/hspace_attr.php?menutype=2simpll01l02l03A0

大阪教育大学」、

HTML5で廃止された属性|HTML5|HTML-havin' a coffee break|珈琲とウェブデザイン

https://web.havincoffee.com/html/html5/html5_b_att-disuse.html )

 

ぴっぴさん、侍エンジニアさん、ありがとうございました。

 

それからどこで読んだか失念したんですが、よくSEOで言われてる画像のalt属性を指定するのって、読み上げ機能で使われるので聴覚障碍の方に大事らしいっす。

指定するとき耳で聞いて画像が分かり易いようにってことも考慮したいと思いました。

画像サイズにいろいろ指定してみる//初心者がやってみた

複数の画像を横に並べて表示したいとき、どんな方法があるのか気になって調べてみました。

 

はてなブログ上では、複数の画像は横並びボタンを選択すれば自動で並べて表示してくれるのですが、他の環境だとその機能が無いことも。

 

imgタグを並べて書くと画像はPCでは並んで表示されていますが、スマホでは自動折り返しで縦並び表示されたりします。(※)

スマホでも横並びのままにしたい場合、tableタグで表を作って、と試してみます。(※)

※参照したのはこちらのサイト:

CSSやhtmlで画像を横並び2列にする方法3選(レスポンシブ対応)-マンガでわかるホームページ作成

https://csshtml.work/img-3sidebyside/

 

tableタグだと横並びで表示されるのですが、スマホ画面だと見切れていて一枚目の画像しか見えてないことがあります。

 

画像サイズはPCだとマウスでも調整できるらしいのですが。

試しにいろいろやってみようと。

画像サイズをimgタグにwidth=””でいろいろ指定してみようと思います。

 

元の画像サイズは322×320です。

 

▽普通に画像2枚挿入

白猫のイラスト黒猫のイラスト

PCプレビューでも折り返されている?

 

▽tableタグで並べてみる

f:id:soycatblg:20210520122504j:plain

f:id:soycatblg:20210520122503j:plain

 

▽width="50"

f:id:soycatblg:20210520122504j:plain

 

▽width="400"

f:id:soycatblg:20210520122503j:plain

 

▽width="50%"

"f:id:soycatblg:20210520122504j:plain""

 

▽width="100%"

f:id:soycatblg:20210520122503j:plain

 

▽width="100" height ="150"

f:id:soycatblg:20210520122504j:plain

▽他の環境だとこう見えたり

 

f:id:soycatblg:20210522114347j:plain

 

 

 


にゃんこ大活躍でした。
 

テイクさんありがとうございました。

吹き出し設定にリトライ//初心者がやってみた

 

諦めず吹き出しデザインに再挑戦しました。

これの続きの巻です。

 

soycatblog.hatenablog.com

 

紹介されている方法をいろいろ読んでみたところ、どうやらCSSに書き加える必要がある模様。

開発者向けらしい、どうしよう。

開発者向けの設定について - はてなブログ ヘルプ

 

少しビビりつつも試して見たところ、タブレットからではうまいことコピペできず。

この方法は断念しました。

 

もともと書いてあるコードを消しちゃうとヤバかったみたいなので、それをしでかさなかっただけでもGJ?。

 

 もう少し検索を続けてみるとCSS設定無しでもできそうな記事を発見。

 

HTMLのみでオケーなこの方のブログを参考にしました。

コピペして定型文に登録するだけ!見たまま編集で使える吹き出しや便利なコード集 - フジブロっ!

 

  • 画像を用意しUP、URLを取得
  • コードを定型文にコピペ
  •  注意点あり

 前回使った画像があるので、Upload。

 

黒猫のイラスト
白猫のイラスト



さっそくコピペし定型文に登録。

吹き出し背景色を選び設定、説明文などを編集しました。

 いったれっ

 

くろ
ワーイ!ワーイ!ワーイ! 
浮かれてはりますなぁ 
しろ

 何とかできました。

最初にUPした画像が1:1じゃなかったので楕円ぽくなったので修正してUPしたらきれいな円になりました。

 

にゃんこたちの活躍の場が広がります。

 

フジブロっ!さん、ありがとうございました。