windowsとmac両方で丸ゴシックを表示させるCSSwindowsとmac両方で丸ゴシックを表示させるCSSです。font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO";12Aug2019コピペCSS
hover時にふわっと変化させるCSShover時にふわっと変化すると、一気にオシャレな印象になります。(僕だけですか?)対象のaタグに以下を記述するだけ。transition-property: all;transition: 0.3s linear;0.3sはスピードの設定なのでお好みで変えてください。04Aug2019CSS
【コピペでOK】サイズ変更できる擬似クラスの記述擬似クラスのcontentに直接画像を設定してしまうとサイズ変更が出来ない為、不便ですよね。そこで、擬似クラスの背景として画像を入れることでbackground-sizeでサイズ変更を出来るようにします。そうすることでレスポンシブデザインにも柔軟に対応できます。↓をコピペでwidth、height、background-imageの指定を変えるだけでOK。(場合によっては場所指定も変えてくださいね)a:before { content: ''; display: inline-block; width: 00000px; height: 00000px; background-ima...01Aug2019CSSコピペ
【コピペでOK】CSSだけで三角や四角を描写cssだけで三角や四角を描写する、中級者向けのテクニック。この、要素にposition:relativeを付けてbeforeとafterを使う手法は色んな描写に応用できますよね。色や大きさは任意ですので、自由に変更してください。/*下向き三角*/p{position:relative;}p:before{content: "";width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid #000;}/*頭に四角*/p{position:relative;}p:bef...30Jul2019CSSコピペ
【コピペでOK】2行目から1文字下げるCSS※を使った注意事項など、2行目から1文字下げたい時に使うCSSです。p {padding-left: 1em;text-indent: -1em;}28Jul2019CSSコピペ
【コピペでOK】hoverした時に透過させるcssマウスがhoverした時に透過させるcssです。本当によく使うのでコピペ用。a:hover{ opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); zoom: 1; -ms-filter: "alpha(opacity=80)"; }IE対策も施してあります。26Jul2019CSSコピペ