読者です 読者をやめる 読者になる 読者になる

cssのfloatでハマったので

職場の先輩から、Angular2 RC6リリースの話を聞き、Angularの勉強もせねばと思いましたが、cssのfloatで大ハマりしたのでメモメモ。 floatは要素の高さを揃えないと崩れます 今回、ulのli要素にfloat:left;をしたのですが、見事に崩れました。 html <ul> <li><a href=""><img src="image/01.png"></a></li> <li><a href=""><img src="image/02.png"></a></li> <li><a href=""><img src="image/03.png"></a></li> <li><…</li></ul>

CSS3のMedia Queries(メディアクエリ)のorientation

どうも、2015年の12月中旬にスマホに変えた僕です。 スマホの縦・横で画面表示が変わるやつをどうやって判定してるんだろう?と前々から思ってはいたのですが、どうせJavaScriptとかでいろいろしなきゃならんのでしょう、と思って後回しにしていたのですが、…

ChromeのデベロッパーツールでJavaScriptのプログラムをチェック

今回は、職場の先輩に教わったプログラミングをしていく上でのお役立ち情報を紹介したいと思います。 データの流れはどうなってるの? 自分のように、プログラミング初学者が真っ先に躓くのは、データの流れが把握できないことだと思います。 複数のファイル…

Vary HTTPヘッダーとスマホサイト

Webサイトを作る際に 2015年4月21日、世界で一斉にgoogle検索のアルゴリズムに「スマホ対応」が含まれてしまいました。スマホ対応にする事をモバイルフレンドリーと言います。 つまり、Webサイトを作る際には、スマホ対応はしたほうが良いってことみたいです…

CSS Browser SelectorというjQueryプラグインでクロスブラウザの問題に対応

相も変わらずcssは cssはブラウザによって挙動が変わるので非常に難しいですね。 今回、問い合わせはこちらというような矢印を、cssで真ん中に配置しつつアニメーションさせてみたのですが、例のごとくブラウザごとに多種多様な挙動に! みんなちがって、み…

Font Awesomeを使う際に

Font Awesomeとは? Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. と公式サイトで説明されてました。 cssでカスタマイズが可能なベ…

Transformicons  ~Animated icons, symbols and buttons using SVG and CSS~ アニメーションするアイコンを生成

アイコンをクリックしたら、クリックされたアイコン自身がアニメーションするようなソースコードを自動生成してくれる『Transfomicons』。 ⇩ 下記サイトへ。 Transfomicons 『Builder』をクリックします。選択されると白くなります。 ページが変わってアイコ…

position:fixedの固定ナビとjQueryのスクロール

グローバルナビなどをcssのposition:fixedなどで固定した場合、ページ内リンクさせようとする際に、リンク先でのズレや、jQueryのanimateを使ってのページ内スクロールなどが、固定したナビの高さの分だけズレてしまうようです。 対処の仕方として、cssで調…

ブラウザごとにcssを変えたい IE11の場合(CSSハックで対応)

IE10、IE11ではコンディショナルコメントが使えないようです。 コンディショナルコメントとは? IE10からコンディショナルコメントを廃止 MicrosoftはIEの次期バージョンとなるIE10において「コンディショナルコメント」のサポートを廃止することを決定して…

ブラウザの対応に関して 『Modernizr』という相互運用性対策に特化したJavaScriptライブラリ

Modernizrは、HTML5やCSS3などの新しいWebの標準がWebブラウザに実装されているか、汎用的なインタフェースを通じて確認することができるJavaScriptライブラリです。 『Modernizr』でできること。 html5shiv ⇒ HTML5で追加された新要素をブラウザが認識でき…

デザイン レスポンシブに関してなど

フラットデザイン ⇔ リッチデザイン フラットデザインが今流行っている理由 データが軽くなる。 見やすい。 フラットデザインの色の傾向 色の彩度が抑え目。(グレーに近い。)⇒ 目に優しい。 最近は、分からないぐらいのドロップシャドウなどを付けて奥行き…

Sass インターポレーションなど

@extend ⇒ 継承(継承元のスタイルを引き継ぐ。) 例: style.scss .box1 { color: blue; background-color: white;} .box2 { @extend .box1; width:300px;} @mixin ⇒ ミックスイン(スタイルの集まりを作り、@includeで呼び出す。) 引数が使える。 例: st…

Sass 継承など

『オブジェクト指向』の『継承』という考え方でボタン作成。 rensyu.html <html lang="ja"><head><meta charset="UTF-8"><title>scssでボタン作成</title><link rel="stylesheet" href="style02.css"></head><body><ul><li><a href="#" class="foodButton yakiniku">焼肉</a></li><li><a href="#" class="foodButton gyouza">餃子</a></li><li></li></ul></body></html>

Sassの勉強

Sass ⇒ CSSのコーディング効率やソースコードの保守性を向上させる技術です。 Sassの特徴 変数$ 関数 入れ子(ネスト) ミックスイン Sassを使うにはRubyをインストールする必要があります。 Ruby ⇒ プログラミング言語の一種。 Python ⇒ プログラミング言語…

HTMLの勉強

テキストエディターでメモ帳があまり使われない理由。 文字コードが一致しない。 メモ帳のUTF-8で保存すると、バイナリーモードで見ると、BOMと呼ばれるものが勝手に入ってしまう。 BOMはphpなどの記述でエラーが起こる原因になる。 メモ帳はUTF-8N(BOMを回…

今さら聞けないcssのこと

cssは記述していくと上書きされていきます。 例 /*reset*/ body,h1,h2,h3,h4 { margin:0; padding:0; } h1{ margin:0 auto; } 複数のcssファイルがある場合もスタイルが上書きされてしまうので、 上書きしたくない場合はタグにclass名やid名をつけましょう。…