HTML/CSS

margineの相殺

margineでコンテンツ上部に余白を作ったはずなのにぴったりくっついてる・・・ 何故・・・?となったので勉強した記憶を掘り起こし「相殺」について思い出しました。 CSSの記述 .news {     margin: 90px 0 9...
HTML/CSS

NEWSリスト(更新情報)の作り方

企業のホームページでよく見るニュースリストの作り方を調べたところ、ざっと以下の3つの方法を見つけました。 <ul><li>タグを使う <dl><dt><dd>タグを使う ...
HTML/CSS

CSSで画像を丸く切り抜く方法

画像を表示させる際にサイズや表示する形の変更をCSSで行いたい! 今回は四角い画像を丸切り抜いて表示させたい! Photoshop等で画像そのものをリサイズや切り抜くこともできますが、面倒ですよね・・・やっぱり四角のままでよかった!なん...
HTML/CSS

flex: コンテンツの中で要素の幅を割合で決める

練習でとあるサイトの模写に挑戦したところ、ある section の中に画像が3枚横並びになっていて、ウインドウのサイズとともに伸縮するものがありました。 ディベロッパーツールを見ると flex: 2; という見慣れないCSS記述が。 ...
HTML/CSS

div と section の使い分け

HTMLをマークアップしていて div と section ってどう使い分けるの? 全部 div じゃだめなの? という疑問が湧いてきたためググりました。 簡単にまとめると div 他に適切なタグがない時の最終手段 特に意...
HTML/CSS

マウスをホバーしたときに画像をふわっと白くする方法

最近よく見る a 要素にマウスをホバーするとふわっと白くなるデザイン。 あれをやりたい! a: hover のCSSで以下のような記述をするのかな? 画像の上に同じ大きさの半透明の白いボックスを出現させる 単に画像を半透明にす...
HTML/CSS

li へのリンク設定と id

id タグを使って1ページ内の移動をさせたい時のHTMLの記述方法                     <li><a href ="#home">HOME</a></li>       ...
HTML/CSS

float right で li の順番が逆になってしまう

nav内のリストを右寄せにしたかったので float :right で解決! かと思いきや li が右から順番に表示されてしまうらしく、意図していたものと真逆の順番で表示されてしまった・・・ float: right で li が逆に...
飼い方

イタグレの服どこで買う?人気のイタグレショップ実店舗の品ぞろえレビュー

こんにちは。こーです。 イタグレは毛が短いため、皮膚が傷つきやすく、冬は寒さに弱い犬種なので服を探している方も多いはず。 また体型が独特なため普通のペットショップではイタグレの服は取り扱いしていないことがほとんどです。 ...
ラルンの成長記録

イタリアン・グレーハウンドの子犬お迎えの日

こんにちは。こーです。 ラルンは2020年6月に生後3か月で我が家に仲間入りしました。私たち人間は東京在住ですが、ラルンは福岡県のブリーダーさんから迎え入れたため飛行機でやってきました。 そんなラルンとの最初の出会いを振り返り...
タイトルとURLをコピーしました