この広告は、90日以上更新していないブログに表示しています。
こんにちは。
ブログ初心者のみなです。今日はTOEICの勉強をしようと思いカフェにきたのですが、
気が乗らず、前々から気になっていたブログのデザインについて少し勉強してみました。
Googleで検索してみたところ、簡単にデザインを作成するには、CSSを編集して〜という内容がちらほらあり、これなら私にもできるかも!と思いましたが、、、
サンプルページ、デベロッパーツール、などなど、わからない単語ばかり、、
英語勉強してきたのに、悔しい😭と思いながらも格闘して、、
CSS意味だけは何となく理解しました。
こちらのサイトを参考にしましたよ。
CSSとは?-CSSの基本
CSSとはウェブページのスタイルを指定する言語で、ページのデザインを作る際にはウェブページの文書構造を指定するHTMLと組み合わせて使う言語とのこと。
なるほどなるほど〜、つまり、
HTML → 大工さん
CSS → インテリアコーディネーター
的な感じ、、かな?。分業してよりよいものを作るってことですね(勝手な解釈すみません😅)
上記サイトにわかりやすい画像がアップされていたのでそちらも合わせて貼っておきますよ〜。
以上、CSSのことを今日は少し勉強できました。日々、学びですね。
生きていると知らないことだらけで面白い!!
558文字/40分
/*===================
Lavender Pop Star
===================*/
#title a:hover,#blog-description,
.date a:hover,a:hover,.categories a,
.hatena-module-profile .id a,
.hatena-urllist .urllist-date-link a,
:not(.permalink)>.pager-next a,
.hatena-urllist .urllist-category-link a,
.categories a,
ul.navi-top a,ul.navi-top a:hover,
.leave-comment-title,
:not(.permalink)>.pager-next a,
#globalheader-container,
#footer, #footer a,
.bottom-menu li a,
ul.menu-second-level li a,
.bottom-menu li a:hover,
h1,h2,h3,h1 a,h2 a,h3 a
{color: #239ec5;}
.entry-content pre .code:before,
ul.menu-second-level li a:hover
{background-color: #239ec5;}
/*=== border ===*/
.entry-content hr,.urllist-item,
.page-archive .archive-entry,
ul.table-of-contents:before,
.comment-box .entry-comment,
#globalheader-container,
ul.navi-top
{border-bottom: 1px solid #239ec5;}
.entry-header,
.hatena-module-title,
.entry-content h3,ul.bottom-menu
{border-bottom: 2px solid #239ec5;}
.entry-content h3,ul.bottom-menu
{border-top: 2px solid #239ec5;}
.comment-box .entry-comment:first-child,
ul.menu-second-level li a
{border-top: 1px solid #239ec5;}
.categories a,
.leave-comment-title,
:not(.permalink)>.pager-next a
{border: 1px solid #239ec5;}
.entry-content h2,
.entry-content h4
{border-left: 7px solid #239ec5;}
#blog-title,.entry-content h1
{border-bottom:5px solid #239ec5;}
.entry-content blockquote
{border-left:35px solid #239ec5;}
/*== icon ==*/
ul.navi-top li a::before,
ul.table-of-contents li:before,
.hatena-module-title::before
{font-family:"blogicon";
content:"\f02d";/*=== star ===*/
color: #df32ed;}
a,#title a,.date a,
.hatena-module-profile .id a:hover,
.hatena-urllist .urllist-date-link a:hover,
.hatena-urllist .urllist-category-link a:hover,
.entry-title a:hover,.categories a:hover,
:not(.permalink)>.pager-next a:hover,
.leave-comment-title:hover,
ul.table-of-contents li a:hover,
h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover
{color: #df32ed;}
ul.navi-top a:hover{
background-color:#239ec5;color:white;}
.date a,
.hatena-urllist .urllist-date-link a,
.hatena-urllist .urllist-category-link a,
.entry-content blockquote,html,body,
.entry-content pre.code,
ul.table-of-contents,
.entry-content h1,
.entry-content h2,
.entry-content h3,
#globalheader-container,
ul.navi-top,ul.navi-top a,
ul.bottom-menu,
ul.bottom-menu li,
ul.menu-second-level li a,
#footer, #footer a
{background-color: #e9e5f7;}
/*=== navi-top ===*/
ul.navi-top li a::before
{letter-spacing: 0.5em;}
/*=== bottom-menu ===*/
ul.menu-second-level li a:hover
{color:white;}
/*=== title ===*/
#title{font-size:2rem}