知ってると便利なCSSのテクニックのまとめ -CSS Protips
リスト要素で実装したナビゲーションの右端のボーダーを取り除くシンプルな方法、flexboxで実装したカラム間の溝の最後の溝を取り除く方法、天地の中央に配置など、知ってると便利なCSSのテクニックを紹介します。 CSS Protips -GitHub CSS Protipsのバージョンアップ版の紹介記事はこちら。 CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips CSS ProtipsのライセンスはMIT Licenseで、個人でも商用でも無料で利用できます。 下記のスタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 リスト要素の最後だけボーダーを適用・削除 body要素に「line-height」を加える 天地の中央に配置 ネガティブなnth-childを使用してアイテムを選択
Macのプレビューの裏ワザ！optionキーで書き出せるファイル形式が増える - あなたのスイッチを押すブログ
「jpg画像をgifに変換したいなー……。そうだ！プレビューで画像を開いて、別の拡張子で書き出せばいけるやん！」 確証はありませんでしたが、Macのプレビューアプリって意外と高機能だったりするんで、当然gif形式への書き出しもできるだろうと思っていました。 でも、結果は…… 予想が外れた感じでガッカリ。でも、gifなんて一般的なファイル形式だから、書き出せてもおかしくないはず……。なんだか違和感が拭えませんでした。 そこで改めてプレビューの書き出し形式について調べてみると、実は書き出しのファイル形式を増やせる裏技があったんです。 プレビューアプリの書き出しフォーマットを増やす方法 出し惜しみしても仕方がないので、結論だけ先に。 書き出しするときに選ぶフォーマット。このドロップメニューを選択するときに、optionキーを押しながらクリックします。 すると、今まで表示されなかったようなファイル
アクセス増加を狙え！読みたくなる記事タイトルの付け方、7つの秘密 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、メディア事業部のあゆみです。 ブログメディアの運用をしている中で、「ブログを読んでもらうにはどうしたらいいのだろう？」「記事を読んでもらえる記事のタイトルってどんなコツがあるのだろう？」という思いで毎日タイトルとにらめっこしています。 そこで、日々の経験で見つけた、バズる…とまで言うとなんですが、【より多くの人にアクセスしてもらうためのタイトル付け】に気をつけるべきポイントを、LIGブログでのタイトルを例にまとめました。 LIGブログを執筆している社員やライターの方はもちろん、ブログを書いている方の参考になれば幸いです。 1 . 検索エンジンを意識した文字数、30字までにおさめる 主な検索エンジンでは以下の文字数まで表示されます。 Google – 全角30文字前後(ほぼ固定) Yahoo – 全角28～33文字程度(可変) 以上を考慮して、長くても全角30文字程度で内容が把握
めっちゃ便利！Google英語版を速攻で検索できるようにChromeを設定する方法 – 和洋風KAI
全国1億人のプログラマーのみなさん、こんにちは。するぷ（ @isloop ）です。 僕がプログラムに行き詰まった時に行動ナンバー1は「Google英語版」でググることです。 なぜわざわざ英語版でググるのか？ それはプログラムのノウハウは日本語より英語の方が多いからです。 騙されたと思って、分からないメソッドやエラーコードを英語版でググってみてください。テンション上がるほどノウハウがリストアップされます。特に、stackoverflowの充実っぷりはネ申です。 しかし、日本語版Chromeをそのまま使っているとGoogle英語版を検索するのは結構大変です。 いくつものボタンをクリックしなければいけませんし、それに一度設定したらまた元に戻さないといけなくなります。 というわけで今日は、Google英語版を速攻で検索できるようにChromeを設定する方法をお教えしたいと思います。 Chromeで
tips レスポンシブWebデザイン FacebookのLike Boxをリキッドレイアウトへ対応させる方法
Webサイトやブログなどにソーシャルプラグインを設置するのは、もはや当然なくらいなわけですが、今日はその中からFacebookのLike Boxを設置した際に、それをリキッドレイアウトへ対応させる方法を紹介します。 FacebookのLike Boxの設置コードには、それの横幅を指定してやる必要があります。以下のようなコードですね。 <div class="fb-like-box" data-href="http://www.facebook.com/2843.jp" data-width="500" data-show-faces="true" data-stream="false" data-header="true"></div> この例では横幅を500pxに指定していますが、ブラウザの横幅が500pxより狭くなってしまうと… コレだと不格好なので、何とかしてやりましょう。「レスポ
jQueryを高速に動作させるためのポイント５つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近東京にこなれてきたどうも僕です。何がこなれてきたって？電子マネーさ！東京ならSuica、Edy、Waon、なんでもタッチで買えちゃうんだぜ！コンビニで清算するとき、「支払いはEdyで」と一言、そして、読み取り機にソフトタッチ。支払いのシャリーンという音とともに僕の白い歯がキラーンとかがやくのさっ！ そんな東京にこなれてきた僕が、今日はjQueryを使う上で気をつけておきたいポイントを何点か紹介しようと思うよ！ jQueryって便利だけど、もとはJavaScriptで、インタプリタ言語で、コンパイル時に最適化なんてされないから、書き方一つで意外とパフォーマンスに差が出てくるんだよね！開発時は高スペックのPCで見てるから気づかないかもしれないけど、あなたのサイト、低スペックマシンとかモバイル端末でみたら、もっさもさかもよ！ っというわけで、jQueryを使う上で気をつけたいポイントを挙げて
美しい半透明のパネルを簡単に作成できるPhotoshopのスタイルのまとめ
最近のトレンドのぼやけたブラーの背景に載せたり、美しい写真の背景にも映える半透明のパネルやテキストを簡単に作成できるPhotoshopのスタイルを紹介します。 素材はレイヤースタイル・aslファイルでダウンロードできます。
楽してコーディング！Dreamweaverのテクニックいろいろ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのハルエです。 以前のブログで、Dreamweaverのオススメ拡張機能についていくつか紹介させていただいたのですが、今回はDreamweaverに標準搭載されている隠れた便利機能についてご紹介させていただきます。 CS6から導入されてまだまだ浸透されていない機能や、搭載歴は長いのにあまり知られないまま謙虚に過ごしている機能がたくさんあると思うんです。 CSSトランジション Dreamweaver CS6のCSSトランジションを使用すると、CSS3によるtransition効果がコードを記述することなく簡単に設定できます。 ベンダープレフィックス(-webkit-など)も自動で生成してくれます。 使用手順 1.［ウィンドウ］→［CSSトランジション］パネルを開き、追加ボタン［＋］をクリックします。(htmlファイルを選択した状態にしておかないと、選択できません。) 2
Google Analytics にカスタム変数を設定する | バシャログ。
kimoto です。我が家には、コタツには入るし、雪が降ると外に出たがらない犬がいます。おまえは本当に犬か？猫じゃないのか？ さて本日は、Google Analytics のお話。 とにかく便利な Google Analytics ですが、さらに細かくビジター情報を取るために、カスタム変数を設定出来ることを知らない方は意外と多いと思います。 そこで今回はカスタム変数の設定方法を簡単に説明してみようと思います。 カスタム変数とは？ カスタム変数とは？何ができるの？ってことで、簡単に説明します。 ただでさえ細かく解析してくれる Google Analytics ですが、さすがに同一 URL の場合はサイト上でのユーザ定義までは取得できません（例・ログインしている、していない、など）。 その辺りを補って、任意にセットできるのがカスタム変数になります。 カスタム変数の項目説明 カスタム変数で設定す
CSSで文書の段組表現を行うcolumnプロパティの使い方
CSSレイアウトやってると段組もボックス並べてやっつけちゃいたくなりますが、一連の文書を段組にそって記述するために途中でぶった切ってボックスまたいで書くのは面倒くさいし記述の方法としてももなんか変です。 というわけでビジュアルじゃなくて文書読ませるのに段組をするプロパティのご紹介。 段組にすると視線の横移動が少なくて済むお題のHTMLはこちら。 <div> <p>上海のある家の2階で、占い師をやっているインド人の老婆が、アメリカ人の商人と話し合っていた。商人は戦争で大儲けをする為に、日米戦争がいつ頃起こるのかを占って欲しいと頼む。始めは渋っていた老婆だが、前金として小切手をもらうと愛想が良くなり、自分にはアグニの神がついているから占いは絶対に外れないと言って引き受ける。商人が帰ると老婆は家にいる一人の少女を呼びつけ、今夜アグニの神にお伺いをたてるなどと話す。</p> <p>丁度その時、下の
知ってるとちょっと役に立つCSSのTipsまとめ
ちょっとのつもりでCSSサンプルコードチマチマ書いて記事化してたら10件以上たまってました。 基本的に私はWeb屋さんではないので結構いい加減なコーディングしてたりもしますが、WEBサイト制作ではよく使いそうなプロパティについて使い方を説明してますのでなにかと参考にしていただければ。 こういった記事は基本的に「知らない人向け」に書いて（だからこそ役に立つ）ますので、不必要な部分はあえて端折ったりしている一方で必要なところはやや冗長と思われても出来るだけ詳しく書いてるつもりです。あくまで初学者向け。 というわけで当ブログCSSネタまとめ2013年2月版ということで。 1.長文テキストを段組CSSで文書の段組表現を行うcolumnプロパティの使い方 一連の長～い文章を1つのボックス内で段組するにはどうすればよいでしょうか？というお話。columnは地味というかあんまり知られてないプロパティっぽ
印刷とは異なるウェブならではの基本的な5つのデザインルール
僕もこの記事のように印刷からウェブに移行した組ですが、最初は印刷とウェブではルールが違うので戸惑いました。もちろん、印刷時代の知識も役にたったものが数多くあります。 なぜフォントのサイズが小さいとよろしくないのか、サイドバーはなぜ右側なのか、ナビゲーションはなぜ上部なのか、印刷とは異なるウェブならではの基本的な5つのデザインルールを紹介します。 5 Design Rules No Blog Should Break 下記は各ポイントを意訳したものです。 はじめに 本文は大きいサイズで、分かりやすく 右側のサイドバー クリーンなカラー 上部のナビゲーション 常に画像を使用する はじめに はじめに 印刷デザインの世界からウェブデザインに入った時、いくつかのミスをしていました。一番大きなポイントは、新聞や雑誌のようにはウェブは使わないということです。紙を読む時とスクリーンを見る時では、どのくらい
DreamweaverでCSSをコードフォーマットした時にルール間に空白行を入れる設定方法 – bl6.jp
Dreamweaverを使っていて、CSSをコードフォーマットした時に自動でルール間に空白行を入れるようにする設定方法をメモしときます。1行空白が入ることで個人的にはとても見やすく感じます。「ソースフォーマットの適用」のアイコンをクリックするだけで全部のルール間に空白が入るので楽ですね。 [ads_center] 環境設定 上部メニューから「Dreamweaver」→「環境設定」をクリックします。Macをお使いの方は「コマンドキー + uキー」でも開くことができます。 左のカテゴリ一覧から「コードフォーマット」を選択し、「高度なフォーマット」にある「CSS」をクリックします。 そうすると、「ルール間に空白行」という項目があるのでこれにチェックを付けます。 これで、プレビューにあるようにルール間に空白行が挿入されます。 実際に使う場合は、CSSファイルを開いている状態で「ソースフォーマットの
Fireworksで複数画像を一気にリサイズして書き出す方法（非バッチ処理） | バシャログ。
Fireworks で複数の画像を一気にリサイズする場合は［ファイル］→［バッチ処理］が最速だと思われますが、今回は別の方法での作業手順をご紹介します。 画像をリサイズした後に、ちょっと編集したい（個別にフィルタをかけたいなどの）場合は、こちらの方法のほうが結果的にスムーズかも。 今回使用するのは Fireworks CS5 です。 STEP1 画像のリサイズ 1. Fireworks を起動し、新規ドキュメントを作成する。 2. 作成した新規ドキュメントのステージ上に、リサイズしたい画像をドラッグ＆ドロップ。 3. カンバスをフィットする。（［変更］→［カンバス］→［カンバスを合わせる］） 4. 画像サイズを変更する。（これでカンバス上の画像が全てリサイズされます） 現時点では、レイヤー 1 の直下に全ての画像が配置されています。 STEP2 画像を個別のレイヤーに分配して加工 5. ［
jQuery.Deferred を使ってみる。 | バシャログ。
カーテンのない家には住めない事に気がついたminamiです。 jQueryにはjQuery.Deferred というオブジェクトがあります。jQuery 1.5 のころから実装されてだいぶ経っているのですが、今までなんとなくよくわからなくて苦手意識があったので改めて使ってみました。 jQuery.Deferred ってなに？ "deferred" の意味を調べると「延期された」「遅延された」などの意味があります。乱暴にまとめてしまうと、様々な処理が終わった後に呼ばれる（遅延された）処理を監視してくれるオブジェクトと言えます。 何を言っているのかわからん 文章で書くとまどろっこしいのでサンプルを作りました。1～4の処理が全て終わったら完了の表示を出します。 jQuery.Deferred を使った処理の管理 window.setTimeout() などのタイマー処理 jQuery.ajax
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Webデザイン フィード詳細 - 知ってるとちょっと役に立つCSSのTipsまとめ | 56docブログ