CSS

cssのword-break・word-wrapプロパティが効かないときの対処方法

cssで文字がはみ出るときに、ちゃんと要素内で文字を折り返したいときに使うのは word-breakプロパティとword-wrapプロパティだと思いますが、自分自身ネットで検索するとよくでてくるだけできちんと理解してなかったので備忘録的に書いておこうと思う。(word-breakを指定しても文字の折り返しが効かないケースも書いておく)そもそもword-break・word-wrap

cssのプロパティ【z-index】が効かない時の対処方法

久しぶりにwebページを作成していたら、最後にcssのz-indexが効かなくて、少々時間を取られてしまった。そのため備忘録的に対処方法を書いておこうと思う。z-indexで絶対知っておくべきことz-indexは要素の重なり順を指定するプロパティで、ここまでは漠然とだけど、「そんなことは知っている」って感じの方が多いのではないかと思う。しかし、これだけ

style属性に:hoverを指定することはできないと断言。だが他の策がある。

htmlのstyle属性に:hoverを指定することはできないと断言する記事を書いておきます。※styleタグじゃなくてstyle属性の話なので注意してください。htmlのstyle属性に:hoverを指定することはできないネットの情報を検索するとstyle属性に:hoverが書けるという情報があります。例えば以下のようなもの[su_note note_color

cssのtransitionとtransformで鬼ハマリしたのでメモ

cssのtransitionとtransformで鬼ハマリしたのでメモしておきます。transitionとtransformプロパティの概要transitionプロパティの概要transitonプロパティの単純な書き方例は以下になります[css]#delay { font-size: 14px; transition-prop

htlmlのstyle属性にmediaクエリは書けないという話

htmlのstyle属性にmediaクエリは書けませんよという話しを書いていきたいと思います。htmlのstyle属性にmediaクエリは記述できない何を血迷ったのか私は次のような書き方をしようとしました。[su_note note_color="#ffff666e" text_color="#333333" radius="3" class=""

CSSのマウスホバーが効かなくてプチハマリしたのでメモ

cssのマウスホバーが効かなくてプチハマリしたので解決方法をメモしておきます。cssのマウスホバーが効かないときに確認すること結論からいってしまうと要素が重なっていたのでホバーが効いていませんでした。こちらの件あらゆるケースが考えられるとは思うのですが私の場合は要素の特定の部分はホバーが効くのだけども、それ以外の部分はなぜかホバーが効かない状態になってい

CSS擬似要素「before/after」の背景画像表示で鬼ハマリしたので備忘録メモ

cssの擬似要素 before/after に画像を表示させる方法をメモしておきます。擬似要素に画像を表示させるcssコード[css].hoge:before { content: ""; display: inline-block; background: url(xxx.png); backgroun

FontAwesomeの使い方【HTML要素・CSSプロパティの値】

FontAwesomeの使い方FontAwesomeは専用のスタイルを読みこんで使います。しかし使い方が2種類あります。 HTML要素として使う方法 CSSプロパティの値として使用する方法FontAwesomeは忘れやいのでここでまとめておこうかと思います。しかしFontAwesomeはバージョ

ProgateでSassを学ぶ【SCSS】

ProgateでSassを学ぶ Progateはプログラミングの学習サービスです。Sassはプログラミング言語ではないのですが、一応レッスンを受けることができます。こちらのコースはもしかすると有料会員でないとうけられないかもしれません。あと…

【CSS】横並びコンテンツを絶対にカラム落ちさせないデザイン方法

cssのカラム落ち webページのデザインで横並びコンテンツを作ったときにカラム落ちすることがあります。これはどういうときにおこるのかなというと、子要素が親要素の幅をこえてしまうときにおきてしまいます。 詳しくは以前の記事で解説していますの…

CSSのカラム落ち。どういうときにおきるのか徹底研究

CSSのカラム落ちがおこって困った CSSで横並びのコンテンツを作成したときにカラム落ちすることがあります。カラム落ちとはどいういうことかというとWebページのコンテンツが段落ちしてしまって。下に移動してしまうことを言います。 CSSのカラ…

CSSプロパティや擬似要素、擬似クラスをまとめ

cssの擬似クラスや擬似要素まとめまとめ リファレンスを見てもいいと思いますが、 わりと基本を押さえた内容かと思います。間違っているところもあるかもしれないですが、 こちらからCSSの基本をまとめたものをダウンロードできます。 cssまとめ…

CSSのpositionプロパティの誤解

cssのpositionプロパティの特徴 別に筆者は業界の人ではないのですが、positionプロパティについてわりと誤解していた点があったので書いておきます。 cssのpositionプロパティの概要 position: static; …

dotinstallのhtmlサイト構築 font-awesomeでハマったら

font-awesomeの使い方 ドットインストールでサイト制作の練習ができます。そこでwebフォントを簡単に利用でき、また配布しているサイトに「fontawesome.io」というサイトがあります。(フォントオーサム)。 こちらの使い方と…

htmlcssの練習がeclipseで簡単にできる

eclipseで簡単にhtmlとcssの練習ができる。 eclipseを使うとhtmlやcssの練習ができます。eclipseは総合開発環境です。 eclipseの入手先は下記のサイトになります。 Pleiades All in One E…