CSS覚書

HTML WEB blog
 公開:2018-03-01 更新:2018-03-01

-目次-

(1)先頭、背景色付き大きい文字
(2)斜めストライプ
(3)1行内で右に寄せる
(4)標準フォント、イラスト風
(5)googleフォトを素材に利用
(6)特殊アイコン

(1)先頭、背景色付き大きい文字


H1 本日は晴天なり

H2 本日は晴天なり

H3 本日は晴天なり

H4 本日は晴天なり

H5 本日は晴天なり

# H1 本日は晴天なり
## H2 本日は晴天なり
### H3 本日は晴天なり
#### H4 本日は晴天なり
##### H5 本日は晴天なり

(2)斜めストライプ


本日は晴天なり

(3)1行内で右に寄せる


本日は晴天なり
晴れ

(4)標準フォント、イラスト風


tangocho.net 単語帳ネット
tangocho.net 単語帳ネット
tangocho.net 単語帳ネット
tangocho.net 単語帳ネット

本日は晴天なり start
==本日は晴天なり start==
++本日は晴天なり start++

参考サイト nxworld

</br>
</br>
    <!--jquery-->
    <script src="css/jquery_002.js"></script>
    <script src="css/jquery.js"></script>
    <script src="css/jquery_003.js"></script>
    <script src="css/top.js"></script>
</br>
</br>
</br>

(5)google フォトを素材に利用


(1)chrome拡張機能プラグインを入れる
   https://chrome.google.com/webstore/detail/google-photos-direct-link/dgnaaplaoheafdckphgmpiaodckbcafg
  ※通常、linkURLは参照できないため上記のプラグインを利用する

(2)下記にアクセス
   アーカイブ
   左クリックで直リンクがURLコピーされる
 限定公開(URL知っている人が参照可能)となっていること
※URLはGoogleフォトからではなくアルバムアーカイブからのものであるため、このURLは30日以内に期限切れになりません (参考:https://sites.google.com/site/picasaresources/Home/Picasa-FAQ/google-photos-1/how-to/how-to-get-a-link-to-a-picture)

取得したURL https://lh3.googleusercontent.com/dgCu6_cQ1vPlOSUU35ywvGnfYY7g1GnZGTrZC-LksKxEQyFmvKHLYjFPH955Pf_w4Eo4bAKfBcX7pheznaE=w1000-no-tmp.jpg

<img src="[この箇所に取得したURLを貼り付ける]" alt="" />

あああ

(6)特殊アイコン

アイコンをWebフォントとして利用可能とするプラグイン、文字を表示するようにアイコンを利用することが可能です。
利用可能アイコン一覧

 内容
 リンク

<i class="fa fa-cubes" style="font-size:1em;"></i> 内容
<i class="fa fa-external-link" style="font-size:1em;"></i>リンク

以上

次の記事 前の記事