CSS(シー・エス・エス) 【CSS】：has CSS Selectorとは？
：has CSS SelectorDid You Know About the :has CSSSelector?Twitterの投稿で見つけましたが、CSSの:has( )セレクタについて。意味が分からなかったので実際に試してみました。d...
CSS(シー・エス・エス)
CSS(シー・エス・エス) 
CSS(シー・エス・エス) 【CSS】position: absoluteとposition: relativeについてもう一度おさらい｜絶対位置・相対位置
図形をレイアウトする時に使うposition:「absolute」「relative」がまたまた分からなくなってしまったので・・・改めておさらいをしたいと思います。HTMLとCSSでBOXを並べる<!doctype html><html><...
CSS(シー・エス・エス) 【WordPress】画面サイズが小さくなるにつれて文字サイズを可変にするCSSの設定方法
画面はテキストをposition:absolute;で位置を指定した状態です。テキストサイズ（font size）をpxで直接、指定しています。この場合、画面サイズが小さくなったときも、同じフォントサイズのままになります。こちらを「画面の幅...
CSS(シー・エス・エス) 【HTML・CSS】文字を中央揃えや右揃え・均等割り付けにする方法
HTMLやCSSで文字を中央揃えにしたいと思った時には、「text-align」というCSSプロパティを使って指定をすることで、揃えることができます。text-alignを指定する下記のような感じでプロパティにテキストアラインを指定します。...
CSS(シー・エス・エス) 【CSS】CSSを使って三角形を作る方法｜borderプロパティ｜transparent
CSSで三角形を作るborder:属性を使うことで、三角形を作成できます。土台を作るborderプロパティを使って三角形の土台を作ってみます。このようにすると、上編に青色のボーダーが入った四角形が作られます。※見やすいように背景に黄色を設定...
CSS(シー・エス・エス) 【CSS】 Flexbox(フレックスボックス)とは何？を解説！基本編PART1
CSSを使っていると、必ずと言っていいほど出てくる「Flexbox（フレックスボックス）」とは何か？について説明していきたいと思います。フレックスボックスの基本概念フレックスボックスを使うと、例えば下記のようなレイアウトを簡単に作ることがで...
CSS(シー・エス・エス) 【CSS】unsplash.com｜CSSのサンプルを作る時のサンプル用画像に便利なストックフォトサイト【商用利用フリー画像】
無料で商用利用可なフリー画像や写真素材を探しているのであれば「unsplash.com」さんもオススメのひとつです。unsplash.comとは？Unsplashライセンスに基づくストックフォトの共有に特化したWebサイト。207,000人...
CSS(シー・エス・エス) 【CSSプロパティ】background｜背景に関する指定を行う
background：バックグラウンド : 背景の指定をするプロパティbackground背景に関する指定をまとめて行います。background バックグラウンド : -color -image -repeat -position -at...
CSS(シー・エス・エス) 【CSS】cssのvwとは？ vh, vmin, vmax,%の違いについて
widthcssで画像の横幅を指定しない場合は画像サイズがそのまま設定されるので、ウィンドウサイズが大きくても小さくても画像のサイズはそのままです。ウィンドウを小さくすると、画像が隠れて見えなくなります。width:100%画面の横幅いっぱ...
CSS(シー・エス・エス) 【CSS】右に何も無いのになぜかスマホで右にスクロールできてしまう？右側にできた謎の余白を消す方法
横幅は収まっているはずが・・・？cssを見ていても、横幅は画面に収まっているはずなのに、なぜか横にスクロールが出来てしまう。こんな時の、ひとまずの対処法です。DeveloperToolsでCSSのプロパティ＆値を片っ端から消すおそらく、po...
CSS(シー・エス・エス) 【CSS】スマホで表示した時に画面が横にスクロールする状態を解決する方法
WordPressなどでウェブサイトを作成した時に、スマホで表示させた時に横にスクロールしてしまう場合の解決法です。width : 100% からのはみ出し?例えばですが、単純に、width : 100%の場合に要素に左右にmarginやp...
CSS(シー・エス・エス) 【CSS】ドロワーメニューが途中で切れてしまい下まで表示できない場合の対処法
CSSを扱っていて、PCの時は問題ないのですが、スマホでドロワーメニューを表示した時に、メニューが途中で切れてしまい、下まで表示がされない症状が発生しました。解決したので、その方法です。余白の高さを調整するheight：100%だとまずい？...
CSS(シー・エス・エス) 【CSS入門】パララックスサイトを作ってみる！｜準備編
パララックスとは？パララックスとは『視差効果（しさこうか）｜(Parallax Effect)』のこと。スクロールした時に画面の動き方をずらすことで、奥行きのあるページ仕上げることができるデザインの手法です。welikesmall.com凄...
CSS(シー・エス・エス) 【CSS入門】WEBサイトのスマホ画面シミュレーションができる便利サイト｜responsinator.com
WEBサイトをスマートフォンで見た時にどんな感じになるのか？という画面のイメージをサクッと見てみたいときに便利なサイトです。Enter your siteサイト左上の「Enter your site」にスマートフォンで見てみたいサイトのUR...
CSS(シー・エス・エス) 【CSS入門】tableをスマートフォンの幅に合わせる方法
tableをスマホサイズにテーブルの横幅が大きすぎて画面に収まりきれない…。コンテンツ横幅を超えているため右側が表示できない。width:100%width:100%table-layout: fixedtable-layout: fixe...
CSS(シー・エス・エス) 【CSS入門】img(ボックス)に影をつける方法｜《box-shadow》プロパティ
画像に影画像に何か枠が付く…でもimg borderは設定されていない…？枠線が消えない…と思っていたら、box-shadow:プロパティが設定されていたようでした。box-shadow.content img.alignnone { ma...
CSS(シー・エス・エス) ＜npm＞を使ってJavascriptのライブラリを検索してみよう！！
npmNode Packaged Modules（npm）Javascriptのライブラリを配布しているサイトです。npmは、JavaScriptと世界最大のソフトウェアレジストリのパッケージマネージャ、再利用可能なコードのパッケージを発見...
CSS(シー・エス・エス) 【CSS入門】tableのデザインをCSSで変える方法
tableのデザイン初期の状態でtable要素に線も何も入ってなかったので入れてみることに。table {width: 100%;}横幅を100%に横幅をコンテンツいっぱい(100%)に。見た目は特に変化なし。table {width: 1...
CSS(シー・エス・エス) 【CSS】背景画像(background)の設定方法｜スマホで背景画像が表示されないときの対処法
★背景画像の表示方法★背景画像を表示する場合はbackground-image:url()またはbackground:url()その後、background-sizeプロパティを指定します。background-size:backgroun...
CSS(シー・エス・エス) ロゴを制作するときに参考にしたいサイトまとめ
LOGOPOND IS INSPIRATIONLogopond is an inspirational site & showcase of identity work from designers of varying abilities...
CSS(シー・エス・エス) バナーを制作するときに参考にしたいサイトまとめ
バナーを作る際に便利なサイト・参考になるサイトを集めました。BANNER LINKS デザインバナーいろいろ集めましたバナーリンク集です。サイズ別、カテゴリー別に優れたデザインのバナーが集まっています。バナーデザイン専門ギャラリーサイト |...
CSS(シー・エス・エス) CSSフレームワーク「Bootstrap」で簡単にオシャレなデザインを作成！
そもそもフレームワークとは・・・？フレームワークプログラミングにおいて、一般的な機能をもつ共通コードをユーザーが選択的に上書きしたり特化させたりすることで、ある特定の機能をもたせようとする抽象概念のことである。（ - Wikipedia -...
CSS(シー・エス・エス) 【CSS】html, bodyに設定するfont-familyの例｜游ゴシック体｜ヒラギノ角ゴシック Proなど
font-family（フォントファミリー）を設定した例Quicksand, 游ゴシック体…html, body {font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ...
