忍者ブログ
物理学者(ポスドク)による日々の研究生活のメモ書きです ( python/emacs/html/Japascript/シェルスクリプト/TeX/Mac/C言語/Linux/git/tmux/R/ポケモンGO)
=ROUND(123.456, -1)

120

=ROUND(123.456, 0)

123

=ROUND(123.456, 1)

123.5

=ROUND(123.456, 2)

123.46







PR

=SUMIF(I4:I16,">0")

みたいな感じでI4からI16まで 0より大きい という条件を満たすセルの和をとれる

■ 参考 : エラー以外で合計する(SUM関数がエラーになる時)






デフォルトで使っているcheckboxの大きさが小さいと感じたので変える方法を調べてみた
今時はCSSをいじってclassと書けば、デザインが簡単にいじれるらしい
すごーい便利


■ 参考 : FORMチェックボックス-checkboxとラジオボタン-radioを、
好みの色や大きさにカスタマイズする - カラーとサイズのバリエーション







こんな感じでOK

■ 参考 : Markdown で ページ内リンク付き の 目次 を 作成 する 方法



■ 参考 : GoogleスプレッドシートでWebからデータを取得する


どこかで使うと思ってたけど、すぐに使わそうなのでメモだけ残しておく





(2023/11/01 追記)

これはすごく使える

yahooファイナンスの現在のドル円の値をとってきたりもできる

日本株の場合は
https://finance.yahoo.co.jp/quote/5020.T
のように、数字で銘柄コードを入力する

米国株の場合は日本のyahooだと配当の情報が出てこない
一方で、
https://finance.yahoo.com/quote/T/key-statistics
のように銘柄コードじゃなくて、記号で入力する

英語なので、どれが配当の情報かかわからない・・・
以下を参考に見ればOK

配当は、Forward Annual Dividend Rate を見ればいい

■ 参考 : 米国市場に株式投資するため『Yahoo Finance』の重要ワードをまとめ







<iframe name="read_iframe" id="read_iframe" src="read_iframe.html" width="1400" height="800"></iframe>
みたいな感じでhtmlにiframeを呼び出す
nameをつけること

ボタンではそのnameを使ってリロードする
<input type="button" value="reload table" onclick="frames['read_iframe'].location.reload();">
が、結局これは親のページのどこにボタンを置くかが難しくて使わなかった・・・

子のページ自身に
onclick="window.location.reload();
と書いたボタンを設置した
その方が見た目がスッキリしている


これだと、cacheに保存されている場合にページ内容が更新されないので

onclick="window.location.reload(true);

と書いた方が良い

(2022/10/24 追記)

今はこのスーパーリロードは使えないらしいので、代わりにリダイレクトを使って以下のようにするらしい

window.location.href = window.location.href








htmlのタブは貼るの疲れるから省略

サンプルコードは以下のページにあるよ

■ 参考 : CSS Tooltip





↑のtooltipだとマウスカーソルを重ねたときに表示が出るだけでマウスを動かすと消えてしまう
例えばtooltipの上にhtmlのリンクを張ったとしてもそれをクリックすることはできない

そういうときは、別のDropdownsという機能を使えば良い

■ 参考 : CSS Dropdowns











基本的にやりたいことは、aタグのhrefと同じ
クリックしたら、リンクされてるwebページに飛べる

けど、aタグじゃなくてボタンを使って「どうぞ押してください」感を出したかった・・・
(謎のこだわり)

■ 参考 : buttonタグを使ってリンクを貼ってみよう

ボタンをbuttonタグで用意して、その中にonclick="location.href='http://coffee.guhaw.com/'"とか書いておけばOK
<button onclick="location.href='http://coffee.guhaw.com/'">this is button</button>





(2022/12/09 追記)

location.hrefだと、_blankと併用はできないっぽい
併用するには, window.open() を使えばいい
<button onclick="window.open('http://coffee.guhaw.com/', '_blank')">this is button</button>









■ 参考 : クリックすると展開表示する"折りたたみメニュー"を簡単に作る方法

<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor: pointer;">▼ クリックで展開</div>


<div id="open" style="display: none; clear: both;">
ここが折りたたまれてるところ
</div>
openと書いてあるIDはそれぞれ一致したものを使う
もしこの折りたたみを1つのhtmlで何個も用意するなら、別のIDを用いること
でないと変な箇所に展開されてしまう・・・





(2021/08/10 追記)

もっと単純にdetailsとsummaryでも同じことができるはず・・・・
絶対にそのことは知ってるはずなのに、なんで↑みたいな小難しいことになってるんだろう・・・

detailsの場合はopenとつけると、最初から開かせておくこともできる。

■ 過去記事 : <details要素> - ディスクロージャーウィジェット










■ 参考 : GAS(Google Apps Sprict)でスクリプトエディタが開けない時の対処法(現在、ファイルを開くことができません)

複数のアカウントでログインしてるときにこうなるらしい
スプレッドシートの所有者のアカウントをデフォルトにする必要があるらしい

めんどくさいので、シークレットモードでブラウザを開いてスクリプトエディタを編集すればOK



chromeとかsafariであれば、shift + command + nでシークレットモードでブラウザを開ける




(↓の広告クリックしてブログの収益化に貢献オナシャス)


























■ 参考 : How to write in Markdown on Overleaf

によると、↓のように書くと、texの中でmarkdownの記法が使えるらしい
めっちゃ便利〜〜〜〜
\documentclass{article}
\usepackage{markdown}
\begin{document}
\begin{markdown}
# Grocery list

*Remember* to grab as much as we can during upcoming [sales](http://acme-marg.com)!

## Food

- baked beans
- spaghetti

## Stationery

- writing pad
- pencils
\end{markdown}
\end{document}
Or if you prefer to put your Markdown material in a *.md file:

\documentclass{article}
\usepackage{markdown}
\begin{document}
\markdownInput{example.md}
\end{document}








グーグルスプレッドシートで部分一致、完全一致した文字列の数をカウントする

■ 参考 : エクセル COUNTIF 関数:条件に一致するセルを数える
# hogeと完全一致したセルをカウントしたいとき
=COUNTIFS(B:B,"hoge")

# hogeかfooと完全一致したセルをカウントしたいとき
=COUNTIFS(B:B,"hoge")+COUNTIFS(B:B,"foo")

# ワイルドカードも使える
# hogeが入ってるセルの数を数えたいとき
=COUNTIFS(B:B,"*hoge*")

前にちょこっとgoogle spread sheetを使ったけど、改めて便利やなぁと実感
何が便利かというといちいちアプリケーションを立ち上げて何かをやり始めたりする必要がない

初動のトリガーがとても楽に引ける
なにか新しいことをやったりするときにそれは超大切







■ 前回記事 : 【GAS】htmlでの入力をgoogleスプレッドシートに流すスクリプト




前回記事ではラジオボックスを使っていた
ラジオボックスでは1つの値のみを読み取ることができる
複数の値を読み取りたいときはチェックボックスを使う

けど、これをGASに渡しても先頭の最初に読み取ったチェックボックスの値のみを出力してしまう・・・・
いろいろと調べてみたけど解決方法がわからんちん

いろいろと調べて、一番自分の疑問と同じことで悩んでた記事↓
■ 参考 : google apps scriptで簡単なwebアプリを作ってみた





ここが割とサンプルコードが載っていて参考になったかも?
一応、GASのサンプルも載ってるけど、この通りにやってできる気がしなかったのでスルー
■ 参考 : 【13】チェックボックス(随時)v2


GASのドキュメントでcheckboxで検索してみた
■ 参考 : 「checkbox」の検索結果 - Google Apps Script


それともう一つ
チェックボックスを作って何も選択されなかったときのデフォルトの値をhiddenで送ることも試したけど
こっちはwebブラウザによって先頭の値を返すのか、最後の値を返すのか挙動が違うらしい
なんということだ・・・

■ 参考 : checkboxが選択されないで送信された時の判定



役に立つかはわからんけど、javascriptでチェックボックスの処理をするときの記事があったのでメモ

■ 参考 : チェックボックスがチェックされているか取得する (JavaScript プログラミング)

■ 参考 : JavaScript チェックボックスの値を取得/設定するサンプル







今にして思えばなんかjavascriptを使ってうまいことやる方法があるような気がしてた〜〜〜
とりあえずやったことをメモしとく




html自体はテキストファイルを読み込んで、その値に応じて#FF0000とか色を16進法で指定したい

最初に見たのがこういうページ

■ 参考 : WEBカラー作成(グラデーションから選択)

https://coffeepote.tumblr.com/post/185980495773

CSSの機能である色〜ある色へのグラデーションを作れる
これを使って、その中間の色を選択できるのかなぁ〜と思ったけど
この機能はどうやら背景画像の代わりに使う用途っぽい
なのでだめ






rgb()って関数があることはなんとなく察しがついたので
赤色 rgb(255, 0, 0) からその透明度を上げて白色までグラデーションさせることを思いついた

調べてみたら透明度込みのRGBは、次のようにして指定するらしい
最後の1が透明度の値なので0から1を入れる
rgba(255, 0, 0, 1)


ただこれもだめ
というのもhtmlの背景色がそもそも白色じゃないからそっちの色が透過してしまってなんのこっちゃって感じになった


ちなみにやりたいのはこんな感じのをtableの各マスの背景色にしたい


■ 参考 : rgba() …… RGBAカラーモデルで色を指定する







■ 参考 : グラデーション配色の計算方法





結局
< td bgcolor=\"#FF0000\">なんか値<td>
みたいな感じでこれまで通り対応した

#FF0000の部分は値に応じてawkで16進法の色を用意する
color_td=`echo $some_value | awk '{if($1 > 1000){printf "#FF0000)\n"} else printf "#FF%02X%02X\n", 255-$1/1000*255, 255-$1/1000*255}'`

awkのprintfフォーマットで%xとすると16進法で書き出してくれる
%Xは大文字
%xは小文字になる

最初、printfの中の%xで0埋めしてなかったから、赤〜白にはない変な色になって焦った
%02Xで大文字かつ2桁でない場合は0埋めしてくれる

1000以上の値の場合はサチらせて赤にした

■ 参考 : 10進数<=>ASCII<=>16進数変換(bash+awk)



awkを使わなくても単にprintf "%02X" 100とかでもいける

■ 参考 : コマンドライン上で手軽に16進計算
















この記事に続き
■ 参考 : 【html/Javascript/GAS】投票フォームのあれこれ




htmlでの入力をgoogleスプレッドシートに流そう、と思い立ってあれこれと方法を調べてみました
スプレッドシートを使う利点としては、
・自分でデータベースを用意せずにデータを保存できること
・誰でも閲覧できるように設定できる、なおかつ閲覧のみにも設定できる
・csv形式で書き出すこともできるので、再活用が容易、今回の場合は将来的に使えそうなデータになるかも?
などが挙げられるかと思います

実際にじゃあどうやるのか?と思って調べてみたら簡単なコードも載ってるページがありました

■ 参考 : javascript – 単純なHTMLフォームを介してGoogleスプレッドシートに基本データを追加する

htmlに以下のようなフォームを用意する
<form id="form" method="get" action="スクリプトのURL" accept-charset="UTF-8">
<input type="text" name="newletter_name" placeholder="Name" />
<input type="text" name="newletter_email" placeholder="Email" />
<input type="submit" value="Subscribe" />
Google Apps Scriptとして以下のものを用意する
function doGet(e){
var vals=[];
vals.push(new Date());
for(var i in e.parameter){
vals.push(e.parameter[i]);
}
SpreadsheetApp.openById("スプレッドシートのID").appendRow(vals);
return ContentService.createTextOutput("added");
}
これでhtmlフォームに「name」「Email」を書いてsubscribeボタンを押すと
それがスプレッドシートに追加されます
パラメーターの個数分だけはfor文が回るのですべてスプレッドシートに追加されます





■ 作業手順
1. スプレッドシートをgoogleアカウントで作成する (スプレッドシートのURLを覚えておく)
2. 上のメニューバーからツール→スクリプト エディタ → 上記のスクリプトをコピペする
3. スクリプトに実行権限を与える(permission)
4. 表示されたスクリプトのURLをコピペして、上記のhtmlに貼り付ける

という感じ

3の実行権限のところは以下のページに画像付きで説明がある
■ 参考 : Google Apps Scriptの初回実行に必要となる承認手順

3の実行権限のところは以下のページに画像付きで説明がある
■ 参考 : Google Apps Scriptで簡単にWebアプリケーションを公開する方法





もし事前にパラメーターの名前がすべてわかっているなら、
スクリプトを以下のように置き換えてもOKです
function doGet(e){
var vals=[];
vals.push(new Date());

vals.push(e.parameter.newletter_name);
vals.push(e.parameter.newletter_email);

SpreadsheetApp.openById("スプレッドシートのID").appendRow(vals);
return ContentService.createTextOutput("added");
}
最初の new Date() はスクリプトが実行された時刻が入ります





またスプレッドシートを使ってなにかしたくなったとき用のメモ

■ 参考 : フォーム – フォームを使用してGoogleスプレッドシートの既存のデータを更新する


■ 参考 : JavaScriptを使用してHTMLフォームからGoogleスプレッドシートにデータを送信する方法


■ 参考 : GAS ビギナーが GAS を使いこなすために知るべきこと 10 選
2019年6月段階では1つのスクリプトは6分以内に終了しないといけないって制限があるけど
自分のはとても軽いから問題なさそう


■ 参考 : HTMLのフォームからGASにPOSTする
↑この人がやってることはすごくわかる・・・
スプレッドシートになにかを追加したあとに表示されるページから、すぐに投票のwebページに戻りたいのにどうしたらいいかわからない
自分は投票時に表示されるページを新しいタブorウィンドウで表示させることで対応した


■ 参考 : GASでURLを踏んでスクリプトを動作させたときにパラメータを渡す方法


■ 参考 : 3 分で作る無料の翻訳 API with Google Apps Script
Google Apps Scriptをサーバーとして使ってる
なにか情報を要求したら、それに対する応答が返ってくる
ここでは、翻訳機として使ってる
まだまだ汎用性がありそう







(2019/11/13 追記)

配列にpush()でなにか値を追加したときの挙動が気になったので調べてみた

■ 参考 : GASの配列の扱い方について(定義、要素の追加、削除)

■ shift()
配列の最初の要素を取り除き、取り除いた要素を返す

■ unshift()
配列の最初に1つ以上の要素を追加し、追加後の新しい配列の長さを返す

■ push()
配列の末尾に1つ以上の要素を追加する

■ pop()
配列の最後の要素を取り除き、取り除いた要素を返す

■ splice()
配列内の指定した位置にある古い要素を取り除きつつ、新しい要素を追加する




へぇ〜

■ 参考 : fontタグ使ってる人はもう使うのやめよう

■ 参考 : HTML5で廃止された要素

代わりにCSSを使って文字の大きさとかを指定しましょうってことらしい

これでいいのかはわからんけど
<span style="font-size:20pt; color:yellow;">hogehoge</span>
って感じかな?








天啓を得て、Google Apps Script(通称GAS)を使うことになった
GASにhtmlのformからの情報を流し込む

以前もhtmlのformは使ったことがあったので、
それをまとめた記事があると思ってたけどどこにないので改めてまとめておく




■ 参考 : ピュアな JavaScript でフォーム(form)系要素の値を取得, 設定する方法一覧

formではいろんなタイプの入力方法がある
↑のページでリストアップされているので、改めてここでは書かなくてもいいかぁ〜

inputタグで使えるものとしては以下のものがある
text
radio
checkbox
select
testarea
file
button
などなど

■ 参考 : セレクトボックスを作る

■ 参考 : ラジオボタンを作る

■ 参考 : 隠しデータを送信する
画面には表示はしないけど、入力を送ることができるhiddenとかもある
これで、ユーザーが選ぶ必要がない時刻とかの情報も送ることができる




(2019/07/02 追加)
ユーザーに複数の選択肢を選んでほしいときがあった
ラジオボタンってのは1つの選択肢しか選べないものらしい

複数選択はチェックボタン input type=”checkbox” で実装するらしい






長めの文章を入力してもらう場合は1行のみのtextでは不十分
なのでtextareaタグを使う
<textarea name="comment" cols="50" rows="5" placeholder=\"default comment or fan letter\"></textarea>
みたいな感じで、大きさを5x50にできる

■ 参考 : inputタグ、textareaタグ、selectタグ
で、これらの入力をjavascriptで受け取って何かをやる
ただし、javascriptはユーザー側のウェブブラウザで実行されるので
その後でサーバーのファイルを改変したり〜とかはできない

■ 参考 : HTMLとJavaScriptの関係とは?|呼び出し・制御方法について解説


formの入力に応じてなにか要素を追加したい場合は↓
■ 参考 : JavaScriptで要素を生成・追加する



ただ、GASの場合は、formの入力を受け取ってそれをさらに別の場所に送ったりできる
それについては次の記事でまとめる予定




(2020/02/11 追記)

ボタンを押すと、投票フォームのテキストボックスになにか指定したテキストを代入したいとき
javascriptで実装可能

■ 参考 : テキストボックスに値を設定する(getElementByIdメソッド)
<input type="text" value="red" id="text_box" maxlength="5">
<input type="button" value="ボタン" onclick="clickAddText()">
<input type="button" value="クリア" onclick="clickClearText()">
みたいな感じで箱をhtmlに用意しておく

clickAddText()
clickClearText()
はjavascriptの関数
テキストボックスにはidを設定しておく、関数内でそのidの値に代入できる
<script type="text/javascript">function clickAddText(){
document.getElementById("text_box").value = "defalut_text";
}

function clickClearText(){
document.getElementById("text_box").value = "";
}
</script>













javascriptを使えるなら、これでOK

■ 参考 : 直前に戻るリンク
<a href="javascript:history.back()">[戻る]</a>
<a href="javascript:history.go(-1)">[戻る]</a>







https://coffeepote.tumblr.com/post/181248344248/こないだ京都に行ったときの清水寺


すばらしい

tumblrのテンプレートとかテーマとかいじろうかと思ってたけどもういいやw
アルバムは全部タグで管理するとして、あとはそのタグ一覧をわかりやすく表示できればそれでOKか





テスト2

2枚画像がある場合はどうなるか?

https://coffeepote.tumblr.com/post/181247830953/野郎オブクラッシャー



前回記事
■ 参考 : 【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で出せる





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

おわり〜








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




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タグで写真を同じ行に横に並べるには










プロフィール
HN:coffee
職業:物理屋(自称)
趣味:映画鑑賞、登山
出身:大阪府の南の田舎
自己紹介:
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST

print "先月子供が産まれました!"

# 最終更新 2022/10/25
カウンター
カウンター カウンター
ブログ内検索
ツイートするボタン
リンク
相互リンク募集中です (Twitterにてお知らせください)

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

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

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

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

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

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

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

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

flickr難民の写真置き場
(20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)

教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定
(阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)

英語論文執筆用の例文検索サービス
(とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の 英語論文から,例文を検索するための検索エンジン)


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