※当サイトの記事には、広告・プロモーションが含まれます。

HTML/CSS

JavaScriptで矩形選択を作成、リサイズ、移動、選択範囲内のDOMの情報を取得したりする

gigazine.net 今回の研究では、将来の都市人口を左右する要因についての調査は行われませんでした。しかし、ストラダール氏は住宅価格の上昇や産業の衰退、出生率の低下、州税の違い、気候変動の影響といった地域によって異なる変数が複雑に絡み合い、人口が…

ファイルマネージャーのGUIのようなことを真似してブラウザー上でフォルダの階層表示してみる

gigazine.net ⇧ う~む、これだけのことができるのに、MECE(Mutually Exclusive, Collectively Exhaustive)に分類したりする作業はポンコツだったりするのがよく分からんですな... とりあえず、映像系の製作とかでPoC(Proof of Concept)ができるようにな…

JSP + JSTL は遅いらしいが、変数の定義などはどこでするのが良いのか

gigazine.net ⇧ 普及率がどれぐらいなのか気になりますな。 JSP + JSTL は遅いらしいが... サーバーサイドがJavaでSpring FrameworkとSpring Web MVCを使っていて、フロントエンドが jQuery + JavaScript CSS JSP(JavaServer Pages) JSTL(JSP Standard Ta…

HTML5のinput要素に付与できるSpinnerとは何なのか?ページ読み込みのSpinnerとは関係ない

nazology.net ⇧ amazing... HTML5のinput要素に付与できるSpinnerとは何なのか?ページ読み込みのSpinnerとは関係ない 何のことを言っているのか非常に分かり辛く恐縮なのですが、 jqueryui.com Spinner Enhance a text input for entering numeric values, …

CSSのpointer-events:noneを指定したformの要素をjQueryでsubmitすると値にカンマが付与される...

nazology.net ⇧ amazing... CSSのpointer-events:noneを指定したformの要素をjQueryでsubmitすると値にカンマが付与される... formのselect要素を非活性化するという要件があって、 qumeru.com ⇧ 上記サイト様を参考に、select要素にCSSのpointer-events: no…

sprite sheetでCSS animationを実施してみる

nazology.net テスト内容にもよりますが、IT技術を学び始めて4カ月しか経過していない新人が5年以上の実務経験があるプロを超える知識とスキルを身に着けているという結果は、非常に驚くべきことだと言えるでしょう。 AIの個別指導を受けた新人がベテランよ…

VueのUIライブラリElement(Element UI)で泥沼にハマる

gigazine.net ウェブの世界では色をsRGBと呼ばれる色空間で処理しており、1677万7216色(赤256×緑256×青256)を処理することが可能です。しかし、sRGBは非可逆圧縮方式のようなもので、sRGBで表現された画像に編集を加えると、上述の事例のようにオリジナル画…

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』。 ⇩ 下記サイトへ。 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名をつけましょう。…