CSS CSSのtransitionについて深く知る
普段使っている「transition」を、自分はあやふやにまとめて定義していました。自分がそうなら、きっとみんなもそうだろうと思い改めて詳しく勉強したいと思います。transitionとは？transitionとは、Google翻訳すると「...
CSS
CSS 
CSS 三角形の作り方｜CSS
CSSで上向き、下向き、右、左向きの三角形の作り方のご紹介です。三角形を作るうえで必要になってくるプロパティが「border」だ。これが、またよくわからない原理で三角形が作られているのでその辺りも解説していこうと思います。borderで三角...
CSS 画像を丸く切り抜く方法｜CSS
TwitterやInstagramのプロフィール画像でよく見る丸く切り抜かれた画像を実装するCSSのご紹介です。やりかたは2種類あり、自分は2つ目が好みでよく使用しています。１つめは、下記のみたいにHTMLでimgタグで画像を表示し周りを切...
CSS ページ幅をこれ以上広げないCSS
パソコンでウェブを見ると、中心にコンテンツが表示されるのが一般的です。CSSでこれを表現するには、下記の記述をコンテンツの最も外のDivに付ければOK。【CSS】 .contents { width: 100%; max-width: 80...
CSS 【CSS】文章（テキスト）の改行を禁止する方法
テキストの扱いって時に、厄介な時があるよね。これ以上文字入れたらレイアウト崩れちゃうとか、タイトルが長すぎて本来のデザインと違った感じになっちゃったり。それをCSSでスッと解決するテキストを改行させないCSSテクニックを紹介します。
CSS CSSだけで出来るボタンのホバーエフェクト集
javascriptは使わずにCSSとHTMLだけで装飾できるボタンのホバーエフェクトをご紹介します。コピペですぐ実装できるので、このページをブックマークしておくと便利です。薄くなるボタンボタン01HTML<div class="btn01...
CSS ホバーで変化するテキストの作り方｜CSS
ユーザーアクションで表示を切り替えるのってよく見ますよね。今回は、パソコンでマウスカーソルを持ってくと、文字を「ふわっ」と変化させるテクニックのご紹介です。
CSS CSSで全ての要素を上下左右中央揃えにするテクニック
どんな時も、上下左右中央寄せにする時は、「transform: transslate(-50%, -50%);」があればなんとかなりますね。
CSS 【CSS】疑似クラスの指定方法｜最初・最後・n番目・奇数・偶数
cssで特定箇所のみにスタイリングしたい場合に効率的にかっこよく書ける疑似クラス特集です。奇数番目１，３，５，７，９…番目を装飾する時li:nth-child(odd) { color: #82fcc9;} リスト（奇数） リスト（偶数） ...
