Yukarigohanのブックマーク - はてなブックマーク

[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。 - YoheiM .NET

[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。こんにちは、@yoheiMuneです。フロントエンドとしてHTML,CSS,JSを中心と開発を行うことを仕事にして早くも半年が経ちました。最近はだいぶ効率的にコーディングが出来てきたとやっと実感してきたので、ブログにも自分のコーディングスピードアップのコツを書きたいと思います！「こんなのよりももっと良いのあるよ」などたくさんの感じる点があるかと思います。ぜひTwitterなどで教えて頂けると助かります。コーディングをスピードアップする６つ＋αのポイント自分が思うにコーディングをスピードアップする最も大切なポイントは以下ではないかと思います。めんどくさいと感じること、そして改善に動くこと幸い自分はかなりのめんどくさがり屋で、コーディング中も「これ手動！？」「マウ

Yukarigohan 2014/11/22

出来る事からやってみよう

webdesign

リンク

[フロントエンド] 第3回トリトンJSで、Material DesignとPolymerについて話してきました。プレゼン資料付きです。 - YoheiM .NET

[フロントエンド] 第3回トリトンJSで、Material DesignとPolymerについて話してきました。プレゼン資料付きです。こんにちは、@yoheiMuneです。先日の第3回 HTML5minutes！〜triton-js〜で30分間のキーノートを担当させて頂きました。今日はその内容をご紹介したいと思います。 Material Design と HTML5 今回のセッションでは以下の内容を扱いました。 Material Designについて Polymerというライブラリについて Polymerを使ってMaterial DesignをWebで実現する実装について Paper Elementの実装の味見 Material DesignはGoogle IO 2014で発表されたGoogleのデザインコンセプトです。今回のセッションではMaterial Designを紹介する

Yukarigohan 2014/11/22

webdesign

リンク

[フロントエンド] 未来を引き寄せるPolymerを理解しよう - YoheiM .NET

こんにちは、@yoheiMuneです。本日は、Polymerという未来を先取りしたライブラリを理解するためにブログを書きます。少し長いですが、最後まで読むとPolymerへの理解が進むと思いますので、お付き合い頂けたら幸いです。 Special Thanks to https://flic.kr/p/5aDA79 目次 Polymerとは何か PolymerはGoogleが開発しているライブラリの1つであり、polymer-project.orgで公開されています。 Polymerの一番大きな特徴は、Bootstrap、Angular.js、jQueryといった今までのライブラリとは性質が異なるということです。 BootstrapやjQueryといったライブラリは現在広く普及した技術を使っているのに対して、PolymerはWebComponentsやデータバインディングといった新しい（

Yukarigohan 2014/11/05

リンク

[Web] 固定幅＋リキッドレイアウトにする方法（table-cellを使う） - YoheiM .NET

こんにちは、マークアップの仕事を始めた@yoheiMuneです。今日は、固定幅＋リキッドレイアウトを、floatとmarginの技ではなくて、 table-cellを使った最近っぽいやり方で実現する方法を学んだので、ブログに残したいと思います。 table-cellとは？ table-cellは、CSSのdisplay要素に利用できる値です。これを用いる事で、要素をtableの構成要素のように扱うことができ、場合によっては便利っ！と感じる事が出来ます。 table-cellについての詳細は、以下をご覧頂けると幸いです。 - 横並びにしたDIV要素の高さを揃える方法＠YoheiM.NET 固定幅＋リキッドデザインレイアウトを実現するさて本題です。今回は、３カラムのレイアウトで、左右のカラムは横幅200pxの固定、真ん中はページの長さにより可変となるレイアウトです。以下のようなレイ

Yukarigohan 2014/08/04

display: table-cell;

リンク

[CSS3] 横並びレイアウトを簡単に実現するdisplay:boxが便利 - YoheiM .NET

こんにちは、最近新しいゲーム作りに仕事が変わった@yoheiMuneです。新しい案件で、「display:-webkit-box」という見慣れないスタイルを発見。聞いてみると横並びにしたりするのにすごく便利なようで。その具体的な使い方を今回はブログに纏めました。まず始めに display:boxは、横並びレイアウトを行うために大変便利な機能ですが、2013/01現在はまだ使用策定中です。最新の情報は、以下よりご参照ください。 - http://dev.w3.org/csswg/css3-flexbox/ また良くある疑問で「便利だけど動くブラウザあるのー？」という疑問については、以下のようなサポート状況のようです。引用元：http://caniuse.com/#feat=flexbox ベンダープレフィックス付きで、だいたいのブラウザで動きそうな感じです。特にスマホ用のマークア

Yukarigohan 2014/08/01

css3 横並び

webデザイン

リンク

[CSS] Lessに詳しく入門してみた - YoheiM .NET

Scssと同じくCSSの記述を100%サポートしつつ、入れ子構造やMixinなどの書き方も可能。lessファイルをそのままブラウザで読み込んで動的にコンパイルする仕組みがあったり、素のJSをCSS内に書けたりと、Scssよりプログラマ向けかも。それぞれ特徴がありますが、今回はLessを詳し目に入門することを書いていきたいと思います。２、Lessの特徴各種あるCSSプリプロセッサの中で、Lessの特徴は以下となるかと思います。 [メリット] lessファイルをHTMLで読み込んで、CSSとして反映することが出来る。開発中は便利。 [メリット] Lessに最初からwatch機能が付いていて、指定した時間ごとにlessを読み込み直してくれる。これも開発に便利。 [メリット] Less内にJSを記述することができる。例えばWindowの高さを取るとかできちゃう。 [デメリット] ScssのC

Yukarigohan 2013/09/15

less sass

CSS
less

リンク

はてなブックマーク

タグ

ブックマーク / www.yoheim.net (6)

お知らせ

月間はてなブックマーク数ランキング（2024年9月）

今週のはてなブックマーク数ランキング（2024年9月第5週）

今週のはてなブックマーク数ランキング（2024年9月第4週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス