Web(5)ブログ完成にむけて他

Web作成は 必ず public_htmlフォルダを指定すること!

Emacsトラブルシューティング

スマートフォンの写真をブログで使用する

評価が上がるので是非やってみて欲しい。
前回も触れたが画像の転送のしかたはメールを使う方法とs4を使う方法がある。

スマートフォンで自分が撮影した画像を使用する場合、 その画像を添付して大学のメールアドレス宛てにメールを送り、 それを public_html に保存して使用する。

s4の場合ログイン後個人で掲示板を作りそこに転送する。

一部の文章や文字を強調する

評価が上がりやすいので是非チャレンジしてほしい。

一部文章や文字を強調する場合は、スタイルシートのクラス指定を行う。
このような日記を書きたい場合の中味は以下のようになる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>日記</title>
<style>
body{background-color:orange; color:brown;}
h2{background-color:pink; color:green;}
.aka{color:red;}
.ao{color:blue;} 
.daimoji {font-size:x-large;}
.naka{text-align:center;}
</style>
</head>

<body>
<h1>日記</h1>

<h2>20xx年x月x日<span class="ao">(土)</span></h2>
<p>
今日は<span class="daimoji">友達とカラオケ!</span><br>
はしゃぎすぎて<span class="daimoji aka">声が枯れた。</span>
</p>

<h2>20xx年x月x日<span class="aka">(日)</span></h2>
<p class ="naka">
昨日のカラオケで声が出ないが、バイトをどうにかこなした。
</p>
<p>
あんな無茶はもうしない。
</p>

<hr>
<p>
<a href="index.html">もどる</a>
</p>
</body>
</html>
  

<span>は特に意味がなく、スタイルシートを適用したいときに使用するタグ。
<hr>はラインを引くタグ。(終了タグはない)

フォントサイズの設定は
xx-small、x-small、medium、large、x-large、xx-large
(ちなみにこの表記は font-size:x-large; font-weight:bold; )

リンクのスタイル変更

背景色によってはリンク表示が読みにくい場合が出てくるので、 必要であればリンク表示のスタイルを変更する。例えば index.html を開き、以下赤字の部分を追加してみる。 色については見やすい色を好きなように使うと良い。

<style>
body {background-color:pink; color:navy;}
 a:link{color:green;text-decoration:underline;} 
 a:visited{color:red;text-decoration:underline;} 
 a:hover{background-color:yellow;}
</style>

解説
a:link{color:green;text-decoration:underline;} /* リンクの文字色を green にしてアンダーラインを引く*/
a:visited{color:red;text-decoration:underline;} /* 一度訪問したリンクの文字色を red にしてアンダーラインを引く */
a:hover{background-color:yellow;} /* リンクにマウスが当たっている状態の時、背景色を黄色にする */

アンダーラインが必要ないなら、 text-decoration:none; とすれば良い。 設定したときの見映え

本日の課題


トップ