忍者ブログ
日々の研究生活のメモ書きなど
前回記事
■ 参考 : 【html/CSS】勉強し直しメモ 1日目




■ リンク
a要素のタグで囲って、href属性を付与すれば良い

↑のリンクの場合は、次のような感じ
<a href="http://coffee.guhaw.com/Entry/758/" title="" target=_blank><span style="color: #0000ff; font-size: large;">■ 参考 : 【html/CSS】勉強し直しメモ 1日目</span></a>
a要素にはtarget属性も指定できる
これで、リンク先を新しいウィンドウやタブで開くなどの指定ができる
target=_blankとすると、リンク先は新しいウィンドウまたはタブで表示される
target=_selfとすると、リンク先は現在のウィンドウまたはタブで表示される
target=_parentとすると、リンク先を現在のウィンドウまたはタブで表示される、ただiframeとかを使ってる場合は動作が異なる

a要素は基本的にhrefとtargetのみ


ページ内リンクを貼りたいときは、
■ 参考 : 【html】ページ内リンク, 他のページのページ途中にリンクを貼る方法



■ ルビ
使わない


■ 色の指定方法
black, white, blueなどの英語での指定方法の他に
#ff0000などの2桁の16進法表記をすることもできる

これを2桁ではなくて1桁にして #f00 と書くこともできる
他には rgb(255, 0, 0)

CSS3では、これ以外に透明度を表す要素を追加して
rgba(255, 0, 0, 0.5)
という表記もできる
0.5が透明度を表す、0は完全に透明、1は透過なし

参考例 :
h1 {
color: white;
background-color: black;
opacity: 0.5;
}
■ フォントサイズ
font-size、line-heightなどがある
font-sizeは直接値を10pxとかで指定する以外にも、smaller, largerなど親要素のフォントに対して相対的に指定することもできる

xx-small, x-small, small, medium, large, x-large, xx-large
などで指定することもできる、大きさはブラウザ依存

line-heightは行間を指定できる
150%では重なってしまうので注意
body {
font-size: 10px;
line-height: 150%;
}
h1 {
font-size: 30px;
}
font-family:
でフォントの選択肢を追加できる
実際に選ばれるのは閲覧者がインストールしているフォントのうち、一番左のもの
フォントは" "でくくったほうがいい




■ ベンダープレフィックス
テキストだけに限った話ではないけど・・・・
CSSのレベルが変わると新しい機能が追加される、このときまだ最終版ではない機能を使いたいときはこのベンダープレフィックスを指定する必要がある
Chrome, safariでは-webkit-
Firefoxでは-moz-
IEでは-ms-
Operaでは-o-

なんで全部のブラウザで違うんじゃああああああ



■ CSSの設定

*
.
#などの違いについては以下の記事にまとめた

■ 参考 : 【CSS】idとclassの違い



■ 擬似クラス
ある要素が特定の状態のときに限定して適用できるセレクタ
リンクを貼るのに使うa要素が一番わかりやすい
a要素の設定はこんな感じ
指定する順番が重要になる
a:link { color: #FFFBFB; }
a:visited { color: #FFFBFB; }
a:hover { color: #ff0000; }
a:active { color: #ff8000; }

■ 優先度
ある要素に関する設定が複数あった場合は後ろにある方が優先される







■ 画像関連

img要素 :
画像をwebページに組み込むための要素
PNG、JPEG、GIFなど

画像のURLをsrc属性で指定する

alt属性は画像が正しく表示できない場合に画像の代わりに表示するテキストを指定する

title属性は画像の上にカーソルをマウスオーバーしたときに表示される小さい箱に表示される
いるのかは知らんけど、とりあえずつけとく

width属性は表示する画像の幅を指定できる
height属性は表示する画像の高さを指定できる
どっちか1個でいい

■ 参考 : 【html】サムネイルのサイズを変更する方法






■ ボックス

■ margin関連
ボックスの余白を指定できる
ボックスが複数連続している場合、上下のmargin設定は最大値のもののみが有効になって重なり合う
margin-top
margin-bottom
margin-left
margin-right
margin (これで上記4つを一気に変更できる)


■ padding関連
ボックスの外側の余白はmarginで指定する
ボックスの内側の余白はpaddingで指定する
padding-top
padding-bottom
pa....
padding


■ border関連
かなりたくさんあるので省略
ボックスの周りを囲む線の種類や色、太さなどを指定できる


■ 幅、高さ
width
height
min-width
max-width
min-height
max-height

minとmaxについてはnoneとかも設定できる




■ float
ある要素を左または右に配置して、他の要素をその反対側に回り込むように配置することをfloatという
float: left
float: right
float: none
が設定できる
noneは特に何も設定してない状態

floatに設定したら、途中で解除しないといけない
clear: right;
とかすればいいらしい


■ 2段組みレイアウト
このfloatをつかって、htmlページを左右2つに分けることができる
#main{
float: right;
width: 200px;
}

#sub{
float: left;
width: 100px;
}

footer{
clear: both;
}
みたいな感じ
色も指定できる
ここではmainとsubというidを使って別々に指定大きさを指定してる

一番下のfooterは回り込みの設定を解除してる
これがないと左にあるsubのボックスの下だけにfooterが表示されてしまうので





■ 箇条書き
ul :番号はなくて中黒でリストする
ol :通し番号でリストする

li : ulかolの中身はliでリストする







区切り線はhrで出せる





他にもフォームとかあったけど今回は使わないのでパス

おわり〜








PR
そもそもなんかの本を読んできちんと勉強したことないことがない気がするので、勉強し直しは間違いな気もする・・・




htmlとCSSのことを一から勉強するのにいろいろと教科書を当たってみて、
 よくわかるHTML5+CSS3の教科書
という本が一番自分にはわかりやすかった

■ 参考 : よくわかるHTML5+CSS3の教科書【第2版】 | マイナビブックス

この本を読んで大事だと思うところを自分なりにまとめておきます

この本に載ってるhtmlサンプルはすべてウェブにアップロードされてて
URLは↑の公式ページから辿れる






■ html :
それぞれの部分がなんの役割かをタグを使って書いたテキストファイル
HTML5ではタグは約100種類ある、逆に100種類しかないとも言える

■ CSS:
タグで示した範囲の表示方法を指定できる、例えば文字色、背景色、文字サイズなどなど
使える機能は閲覧するWebブラウザによって異なる、サポートされてないと使えない


CSSのソースコードはhtmlに直書きすると汎用性が減るので独立させたほうがいい
なにか大きな修正を加えた痛い時に、CSSを置き換えるだけで済むから楽


■ タグ周りの名称
開始タグ、要素内容、終了タグ
終了タグは開始タグはに/を付ける

タグには属性を付与できる
id="hoge"
みたいに

以前別の記事にidとclassの違いをまとめた

■ 参考 : 【CSS】idとclassの違い

あとこのあと思い出したけど、classではなくてidを使わないといけない場合もある
↓に書いたみたいに、ページ内リンクを貼りたいとき
■ 参考 : 【html】ページ内リンク, 他のページのページ途中にリンクを貼る方法

属性を付ける順番は順不同
半角スペースで区切って並べる



■ コメントの書き方
htmlは
<!-- ここがコメント -->
ハイフンの数は2個
それ以上並べるとトラブルになりかねない

CSSのコメントはC言語と同じ
//
または
/* */



■ htmlのversionについて
HTML 4.01が1999年に完成/公開
Strict, Transitional, Framesetなどのいくつかの細かい種類がある

XHTML1.0が2000年に完成/公開
これも同じように3つの種類がある

HTML5 が今進行中(この本は2012年の本なのでその後はわからない)

この本ではHTML5について勉強できる



■ CSSのversionについて
CSSではversionではなくてレベルという表現を使う
基本的に古いレベルの仕様は今でも使える
レベルは
CSS1 => CSS2 => CSS2.1 => CSS3
の4つがある

まだCSS3の仕様は完全に決まっていないので
webブラウザによっては対応していない機能もある

「すべてのwebブラウザで同じように見えなくてもいい」という考え方がCSSでは大事らしい
最低でもCSS2.1で見えるように作っておいて、CSS3で対応しているwebブラウザで見た場合は
もっときれいに見えるようにしておけばいい
この考え方をプログレッシブ・エンハンスメントという




■ htmlの全体構造
htmlソースの一番上には宣言を書く
<!DOCTYPE html>
<html>
<head>
<meta charset"utf=8">
<title>ここにタイトルを書く</title>
</head>
<body>


</body>
</html>
(htmlコードにhtmlコードを書くのくっそめんどくさいのに全部書くの!?!?!?!)

一番上のhtmlの宣言は仕様によって変わるが、html5ではこれでOK
html4.01とか各細かいversionによってここは変わる

宣言の後にhtmlタグを書く、すべての内容はこの中に入れる

headの中にwebページに関する情報を入れる
titleの内容はwebブラウザのタブに表示される
CSSファイルのURLやjavascriptファイルのURLもあるならここに書く

meta要素は終了タグはなくて、開始タグのみ
少し特殊

CSSファイルは複数読み込ませることもできる
<head>
<meta charset"utf=8">
<title>ここにタイトルを書く</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
みたいな感じ

bodyの中にwebページの本体を書く


■ style要素
CSSファイルを用意しなくてもhtmlに直書きすることもできる
<head>
<meta charset"utf=8">
<title>ここにタイトルを書く</title>
<style>
h1 {color: white;}
</head>
あとはhtmlの各タグにstyle属性を付与することもできる
<h1 style="color: white;">

■ グローバル属性

id : 要素に固有の名前をつけるときに使う
CSSでその要素だけの表示指定をする場合、ページ内リンクをする場合など
id属性はページ内の特定の場所を示すのに使うので1ページ1回のみ使う


class :
要素の種類を指定できる
なので、ページ内に複数回搭乗しても問題ない
同じ要素に複数のclass属性を付与することもできる


title : 要素に対して、補足的な説明を付け加える
マウスオーバーしたときに小さく表示される文章を指定できる


lang : 言語を指定する、jaとかenとか



■ CSSで色を指定する
background-colorというプロパティをCSSで指定すればいい
black, red, blueなどの名称が使える
transparentとか
body{background: pink; }
とCSSファイルを用意するor styleタグの中に書けばOK


■ 背景に画像を貼り付ける
これはやらんかな・・・



■ テキスト関連の要素
1. ブロックレベル要素
2. インライン要素
3. その他の要素に分けられる


■ ブロックレベル要素
h1~h6など、かたまりを指定する要素

hgroupで見出しをグループ化できる

p要素で、段落を表せる

blockquoteは引用文であることを示す

pre要素は整形済テキストであることを示す
ソースコードなどを示す場合に使う

div要素はこの中身がブロックレベル要素であることを示す
要するにこれで囲んで、その中身に一気に属性を付与するのによく使われる
これを使わなくても良い、専用のタグを使える場合はそちらを使う方がいい



■ インライン要素
br : 改行
em : 強調できる
strong : 強調できる、emとは少し違う
q : 引用文であることを示す、blockquoteとの違いは1行か複数行か
cite : 引用する場合に使う
code : ソースコードであることを示す
<pre><code>hogehoge</code></pre>
small : 小さい文字で表すときはこれを使う、著作権とか注意書きなど
span : div要素の1行版



■ あまり使わないインライン要素
abbr : 略語であることを示す
dfn : 定義?
sup : 上付き文字
sub : 下付き文字、これらはどこかで使うことがあるかも・・・
i : イタリックで表示させたい時
b : 太字にする
mark : 注目してほしいときにこれを使う



長くなりすぎたのでここで分ける














百聞は一見にしかず

■ 参考 : CSSだけでサイドバーを固定・スクロール追従する方法(JavaScript不要)

下にスクロールすると左にあるサイドバーがある場所で固定される
これをやりたい!!!




どうやるかは↑のページに書いてあるのでそれを参考にすればOK
一番大事な要素はCSSでclassを設定して、その中で position: sticky; とすれば良い


■ 参考 : position: stickyの面白い使い方と使用時の注意点



■ 参考 : JavaScript不要!スクロールに応じて要素を固定するCSS「position:sticky;」の使い方







(2018/08/03 追記)

このstickyで固定したh2タグに同時にidをつけてページ内リンクをしたけど、ページ内リンクが飛ばなかった
実際は下側にはリンクを移動できるけど、上側にはページを移動できない

しょうがないので p要素を追加して、そこにid属性をつけてページ内リンクをすることで解決した









最近、htmlのことをいろいろと勉強している(君、物理屋だよね?)

htmlのコードの中で
divを使ってグループ化をする=> CSSでグループに属性をつける
という流れが多い

本によってはidとclassの属性どちらを付けるかが割と割れてる

↓にそのまま書かれてた
■ 参考 : CSSの記述方法 -idとclassの違い





id : 1ページで1回しか使えない
使い所はcontent, container, footer, sidebarとか明らかに1つのページに1つしかないものに使うべきか

class : 1ページ内で何度も使える
「1ページで1度しか使用できない名前を複数使ってしまった場合(id="name"という記述が複数になった場合)、一部のアクセス解析やその他 cgiプログラムなどで不具合を起こしてしまうこともあるようです。ブラウザ上ではid名が重複していてもCSSの指定は反映されますが、リスクを考えて慎重に使うようにしましょう。」とのこと


この違いを知ると、idを使う利点がほぼないように感じるが・・・・




ちなみにidの設定をするときCSSでは
#hoge_id {foo : AAA; }
と#から始める

classの設定をする時CSSでは
.hoge_clas {bar : BBB;}
のように.から始める





あと本によって見かけたのは
div#hoge_id {foo : AAA;}
と頭にdivがついている設定方法

これについては↓に詳しく書かれていた
■ 参考 : CSS divのidとclass、#と.って。初歩の確認事項

#hoge_id {foo : AAA; }
.hoge_clas {bar : BBB;}
という書き方は
*#hoge_id {foo : AAA; }
*.hoge_clas {bar : BBB;}
のようにアスタリスクを省略した書き方
div#hoge_id {foo : AAA;}
はきちんと特定の要素にのみこの設定させると書いているらしい



基本的に.で設定するclassのみを使っていこうと思う








ずっとタグを貼ればいいと思ってたけど、名称を間違って覚えてた
正しくはidというらしい

■ 参考 : 同じページ内にリンクする

まずはページにidを設定する
今回はhogehogeと名付けておいた
<h3 id="hogehoge">ページ内のリンク先<h3>

ここへのリンクは、通常のリンクの書き方と同じようにしてリンク先を # + id で書けばいいだけ
<a href="#abc">ABCの位置へジャンプ</a>

ページ外へのリンクも同じようにしてidを使う
ここをクリックすると8年前の過去記事の途中に飛べる


書き方は 通常のリンク + # + id
<a href="http://coffee.guhaw.com/Entry/3/#hogehoge">ここをクリックすると別のページの途中に飛べる</a>








今回は、もうめんどくさくなって画像をペタペタ貼り付けただけだけど綺麗に並べる方法もある
今後のためにリンクをメモしとく

tableを使う方法は簡単に隙間の調整ができるので便利そう

あとは
<div style="float:left; margin: 20px;">
<img src="画像のURL"/>
</div>
って感じで、margineを設定するのも便利そう

■ 参考 : HTMLで画像を横並びにする方法





(2018/06/24 追記)

tableを使う場合のイメージを簡単につかめるwebページがあった
■ 参考 : テーブルタグ作成ツール

■ 参考 : HTMLタグで写真を同じ行に横に並べるには











&nbsp; 半角スペース
&nnsp; 半角スペース&nbsp;よりも広い空白
&emsp; &nbsp;よりも2倍広い空白を入れられる
&thinsp; で細い空白文字を入れられる

連続して並べれば、自分の欲しいスペースが得られるはず
texのhspaceとかvspaceみたいなのがあればいいんだが・・・







おまけ

& は &amp;
> は &gt;
< は &lt;






どこに入れたらいいか分からないからとりあえずhtmlのカテゴリーに入れとく・・・・

以前、Dの字で使うだろうと思って、ブックマークしとおいたが使うことがなかったので
この機会に記事に残してメモしておく


■ 外部リンク : 【無料・フリーソフト】フローチャート作成ツール「draw.io」とは?


■ 外部リンク : draw.ioの使い方【概要・導入編】(無料図面作成ツール)


■ 外部リンク : 無料で説明図を作るならドローツール「draw.io」に敵うものはないかも


実際に使うところまでは行かなかったので使い心地とかは不明



使ったことがあるのはdot言語
これはフローチャート専用って感じではないので、曲線になったりして不便だった・・・

■ 参考 : 【dot言語】フローチャートを1つ書いてみた











忍者ブログに付いてるアクセス解析をこれまで使ってきた
アクセスしているIPやドメイン、アクセス回数などはわかるけど
どういう検索ワードで検索してうちに飛んで来たのかが少し前に分からなくなってしまった

調べてみたらgoogleの仕様変更によるものらしい

で、別の方法としてgoogleアナリティクスを使い始めた
初日はアナリティクスのページが英語をカタカナに置き換えただけの陳腐なものに見えていたが
数日放っておいたらアクセス数が溜まって、色々と面白いものが兆候が見えてきた

自分のブログ記事のうちどの記事へのアクセス数がいくらとか、
そのページを開いていた時間とかその後直帰したかどうかとか、
現在のアクティブアクセス数がいくらとかがわかるらしい

すげぇ〜・・・




さらに1週間ほど寝かせてみた
記事へのアクセス数の多い順に並べてみるとこんな感じ(もっと詳細に見れるけどそこはカットで)

ページ別




アクセス数が多い記事を少しだけピックアップしてみると、

■ 過去記事 : 【gnuplot】グラフの任意の場所に点や直線を描きたい

このブログで一番アクセス数が多い記事
謎・・・


■ 過去記事 : 【シェルスクリプト】小数点以下を切り捨てたい

もっと謎
シェルスクリプトの小数点を消したい人って結構いるんだな・・・
この記事は完全に備忘録用だぞ・・・
もっと上位にHITする記事がある気もするけど


■ 過去記事 : 【gnuplot】sin波を書いたときの横軸をpiにしたい

これは他のページがなかったから自分で検索して記事にしたけど、
そんなに需要があるとは思わなかったヨ・・・


■ 過去記事 : 【TeX】目次をsubsubsectionまで書く方法

これも同じ内容を書いてる記事は山ほどあると思うけど、アクセス数が多いのはおそらく記事タイトルのせい
「〜〜〜がウザい」「〜〜〜〜がだるい」現代っ子はそうやって検索するし(知らんけど)


■ 過去記事 : 【gnuplot】labelに文字をつけたheat mapを書きたい

これはdemoかどこかで見たheat mapを元に自分の研究のために作成した図が
あまりにいい出来だった気がしたのでまとめたくなった記事
まだ改良の余地はあるけどまぁいいや・・・






gnuplotの記事が3つもトップ5に入っていて少し嬉しいわ・・・

あともっとアクセス数が小さい方まで見ていくと、ポケモンGOに関する記事(特にGPSレシーバー)に関する記事が見られててびっくりした
しかもページ滞在時間が20分くらいで熟読しすぎw

今も現役で使ってると書きたいけど、それは別に記事にまとめたい(ただの希望)








Markdownに最近ハマっている
エディターとしてはMacdownというのをおすすめされて使っているが、なかなか使いやすい・・・・
TeXShopみたいに、エディターとビューワーが同時に表示されて、リアルタイムで更新されていくのでかなりわかりやすい




さっきMacdownの設定画面をたまたま眺めていたら、気づいたことがある
1. 実はこれTeX表記が使える
2. Markdownの便利機能のひとつであるTable Of Contents(TOC、つまり目次)が使える
今まで[TOC]って文章の頭の方に書いてもうまくいかねーMacdownくそ〜とか思ってたけど、見逃してただけだった

MacDown設定2
(2016/4/27 追記)
あとでオフラインのときにMarkdownを書いていて、文章が出力されないトラブルが起こった
よくよくこのTeX表記を使える設定を見ていると「requires Internet connection」と書いてある
おいおい・・・
そりゃねーぜとっつぁん




1つ気づいたMacdownの不味いところもある
・MacdownのFile->Export->pdfとして出力すると、画像がページにまたがったり、かなり切れ目の悪いところで改ページされることがある
(TeXでもMarcdownでも図には悩まされる続けるのね・・・)

解決方法は簡単でMacの方の出力機能を使う
command+Pを押して、印刷画面を開く
印刷画面からpdfとして出力する方法

ここで左下のPDFを押せば良い

そうしたら、Macさんが画像の境目もきっちり判断してPDF出力してくれるので綺麗








最近Markdownを使うことにハマっている
Evernoteよりもお手軽かつ、アップロードの容量などを気にしなくてもよいので便利・・・
TeXほど、とはいかないものの綺麗に整形してくれる

いい・・・・

今はMarkdownのエディターはMacDownを使っているが、これをMacのQuickLook(ファイルにカーソルを合わせてスペースキー)では中身が見れない・・・

そこでプラグインを入れて、きちんと中身が見れるようにしたい




toland/qlmarkdown - GitHub 下のほうにあるLatestというダウンロードページからzipを落としてくる

解答する
sudo cp -r QLMarkdown.qlgenerator /Library/QuickLook/
でおk

■ 参考 : 【Mac】QuickLookにMarkdownを表示する



こんな感じになるはず
after






基本的に
# section1
## section 2
### section 3
みたいな感じで#でsectionを分ける

あとは箇条書きが何種類もある
-
*
+
これを入れ子にして使う事もできる
1.
2.
3.
のようなリストも可能
1.
2.
2.
のように同じ数字が続いてもなぜかきちんとしたリストになる
文字の後に半角スペースが大事なので注意


たぶん使わないと思うけど罫線も引ける
***
* * *
*****
---
- - -
ソースコードに改行を入れても、出力される文章では改行されない
そこで文章の途中で改行したいときは、
hoge
foo
のように(見てもわかりにくいが)
hogeの後に半角2つを並べると、hogeのあとで改行される


あとリンクもできる
[hogehoge](http://hogehoge.com)
画像のリンクを貼付ける場合
![](hoge.png)
本文中にアンダーバーを付けると、うまく表示されないので
そのままアンダーバーを表示する場合は \_ とする


他にも
`hoge_foo.txt`
のようにバッククオートで囲むことで、コードを中に書く事ができる


イタリックを表示したいときは、
**hoge**
_foo_
ボールドを表示したいときは、
**hoge**
__foo__
文字に色を付けたいときはhtmlのコードを直打ちすればいいらしいけど、それではMarkdownの良さがなくなるので


「Markdown シンタックス」とかでググると出てくるがいろいろな言語に対応している
``` shell
ls
```
のようにバッククオート3つのあとに、シンタックスルールを書く
どういうのがあるのかは知らぬ
バッククオートの前後に空行を入れないとうまく動かないことがある


■ 表の書き方
| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
|AAA|BBB|CCC|
|hoge|foo|bar|
基本的にcenter以外使わないならこれでOK
| Left align | Right align | Center align |
|:------------:|:------------:|:------------:|
|AAA|BBB|CCC|
|hoge|foo|bar|


■ コメントアウト
[](
ここがコメントアウトされる
)

複数行の場合は
[](
複数行のときは\
改行直前に\
バックスラッシュがないと\
ダメっぽい
)
と書いてあるところがあったけど、自分の環境ではバックスラッシュがなくてもコメントアウトできるのだが・・・・ 謎

<!---
コメント
-->
のようにHTMLの書き方でもコメントアウトできる





<body bgcolor="#2E2E2E">
と書いておく

このとき、黒色の文字が見えなくなるので、文字の色を白っぽくにする必要がある
<font color="#FFFBFB"> hogehoge </font>

でOK




また、同時にHTMLリンクの色も青色のままでは見にくいので変更する
<style type="text/css">
a:link { color: #FFFBFB; }
a:visited { color: #000080; }
a:hover { color: #ff0000; }
a:active { color: #ff8000; }
</style>
とhead,titleのあとに書いておく
色は適当に変更する





研究室の個人ホームページを色々と一新した
私の名前や所属する研究室をご存知の方はぜひアクセスしてみて欲しい

■ 参考
移転先へ自動移動(転送/リダイレクト)させる方法

HTMLページによるリフレッシュ(Refresh)


転送するのに待機する秒数を0にすれば、すぐに新しいページに転送される


これを個人のホームページでは使っている
実際に閲覧しているhtmlソースはすべて ~/hoge/web_source以下 にある
これによって、トップページの~/hoge/index.htmlと~/hoge/web_sourceを引っ越せば、それだけで全体の引っ越しが完了できる







原寸大で表示するとこうなる↓

[img src="http://file.coffee.guhaw.com/819966891.jpg" alt="" style="" /]
※htmlで勝手にタグだと認識されるのでわざと [ と ] で書いています

余裕ではみ出るのでなんとかしたい
そこでサムネイルの大きさをこっちでいじってみる






[a href="http://file.coffee.guhaw.com/819966891.jpg"][img src="http://file.coffee.guhaw.com/819966891.jpg" border="" width="200" /][/a]



[a href="http://file.coffee.guhaw.com/819966891.jpg"][img src="http://file.coffee.guhaw.com/819966891.jpg" border="" height="200" /][/a]



widthで指定するか、heightで指定するか
もしくは両方とも指定しても良いが、その場合は縦横比も自分が指定したものになってしまうので注意が必要
(widthのみ、もしくはheightのみだと縦横比は維持される)










今まではfieldsetを使ってました
なんとなく背景色を付けたいと思い、divを使うことにします。


■参考サイト
ブログの文章の一部をいろいろな枠で囲むHTMLタグ。

HTML,CSS ホームページの背景色や文字色
備忘録メモ

上にある「編集」をクリック
 ↓
ページが書かれているテキストエリアをすべて削除
 ↓
「ページの更新」
 ↓
「xxx を削除しました」と表示されればオーケー
 ↓
これでrecent deletedに追加されてれば成功
なんでだろう・・・
色を付けることしか書いてないぞ・・・


<a href="[リンク先のURL]" style="color:blue" > リンク先の名前 </a >


って打つとこんな感じになります

ブログのトップ

てすとー


↑htmlで<fieldset >というのを使いました。

時間ができたらbashターミナルでのlsの色の付け方、個別の色の設定についてまとめます。




































ここがリンク先





HOME |
プロフィール
HN:coffee
職業:物理屋(自称)
趣味:映画鑑賞、登山
出身:大阪府の南の田舎
自己紹介:
#include <stdio.h>
#include "MyProfile.h"

#define TWITTER coffee_pote

#ifdef RICH_FLAG
// ↑いつも支援いただきありがとうございます m(_ _)m
#define WISH_LIST
amazonのほしい物リスト
#endif


int main(void){

printf("\n");
printf("あけましておめでとうございます\n");
printf("今年もどうぞよろしくお願いします\n");
printf("\n");
printf("猿でもわかるgnuplot を執筆中\\
少し追記しました\n");
/* 最終更新 2018/01/01 */
return 0;

}
カウンター
ブログ内検索
ツイートするボタン
リンク
相互リンク募集中です (Twitterにてお知らせください)

Demo scripts for gnuplot version 5
(gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)

gnuplotスクリプトの解説
(米澤進吾さんの個人ページ、gnuplotと言えばこのかた)

gnuplot のページ
(Takeno Lab、うちのブログがリンクされていたのでリンク返し)

とある物理の院生日誌~院生は社会へ旅立った~
(研究室の先輩の個人ブログ)

英語例文を見て自然に英語・英会話を学ぶ
(楠本慶ニさんの個人ページ、様々な情報の密度の高さに感動)

Twitterから映画の評価が分かる & 映画の鑑賞記録が残せる coco
(映画の感想をまとめられるサイト、いつもお世話になっています)

Astronomy Picture of the Day Archive
(天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)

今日のほしぞら
(任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)

GNUPLOTとアニメーション
(応用の項目の「見せてあげよう!ラピュタの雷を!!」あたりからすごすぎる)

読書メーター
(読んだ本をリストできる便利なサイト)

Flickr

Template "simple02" by Emile*Emilie
忍者ブログ [PR]