コピペで使えるCSS

クリックした画像を全画面表示するJavaScript

はいどうも〜UI/UXデザイナーのうっくんです。

今回は、以前よりやりたいと思っていた、「ウェブサイトで、クリックされた画像をなんでもかんでも全画面表示にするJavaScriptのご紹介です。

最初はなんとなく、クリックされた要素がimgだったらそいつに特別なCSSクラスをつけて、全画面表示になるように予めCSS書いとけばええんちゃん?

と思っていたのですが、これが案外うまく行かなくて結局S

もっとみる

【CSS】要素選択不可

こんにちは!
本日はテキストや画像を選択不可にするCSSプロパティのご紹介です。

下記が便利なコードです。
部分的に指定したい場合はセレクタを変更してご利用ください。

* { -ms-user-select: none; /* IE 10+ */ -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-se

もっとみる

【CSS】テキストを「左揃え」のまま「中央寄せ」にする方法【学習メモ】

・html

<div id="about-item"> <p>おさかな / osakana<br> 00年生まれの19歳。<br> 高校生の頃からプログラミングを勉強しはじめ、現在はWeb系の受諾開発企業で「Webコーダー」として働いています。<br> また、「ライター」として「クラウドソーシングサービス」でのお仕事経験もあります。<br> 今後は、個人での「Web

もっとみる

【ワードプレス JIN】楽天アフィリを貼るといらない線が出てしまう問題

どうも!かわうそ@ワードプレスおばさんです!
大人気ワードプレステーマ【JIN】
私の所属するGOサロ&さよみみ部屋でも一番人気!!

デザインも素敵なので人気があるのも納得~
血と涙の結晶ともいえるcssがもりもり書かれていて、ブログをすぐ始めたい人にはありがた~いテーマです。

ただ、そこで出てきたちょっとした問題

【楽天アフィリのタグを貼ると変な線が出てしまう問題】

↑こんな感じにうっす

もっとみる

【CSSチャレンジ第1回】レインボーの線を使ったカードデザイン

こんにちは。
リラックマと森にある赤い屋根のお家でのんびり暮らしたい系デザイナーのみみ🐰です♡
リラックマと一緒にオムライスが食べたいです(๑╹ω╹๑ )

今回からCSSチャレンジという、自分1人の企画を寂しくはじめてみたいと思います! 

CSSチャレンジとは
コーディングが苦手なみみ🐰がCSSで色んなデザインを実装する企画です。
CSSで実装するのが目的なので、HTMLの文法的に間違

もっとみる

【Google風】フローティングボタンを作る

こんにちは。
自然派食品メーカーでWeb担当をしている角田です。

今回は、自身のポートフォリオサイトに、タップするとふわっと背景が広がってメニューが現れるGoogle風のフローティングボタンを実装しました。

それがこちら

デモはこちら(codepen)

アプリのGoogle Calender等で見られるこのボタンは、とても押しやすく、ユーザビリティが高いなと思い前々から実装したいと考えてい

もっとみる

今すぐ誰でもCSSアニメーション -波打つグラデーション-

前はGIFアニメやJavascriptを使って頑張って実装していた(らしい)ものも最近はCSSだけで実装するのが主流になってきています。
ただ、普段コーディングをしないWebデザイナーさんや勉強し始めたばかりのエンジニアさんは取っ掛かりにくい部分もあるかと思いますので、簡単に手元で試せるサンプルコードと解説を載せたいと思います。

アニメーション

できるとちょっと格好いい「波打つグラデーション」

もっとみる

スマホのスクロールがスムーズになるCSS

こんにちは。FC2ブロガーのMです。

先週、友人から自分が運営してるブログのひとつ「ゆうらりHappySmile 」についてページの読み込みが遅いし重たくてスマホで非常に見づらいよ!というご指摘を受けました。

ボク自身が使ってるiPhoneでは特に不具合を感じたことがなかったので、スマホの機種によってブログの見え方は全然ちがうものなんだなぁって。

大変勉強になりました。と同時に、ページの読み

もっとみる
『スキ』ありがとうございます!励みになってます!(о´∀`о)
4

13. 下手な英語を笑われるのが怖い?

単語を間違えたり、発音がおかしかったり、文法が分からなくなったりして笑われるのが怖いという気持ちは誰もが持つと思います。

 でも反対に、海外の人が日本語を話していて、その発音がおかしかったり単語を間違えたりして、あなたは笑うでしょうか?

 あまり笑う人はいないと思います。

 海外の人も同じです。

 あなたが一生懸命外国語を話していて、発音がおかしいとか文法を間違えているといって笑う人はほと

もっとみる

ブロガー必須!自動でHTMLタグチェック出来るChrome拡張機能

こんにちは。Mです。

ここしばらくの間、このブログの変な動きに「??」と思った読者の方が多かったのではないでしょうか。

実はずっと次の作業に明け暮れていたんです。

①ブログテンプレートでHTMLなどのエラーチェック

②ブログの読み込み速度の改善

いやあ。これが思ったよりも大変な作業で四苦八苦しましたよ(汗)

しかし、GoogleのChrome拡張機能で便利なツールを発見。おかげで何とか

もっとみる
Thanks‼︎ よろしければサポートもお待ちしてます(о´∀`о)
2