CSS

CSS

CSSでアニメーションanimation-delayを指定してアニメーション開始時間を指定する方法

CSSでアニメーションanimation-delayを指定してアニメーション開始時間を指定する方法 animation-delay: 5s;と指定すると、5秒後にアニメーションが開始されます。 2個目のliタグにだけanimation-de...
2019.05.27
CSS
CSS

CSSでanimation-durationを指定してアニメーション時間を指定する方法

CSSでanimation-durationを指定してアニメーション時間を指定する方法 「CSSで@keyframesでアニメーションしてみる」で、liタグをアニメーションしてみましたが、複数のliタグに対して異なる時間を指定して、アニメー...
2019.05.25
CSS
CSS

CSSで@keyframesでアニメーションしてみる

CSSで@keyframesでアニメーションしてみる @keyframesっていうのを使うとアニメーションができてデザイナブルなページが作成できたりします。 ここを参考にしました。 body { background: #00CCFF; }...
2019.05.22
CSS
CSS

ハイブリッド開発（HTML5+CSS3）のログイン情報の保持方法について

ハイブリッド開発（HTML5+CSS3）のログイン情報の保持方法について ハイブリッド開発でログイン情報をどう保持するかをちょっと考えていたのですが、セッションとかクッキーとかは古いかと思っていて、HTML5から追加されたsessionSt...
2019.02.17
CSSHTML
CSS

HTML5のラジオボタンをCSSでdisplay:none;すると、An invalid form control with name=’～’ is not focusable.エラー

HTML5のラジオボタンをCSSでdisplay:none;すると、An invalid form control with name='～' is not focusable.エラー
2019.02.12
CSSHTML
CSS

CSSでtableの行ごと、列ごとにスタイルをあてる方法

CSSでtableの行ごと、列ごとにスタイルをあてる方法 CSS3から疑似クラスを使用すれば1行目のスタイル、2行目のスタイルというように行ごと、また、列ごとにスタイルをあてることができるようです。 列ごとにスタイルをあてるにはtr:nth...
2018.12.09
CSS
CSS

IE11でプリンタの縦横の印刷に合わせてCSSを変更する方法

IE11でプリンタの縦横の印刷に合わせてCSSを変更する方法 IE11でプリンタの縦印刷の場合はあるスタイルシートを当て、横印刷の場合は別のスタイルシートを当てたい場合、メディアクエリをふたつに分けて実現する事ができます。 印刷時にプリンタ...
2018.11.29
CSSIE
CSS

CSSでul,liのドットを消す方法

CSSでul,liのドットを消す方法 ul,liでナビゲーションを作る際にドットを消したい場合があります。 普通に書くとドットが表示されます。 aaa bbb 上記のCSSです。 <ul> <li>aaa</li> <li>bbb</li>...
2018.11.21
CSS
CSS

CSSのposition:flex;でスクロールしても表示される領域を確保する方法

CSSのposition:flex;でスクロールしても表示される領域を確保する方法 CSSでpositionプロパティは理解するのが難しいです。 position:flex;とすることによってヘッダ領域に表示することができます。 画面が縦長...
2018.11.21
CSS
CSS

CSSのflex-directionでフッターを固定する方法

CSSのflex-directionでフッターを固定する方法 flex-directionプロパティを使用すると、子要素を左から右、右から左、上から下、下から上といったように表示することができるようになります。 フレックスアイテム1 フレッ...
2018.11.19
CSS
CSS

CSSのoverflowの使い方

CSSのoverflowの使い方 overflowを使用するとブロック要素から表示しきれない部分をどうするかを指定できます。 デフォルトは、overflow: visible;で、表示しきれない部分ははみ出しても表示することになります。 サ...
2018.11.17
CSS
CSS

CSSのrgbaで透過する方法とopacityとの違い

CSSのrgbaで透過する方法とopacityとの違い rgbaを使うと透過させる事ができます。opacityと同じく0〜1が範囲となります。 0.7 0.5 0.1 cssです。 <div style="width: 100px; hei...
2018.11.15
CSS
CSS

CSSのspanタグで三角を描く方法

CSSのspanタグで三角を描く方法 CSSのspanタグで三角を描いてみます。borderを使用します。 cssです。 .danraku{ border-top: 10px solid transparent; border-right:...
2018.11.12
CSS
CSS

CSSのdivタグで円を描く方法

CSSのdivタグで円を描く方法 DIVタグなどのブロック要素でborder-radiusを50%で指定すれば、円を描けることが出来ます。 前提として、widthとheightは同じであることとなります。でないと楕円形になってしまいます。 ...
2018.11.11
CSS
CSS

CSSのdisplayプロパティを使用してブロック要素を横に並べる

CSSのdisplayプロパティを使用してブロック要素を横に並べる divタグにblock:inline-block;を指定して横に並べてみます。 cssです。 .danraku{ border:1px solid; display:inl...
2018.11.07
CSS
CSS

CSSのドット(.)とシャープ(#)の違い

CSSのドット(.)とシャープ(#)の違い cssファイルに.aaaという表記と#aaaという表記方法があります。 これはhtmlファイル側のid属性の場合は#、class属性の場合は.となります。 #の方をidセレクタ、.の方をclass...
2018.11.06
CSS
CSS

CSSのpaddingはmarginの逆でborderの内側みたい

CSSのpaddingはmarginの逆でborderの内側みたい marginはブロック要素の外側であることがわかりました。逆にpaddingを指定すると、ボーダーの内側に対して余白を指定するようです。 例えばdivタグ内のコンテンツ位置...
2018.11.05
CSS
CSS

今更ながらCSSのmarginについて勉強してみました

今更ながらCSSのmarginについて勉強してみました marginが良く分かっていなかったので実際に試してみました。 わかりやすいようにbodyとdivタグにborderをつけています。 marginは margin:上 右 下 左 とい...
2018.11.05
CSS
CSS

CSSで印刷時の縦横を指定する方法

CSSで印刷時の縦横を指定する方法 CSSで印刷時の縦横を指定できたら素晴らしいですね。 なんとChromeならその指定できるようです。残念ながらIE11では効かなかったです。以下、横指定です。 @media print { size: A...
2018.11.03
CSS
Chrome

Chromeでmedia printを確認・デバッグする方法

Chromeでmedia printを確認・デバッグする方法
2018.11.03
ChromeCSS
CSS

CSSのtext-indentを使用して段落の１行目をインデントする方法

CSSのtext-indentを使用して段落の１行目をインデントする方法 最近デザインに目覚めはじめました@takahashiです。 CSSで文章の１行目を全角１文字分インデントしたい、といった場合はtext-indentを使えば一発で可能...
2018.11.03
CSS
CSS

CSSのdisplay:inlineとdisplay:flexの違い

CSSのdisplay:inlineとdisplay:flexの違い display:inlineはブロック要素（divタグなど）を横並びに表示することができます。 それに対し、display:flexは、親要素の下の子要素の高さなどを統一...
2018.08.16
CSS
CSS

HTMLでIMEを無効にする方法

HTMLでIMEを無効にする方法 Chromeでは無理でしたが、IE11ではスタイルシートで無効にすることができました。 <html> <body> <div> TEL: <input type="text" style="ime-mode...
2018.07.15
CSS