あまり知られていないBootstrapスタイルテクニック、小技16個まとめ
[fancy_box]この記事は海外デザインブログScotch.ioで公開された「Bootstrap 3 Tips and Tricks You Might Not Know」と「Bootstrap 3 Tips and Tricks You Still Might Not Know」の著者Nicholas Cerminaraより許可をもらい、ポイントをまとめて抄訳しています。Thanks again, @nickforthought!![/fancy_box] Twitter謹製フレームワークBootstrap 3は、フロントデベロッパーの開発スピードアップの手助けをしてくれる機能が多数収録されています。ときには特別なコンテンツのためにCSSやJavaScriptを使ってプログラムした後に、Bootstrap初期設定だけで解決できることに気付いたことがあるかもしれません。 これではWeb
3分あれば十分！もうひと工夫加えるだけでレベルアップするデザインTips 25選 - Brian'z Imagination
はてなでブログを書き始めて2週間ほど経過したのだけれど、ブログを始めると書く内容そっちのけでやたらとデザインにこだわりたくなることがある。 特に、ホットエントリーを覗いてみると、内容はもちろんすばらしいものばかりだけれど、なかにはデザインが素晴らしいサイトもあって、魅了されることがある。 どんなふうにデザインしたのか、どういう思考回路になるとこんなデザインが思いつくのか、などなど。 デザインはデザイナーの既得権益・不可侵領域はなく、万人が自由に扱えるものだ。そして、デザインはセンスではなく理論(theory)だ、ということも以前書いた。 デザインを勉強すれば、ブログに手を加えたり、自分で名刺を作ったり、部屋をお洒落にコーディネートしてみたり、いろんなことができる。 ブログでいえば「Webデザイン」というジャンルから始めるのが定番ではあるのだけれど、これからデザインを始めるひとにはぜひ「グラ
Macの動作が重いと感じた時のメンテナンス方法&高速化に役立つアプリ30選
Macで仕事を行っている人にとって、動作のモタつきやフリーズは絶対に避けたいもの。突然動かなくなってしまっては、仕事に支障がでてしまいます。もしかすると、そのようなトラブルは日々メンテナンスを行うことで、防げたかもしれません。 Macはすこし負荷を掛けて使っても“意外に”動いてくれるだけあって、ついメンテナンスを忘れがち。今回は、少しでも動作が重いと思ったら行っておくべき方法と、高速化アプリを30種類ご紹介します。 Macのメンテナンスと高速化のために試したい方法24選1.アプリケーションが応答しなくなったとき試すショートカットMacの動作が重いなと感じたとき、真っ先に起こりうるのが「アプリケーションが応答しない」状態。もしも、アプリケーションが固まってしまった場合、強制終了をすることで解決できます。 というコマンドを入力すると、アプリケーションの一覧が表示されます。強制終了したいアプリを
【レスポンシブ（リキッド）HTMLメール】outlookで幅を固定する対処法 ｜ Tips Note by TAM
HTMLメールを作成する際、レスポンシブやリキッド対応を求められることが多くなりました。 リキッドレイアウトのHTMLメールでは、外側の要素にmax-widthで最大幅の指定をして、中の要素は固定せずにパーセント指定でコーディングすることが多いのではないでしょうか。 しかし、outlookではmax-widthのCSSがサポートされていません！ PCモニターなど大画面で見るとmax-widhtが効かずに100%のまま横いっぱいに伸びてしまい、 センタリングや右寄せにしていた要素が、左寄せのテキストとかなり離れた位置になってしまいます。 こんな感じですね。 そんなoutlookで幅固定をする対処法をご紹介いたします。 IEの条件付きコメントの書き方が、outlookにも使えます。 <!--[if gte mso 9]> ＝＝＝＝outlookのみ対応＝＝＝＝ <![endif]--> 下記の
【スライス不要】Photoshop画像アセット生成の基本とつまずきがちな5つのコト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） スライスせずに書き出せるPhotoshopの「画像アセット生成」って？ 画像アセット生成とは、ファイルのレイヤーやレイヤーグループのコンテンツからJPEGやPNG等の画像アセットを生成するという、スライス作業を不要とする機能です。PhotoshopCCから実装されている機能で、CC2014以降は画像に加えてSVGの書き出しも可能となりました。 普段からコーディングもしているデザイナーさんは効率化のために早くから使ってい
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
デザインは第一印象が大切！5秒でできる3つのデザインチェック方法 | Webクリエイターボックス
デザインは第一印象が大切！5秒でできる3つのデザインチェック方法人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう！ ぼかしテストぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。 テスト方法Photoshop を使う方法と、ブラウザーを使う方法があります。 Photoshop を使う方法バナー広告や Web サイトのスクリーンショット画像を用意Photoshop で フィルター＞ぼかし＞ぼかし（ガウス）で 5〜10px ほど画像をぼかすChrome ブラウザーを使う方
【簡単】2023年Photoshop切り抜きおすすめテクニック15選 完全ガイド
コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」（複雑な背景バージョン） オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー（Command/Ctrl+J）したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
