webサイト制作 CSSでのmarginの相殺（marginでうまく幅が取れない）
縦方向にmarginが重なった場合、marginは相殺されます。相殺って難しい言葉ですよね。簡単にいうと、「長い方の長さが優先される」 例を見てみましょう。 <div class="box1"></div> <div class="box2...
webサイト制作 
webサイト制作 Webサイトの画像ファイルを簡単に軽くする方法
Webサイトの画像はページの表示速度を考えるとできる限り軽い方がいいです。Web上で画像を簡単に軽くできるサービスがあります。 それが、tiny pngというサービスです。 URLはこちら 使い方 サイトにアクセスし、画像をドラックアンドド...
HTML CSSの小技 HTMLだけでアコーディオンメニューを作る
HTMLの<details>タグと<article>タグを使うと簡単なアコーディオンメニュー（開閉メニュー）がHTMLだけで実装可能です。<article>以外の箇所が開閉する仕組みになります。 <details> <summary>リンゴ...
HTML CSSの小技 CSSのflexboxで上下左右を要素の中央に配置する
heightをとった要素に文字を入れると文字の縦位置は左上揃えになる。 flexboxで真ん中に配置する flexboxの三行を使うだけで、要素内で文章を真ん中配置できる。 こちらは、2行以上の真ん中配置にも対応している。 <div cla...
HTML CSSの小技 スムーススクロールをCSSだけで実装する
スムーススクロールとは？ ページ内リンク（アンカーリンク）をクリックすると、該当箇所に時間をかけてスルスルと移動してする演出のことです。 CSSでスムーススクロールを実装 CSSでは簡単にスムーススクロールを実装できます。 以下記述を追加す...
HTML CSSの小技 CSSのline-hightで文字の縦位置を真ん中にできる
heightをとった要素に文字を入れると文字の縦位置は上揃えになる。 横位置は、text-align: center;で真ん中揃えにしている。 heightと同じ高さでline-heightを入れる line-heightをheightと同...
HTML CSSの小技 CSSのmarginにマイナス値を入れると要素を重ねることができる
要素が2つ並んでいます。この要素をmarginで、重ねることができます。 要素が重なっていない状態。 boxを二つ用意する 今回は上の画像のような例を再現します。 <div class="box1"></div> <div class="b...
HTML CSSの小技 CSSを使ってスマホ版とPC版の文章の改行箇所を変える②
<span>タグにdisplay:blockをかけることにより、PC版とスマホ版で改行箇所を変更することができる。 スマホ版で改行する例 改行したい箇所を<span>タグで囲う <p> つれづれなるまゝに、日暮らし、硯にむかひて、<span...
HTML CSSの小技 CSSを使ってスマホ版とPC版の文章の改行箇所を変える
<br>タグにclass名を振ってあげて、display:none;display:block;を使ってあげることにより、 スマホ版、PC版で改行箇所を変更することができる。 スマホ版で改行する例 HTMLでは<br>タグにclass名を振...
HTML CSSの小技 CSSでhoverアクションをアニメーションにする
transition:0.3s; hover前のセレクタに、transitionというCSSを入れ込めば、簡単にアニメーションにできます。 プロパティー値はアニメーションの秒数を入れ込みます。 「0.3s」と入れ込めば、0.3秒でアニメーシ...