.link:リンクに文字サイズ、アニメーション(秒数)を設定。.link:before:リンク頭に擬似要素でテキスト「※」を追加。.link:hover:リンクのマウスオーバー時の不透明度を設定。img:写真に幅、高さ、余白(外側)を設定。こちらが表示サンプル。HTMLのみとは雰囲気が変わったことがわかると思う。CodePen.「Result」タブを「CSS」タブに切り替えると上記のコードが書かれている。「読めるぞ!私にもCSSが読める!!*10」と、なっていただけただろうか。idr-zz.hatenablog.com本連載は、これからWebサイト制作を始めてみたい方を念頭に、当ブログの記事中に出てくるWeb系の単語の「出発点」になることを目指して書きました。平易な言葉で、段階的な説明を心がけたつもりです。(書きながら自分自身の復習にもなりました)もし内容に不明点、おかしい点などあれば(優しく)ご指摘いただけると幸いです。idr-zz.hatenablog.com※参考:【HTML、CSS、JSの書式】まとめqiita.com*1:ソースコード。人が書いたコンピュータへの命令のこと。*2:某胃腸薬*3:サイズの単位は他にも%、emなどいくつかある。*4:ここではblueという色名で指定しているがカラーコードでも指定できる。#0033ccなどハッシュと6桁の16進数だ。*5:他にも「>」で繋ぐ直下セレクタ、「+」で繋ぐ隣接セレクタなどいくつか種類がある。*6:他に:last-child(一番最後)、:nth-child(x)(x番目の要素。xは数字)などもある。*7:実は擬似要素も元々は擬似クラスと同じシングルコロンだった。ブラウザは今でもどちらのコロンにも対応しているため、擬似要素がシングルコロンで書かれることも多い。(とっても)*8:他にも「!=」だと「〇〇以外」と真反対を意味したり、いくつかの繋げ方がある。*9:marginは要素の外側の余白、paddingは要素の内側の余白。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-04-12【JS】Math.random()でつくるサイコロとおみくじJSのMathオブジェクトには数値系の組み込み関数が用意されてい...2019-02-03【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させるフォームの送信ボタンのinputタグにアイコン(擬似要素)を加え...2018-10-18【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事)以前、「書ける前に読む!HTML、CSS、JSの書式」*1という連載記...2018-07-05CSS変数でドット絵マリオをルイージにしたった!「CSSドット絵マリオ」の続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。