『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
こうして見てみると、一段階上のサイズが追加されたというよりも、xs と sm の間が細かくなったという感じですね。 flexboxのサポート $enable-flex: true;を設定することでflexbox Layoutが使用されるようになります。これにより、tableやfloatを使っていた様々なハックが改善されるとのこと。ただし、IE9はflexbox Layoutをサポートしておらず、IE10でも古い仕様にしか対応していないため、デフォルトではこのオプションはfalseになっています。 well, thumbnail, panel を廃止、card に統一 コンポーネントの well, thumbnail, panelがなくなり、cardに統一されました。 CSSリセットを Reboot というモジュールに統一 CSSリセットには、Bootstrap3ではNormalize.cs
Androidをはじめ、Googleサービスで導入されているMaterial Design(マテリアルデザイン)のUI/UXを簡単に使うことができるライブラリが公開されました。 配布元はGoogleで、Material Design Liteと呼ばれるライブラリです。 CSS font Javascript のライブラリです。 早速使い方と使用例を見て行きたいと思います。 ダウンロード Material Design Lite 上記URLからどうぞ。 DLが済んだら配置し、以下のように指定してあげます。 <link rel="stylesheet" href="./material.min.css"> <script src="./material.min.js"></script> <link rel="stylesheet" href="//fonts.googleapis.com/i
2015年8月10日 Webサイト制作, 便利ツール 以前、すでにWeb制作者として就職している方から「まわりの同僚のように早く作業ができない」「作業の効率のいい進め方がわからない」という悩みを受けたことがあります。作業の効率化について紹介しているWebサイトや書籍も多く見つけられるかと思いますが、実際に手を動かしているところを見るのもひとつの方法です。他の人がどう作業を進めているか、見てみましょう! ↑私が10年以上利用している会計ソフト! 人がコーディングしているところを盗み見 「盗み見」なんてあまりいい響きではありませんが、賛否はどうあれ「技術は見て盗め!」という昔からの教育方針も存在します。会社の先輩、学校やコワーキングスペースの凄そうなオーラを醸し出している人の作業を見てみるといいかも。もちろん、絶対に作業の邪魔はしないようにしましょう! 「技術を見て盗む」メリット 作業の新しい
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典(ひらお ゆうてん) === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
1. はじめに 1-1. 技術の概要 エンジニアの技術は、かなりざっくり言うと、 フロントエンド → 見える部分。 (例)HTML、CSS、JavaScriptなど サーバサイド → アプリケーションを動かす中身の部分。 (例)Java、PHP、Ruby、C、C++、Perlなど インフラ → Webアプリケーションを動かすための環境構築など。 (例)Webサーバ構築、DBサーバ構築、DNSサーバ構築など の3つに類別できる。 その中で、プログラミング未経験者が最も手をつけやすいのが、フロント(HTML、CSS、JavaScript)の技術である。 ※ 上記は、「Webアプリケーション開発」のお話です。 ※ 「ネイティブ開発」ではObjective-C/Swift/AndroidJava/Cocos2d-x/Unityなどがよく使われる。 1-2. フロントの概要 フロントの技術を学ぶため
元のGitHubリポジトリは次の通り。そのまま転載します。 https://github.com/higuma/bootstrap-3-note Bootstrap 3 学習ノート (2014-06-09 ... 18) Bootstrap 3の学習記録ノートです。 できるだけ手を抜かず隅々まできちんと調査し、コードはほぼ全て実際に試して確認しました。 元々公開を意図したものではありませんが、ここまで詳細に調べた資料はそうはないと思いますので最低限の体裁を整えて公開します。みなさんのお役に立てば幸いです。 なおHTML部分はほぼ全てjadeで記述しています。jadeを知らないと理解できないノートになってしまっていますが、生のHTMLではとてもこのスピードでは学習できません。どうかご了承下さい。 なお「ここは違うのでは」「こうした方がよいのでは」などという点がありましたらGitHubのiss
こんにちわ。アートディレクター兼2児のパパ、長岡です。 毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています(笑) 屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ(表現が古い?)にしているそうです。将来がちょっと心配です・・・。 さて今回は、HTML5・CSS3・jQueryを使用したフロントエンドツールの王道「Twitter Bootstrap(※ver2.3.1)」のお話。 ※この記事を書いている最中にver3.0がリリースされました!(汗)後でゆっくり触ってみたいと思います。 ▲Twitter BootStrap ver2.3.1 Web制作者なら、一度は触れたことがあることと思います。 そのまま使ってみたり、カスタマイズして使ってみたり・・・。 使い方を間違えなければ、とても
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く