実習ーhtmlも使いHPを装飾ー

①アイコンフォント

ブック
電話
携帯
旗
home

例題

携帯番号は090-1171-9116です

090-1171-9116です

我が家です

主なフォントのクラス
 fa-camera　  fa-book　  fa-calendar　  fa-envelope　  fa-phone　  fa-mobile　  fa-fax　  fa-home　  fa-map-marker　  fa-file-pdf-o　  fa-file-word-o　  fa-file-excel-o　  fa-file-image-o　  fa-youtube-play

②アニメーション

②-1 アニメーションアンカー

aタブ(Anchor、リンク)へマウスを乗せたときのアニメーションです。テキスト及び画像のアニメーション例です。

テキストリンクのアニメーションその1 class=”aniline”

テキストリンクのアニメーションその2 class=”aniline2″

②-2 ホバー

ホバーは画像をクリックしたときに、変化するのを楽しみます。
an alpha　　an tilt　　an scale
を　高度な設定の追加CSSに書き込みます。

リストアイコン　ul.lstfont1, ul.lstfont2

• ああああああ
• いいいいいい
• うううううう

<ul class=”lstfont4 wp-block-list”><li>あああああ</li><li>いいいいい</li><li>ううううう</li></ul>

• あああああ
• いいいいい
• ううううう

<ul class=”lstfont3 wp-block-list”><li>あああああ</li><li>いいいいい</li><li>ううううう</li></ul>

• あああああ
• いいいいい
• ううううう

<ul class=”lstfont2 wp-block-list”><li>あああああ</li><li>いいいいい</li><li>ううううう</li></ul>

• あああああ
• いいいいい
• ううううう

ドロップキャップを入れる

①下記のstyleをカスタムHTMLに入れる

<style>

/*dropcap*/

p.dropcap:first-letter {/*疑似要素first-letter*/

  font-size:2.5em; float:left; line-height:1em; padding:0.1em 0.2em 0 0;}
</style>

<style>
.big-text {

    font-size: 3em; /* 文字の大きさを調整 */

    font-weight: bold; /* 必要であれば太字に */

    line-height: 1; /* 行の高さを調整して、前後の行と重ならないように */

    margin-right: 0.1em; /* 後ろの文字との間隔を調整 */

}

</style>

②右の設定のところで、高度な設定の追加CSSに　[dropcap]　と入れる。

知らぬ土地を訪れても、ただ景色を眺め感動するだけではつまらない.短い時間でも共有する話題、共有する感動を口に出してみる。自分の住んでいる地域との比較も時にはいいものです。そんな流れが不思議と他人との距離を狭めることでしょう。景色以外にも楽しみ方はいっぱいあるはずです。
その土地の特色を持つお料理を食べてみる。誰にでもはなしかけてみる。方言にも耳をかたむける。八百屋を覗くとその土地の特産物がわかる。

函館市は北海道南端の渡島半島南東部に位置し、天然の良港である函館港によって 北海道と本州を結ぶ交通結節点、道南の中心都市として発展してきました。2016年3月26日に開業した 北海道新幹線の函館や北海道各地への乗り換え駅となるのが終点・新函館北斗駅です。函館駅までは約18Kmの 距離で、アクセス列車は「はこだてライナー」を利用します。 毎年500万人近い観光客が訪れる観光都市です。室町時代、津軽の豪商河野政通が湾の端に館を築き 形が箱に似ていることから「函館」と呼ばれるようになりました

見出しを装飾する

下記の<style>をカスタムHTMLに入力する

<style>
.hbottom, .htop, .hleft2{position:relative;}
.hbottom:after {
bottom:-3px;
content: “”;
height:4px;
left:0;
position:absolute;
width:65px;
background:#00A0B0 none repeat scroll 0 0;
}
.hleft {padding-left:5px; border-left:7px solid #00A0B0;}
.hleft2 {padding-left:5px; border-left: 7px solid #00A0B0;}
.hleft2::before {
position: absolute;
left:-7px;
bottom: 0;
content: “”;
width: 7px;
height: 50%;
background-color:#F5DF4D;
}
.htop:before {
content: “”;
height:2px;
left:0;
position: absolute;
top:-3px;
width:30px;
background: #00A0B0 none repeat scroll 0 0;
}
.hleft {border-left:7px solid red;}
</style>

①パソコン楽しみ隊のホームを参考に、見出し(H2)でやってみます。

新着情報

新着情報は新の下に装飾ラインが入っています。その場合は高度な設定の追加CSSに「hbottom」と入れる。

市民ICT講座

市民ICT講座は市の左側に装飾ラインが入っています。その場合は高度な設定の追加CSSに「hleft」と入れる。

その他

パソ隊では使っていないが、上に装飾ラインを入れる場合は、高度な設定の追加追加CSSに「htop」といれる。