HTML/CSS
gigazine.net 歴史上最も古い物語として知られるギルガメシュ叙事詩は、現在まで残っている写本は紀元前2000年紀初頭のもので、オリジナルはさらに古く紀元前4000年紀に書かれたと考えられています。 古代シュメール人はどのようにして世界初の文字体系を作…
gigazine.net 今回の研究では、将来の都市人口を左右する要因についての調査は行われませんでした。しかし、ストラダール氏は住宅価格の上昇や産業の衰退、出生率の低下、州税の違い、気候変動の影響といった地域によって異なる変数が複雑に絡み合い、人口が…
gigazine.net ⇧ う～む、これだけのことができるのに、MECE（Mutually Exclusive, Collectively Exhaustive）に分類したりする作業はポンコツだったりするのがよく分からんですな... とりあえず、映像系の製作とかでPoC（Proof of Concept）ができるようにな…
gigazine.net ⇧ 普及率がどれぐらいなのか気になりますな。 JSP + JSTL は遅いらしいが... サーバーサイドがJavaでSpring FrameworkとSpring Web MVCを使っていて、フロントエンドが jQuery + JavaScript CSS JSP（JavaServer Pages） JSTL（JSP Standard Ta…
nazology.net ⇧ amazing... HTML5のinput要素に付与できるSpinnerとは何なのか？ページ読み込みのSpinnerとは関係ない 何のことを言っているのか非常に分かり辛く恐縮なのですが、 jqueryui.com Spinner Enhance a text input for entering numeric values, …
nazology.net ⇧ amazing... CSSのpointer-events:noneを指定したformの要素をjQueryでsubmitすると値にカンマが付与される... formのselect要素を非活性化するという要件があって、 qumeru.com ⇧ 上記サイト様を参考に、select要素にCSSのpointer-events: no…
nazology.net テスト内容にもよりますが、IT技術を学び始めて4カ月しか経過していない新人が5年以上の実務経験があるプロを超える知識とスキルを身に着けているという結果は、非常に驚くべきことだと言えるでしょう。 AIの個別指導を受けた新人がベテランよ…
gigazine.net ウェブの世界では色をsRGBと呼ばれる色空間で処理しており、1677万7216色(赤256×緑256×青256)を処理することが可能です。しかし、sRGBは非可逆圧縮方式のようなもので、sRGBで表現された画像に編集を加えると、上述の事例のようにオリジナル画…
職場の先輩から、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>
どうも、2015年の12月中旬にスマホに変えた僕です。 スマホの縦・横で画面表示が変わるやつをどうやって判定してるんだろう？と前々から思ってはいたのですが、どうせJavaScriptとかでいろいろしなきゃならんのでしょう、と思って後回しにしていたのですが、…
今回は、職場の先輩に教わったプログラミングをしていく上でのお役立ち情報を紹介したいと思います。 データの流れはどうなってるの？ 自分のように、プログラミング初学者が真っ先に躓くのは、データの流れが把握できないことだと思います。 複数のファイル…
Webサイトを作る際に 2015年4月21日、世界で一斉にgoogle検索のアルゴリズムに「スマホ対応」が含まれてしまいました。スマホ対応にする事をモバイルフレンドリーと言います。 つまり、Webサイトを作る際には、スマホ対応はしたほうが良いってことみたいです…
相も変わらずcssは cssはブラウザによって挙動が変わるので非常に難しいですね。 今回、問い合わせはこちらというような矢印を、cssで真ん中に配置しつつアニメーションさせてみたのですが、例のごとくブラウザごとに多種多様な挙動に！ みんなちがって、み…
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でカスタマイズが可能なベ…
『Transfomicons』を試してみる アイコンをクリックしたら、クリックされたアイコン自身がアニメーションするようなソースコードを自動生成してくれる『Transfomicons』。 ⇩ 下記サイトへ。 Transfomicons 『Builder』をクリックします。選択されると白くな…
グローバルナビなどをcssのposition:fixedなどで固定した場合、ページ内リンクさせようとする際に、リンク先でのズレや、jQueryのanimateを使ってのページ内スクロールなどが、固定したナビの高さの分だけズレてしまうようです。 対処の仕方として、cssで調…
IE10、IE11ではコンディショナルコメントが使えないようです。 コンディショナルコメントとは？ IE10からコンディショナルコメントを廃止 MicrosoftはIEの次期バージョンとなるIE10において「コンディショナルコメント」のサポートを廃止することを決定して…
Modernizrは、HTML5やCSS3などの新しいWebの標準がWebブラウザに実装されているか、汎用的なインタフェースを通じて確認することができるJavaScriptライブラリです。 『Modernizr』でできること。 html5shiv ⇒ HTML5で追加された新要素をブラウザが認識でき…
フラットデザイン ⇔ リッチデザイン フラットデザインが今流行っている理由 データが軽くなる。 見やすい。 フラットデザインの色の傾向 色の彩度が抑え目。（グレーに近い。）⇒ 目に優しい。 最近は、分からないぐらいのドロップシャドウなどを付けて奥行き…
@extend ⇒ 継承（継承元のスタイルを引き継ぐ。） 例： style.scss .box1 { color: blue; background-color: white;} .box2 { @extend .box1; width:300px;} @mixin ⇒ ミックスイン（スタイルの集まりを作り、@includeで呼び出す。） 引数が使える。 例： st…
『オブジェクト指向』の『継承』という考え方でボタン作成。 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 ⇒ CSSのコーディング効率やソースコードの保守性を向上させる技術です。 Sassの特徴 変数$ 関数 入れ子（ネスト） ミックスイン Sassを使うにはRubyをインストールする必要があります。 Ruby ⇒ プログラミング言語の一種。 Python ⇒ プログラミング言語…
テキストエディターでメモ帳があまり使われない理由。 文字コードが一致しない。 メモ帳のUTF-8で保存すると、バイナリーモードで見ると、BOMと呼ばれるものが勝手に入ってしまう。 BOMはphpなどの記述でエラーが起こる原因になる。 メモ帳はUTF-8N（BOMを回…
cssは記述していくと上書きされていきます。 例 /*reset*/ body,h1,h2,h3,h4 { margin:0; padding:0; } h1{ margin:0 auto; } 複数のcssファイルがある場合もスタイルが上書きされてしまうので、 上書きしたくない場合はタグにclass名やid名をつけましょう。…
