モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
最近、白黒カラーベースのサイトを 作成したのですが、その際に色々と 参考にしたアイコンやバナーなど のWeb素材やインスピレーション 向上の為のWebデザイン例に なりそうなサイトをまとめておきます。 結局アイコン等は使わなかったんですが、また作る時の備忘録としてメモ＆シェアしたいと思います。ライセンスはそれぞれご確認を。多少重いかもしれません。アイコン、ボタンやバナー、その他の素材、ギャラリーと続きます。 アイコン白黒やグレーのアイコンいろいろ。 40 greyscale icons グレースケールアイコンパック。 40 greyscale icons twotiny 白黒のミニアイコンが沢山。 twotiny 165 vector icons 165のうち、66が白黒のアイコン。 165 vector icons bwpx.icns かなりの数の白抜きミニアイコンが揃っています。 bw
2013年08月11日10:00 転ばぬ先のWordワザ これだけは覚えておきたいWordテクニックまとめ カテゴリ 昨日のExcelまとめが思いがけずに好評だったのはお盆休み突入の初日だったからなのか、各地で最高気温を更新するような酷暑のためネットを見ている人が多かったためなのかは、いまいちわからなかったが、興味を持って下さった方々へ感謝の気持ちをお伝えしたい。また「文章中にWordのまとめとあるのにどこにもリンクはないじゃないか！」という問い合わせが多かったので本日、ここで紹介しておきたいと思う。大変申し訳なかった。 なお、Excelまとめの内容とは関係なく、昨日の文章中で紹介したIT系の派遣業務でどういった仕事があるのかという問い合わせが、意外に多かったので、筆者の経験で知る限りのことをここで紹介して返事とさせてもらいたい。ただ、具体的にどこの派遣会社でどういったメーカーの仕事という
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。 更新: 2016/3/7 13, 14, 15を追加。 更新: 2016/4/13 16, 17を追加。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区
PDFをKindle Paperwhite向けに史上最高レベルで変換してくれるk2pdfopt : NETBUFFALO
Kindle を購入したら何をしたいと思いましたか？ 勿論、Kindle 向けに電子化された本をストアで購入して読むのも楽しみでした。 ただ、僕が最初に期待したのは PDF 化された既存資産（電子書籍データ）を Kindle で読むことだったんです。 でも、これには少しがっかりしました。文字密度が高く、図・表も含まれ、場合によっては１ページに２カラムで記述される技術系PDF資料（例えば論文）を読むのにKindleが適しているとは言い難い状況だったんです。 色々と試したんですが、PDFをKindle向けに変換するツール・方法に銀の弾丸は無い、それが僕の結論でした・・・しかし、久しぶりに”PDF to Kindle”で感動するツールに出会いましたよ！ それが今日ご紹介する k2pdfopt 。 複雑なPDF電子書籍をKindleで読むことの難しさ 詳しくは下記エントリに書きましたが、図・表の含
CSSの進化が止まりません。 ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します。 Zig Zag Border Created CSS 最近見かけるようなったジグザグのボーダー。画像の使用はなし、divの三角形をたくさん並べるでもなく、普通にdiv一つだけで実装できます。区切り線としてもパネルの飾りとしても利用できます。 SVGを使った版はこちら、Pinked Border
IDEA * IDEA
ドットインストール代表のライフハックブログ
作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 １．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー ３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ
2013年05月05日14:00 GW後にWordの使い手になる！ これは覚えておきたい珠玉のWordの小技集【知っ得まとめ】 カテゴリ 社員研修も終わり、ゴールデンウィーク前後に配属部署が決まるといよいよ本格的な仕事に移るわけだが、この時期に不安にかられて五月病になる前に、ITライフハックの中の人からアドバイス「誰だって最初は新人だった」。 いまアナタをエラそうに叱っている人も、3年くらい前に先輩から同じことを言われてうなだれていた口だ（間違いない）。 周りの連中と差を付けることができる何かを身に付ければ、それが自信となってモチベーションへとつながっていくだろう。そこでビジネス文書の作成で必須ともいえるWordの小技をまとめてみた。一部Excelでも使える共通のテクニックもあるので参考にして欲しい。 ■Wordの表の左端の列幅を変更し、残りの列幅を均等にする【知っ得！虎の巻】 Wordで
そのモバイルサイト見やすい? 使いやすい? ユーザビリティをアップさせるチェックポイント7 : LINE Corporation ディレクターブログ
こんにちは、「プチペット」を担当している吉沢です。 最近はモバイルサイトを作成するためのブログやノウハウ本などがたくさん出てきて、とても便利になってきましたね。 個人的にはモバイルサイトのデザインやユーザインターフェース関連に関心が高いので、ブログでは「モバイルデザインアーカイブ」さん、「case:MobileDesign!」さん、本では日々、こちらで勉強させていただいております。 モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。 著者：株式会社ゆめみ 販売元：インプレスジャパン 発売日：2008-12-25 おすすめ度： クチコミを見る モバイルデザインアーカイブの本。―携帯Webコレクション 著者：モバイルデザインアーカイブ 販売元：春日出版 発売日：2009-08 おすすめ度： クチコミを見る ケータイサイトのレイアウト 企業・キャンペーン・サービ
<hr class="style**"> <style> hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted #8c8b8b; } hr.style5 { background-color: #fff; border-top: 2px dashed #8c8b8b; } hr.style6 { background-color: #fff; border-top: 2px dotted #8c8b8b; } </style>
![[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2cf8d2fa440a82f4d989af711914223cad329f6/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015121100.png)
1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん！ デモページ 各デモと共にそのスタイルを紹介します。 まずはHTMLから。基本となるのは、2パターンです。 1つ目は、section要素にclassをつけるだけ。 <section class="ss-style-hogehoge"> コンテンツ </section> 2つ目は、svg要素を使用します。 <section> コンテンツ </section> <svg id="hoge"> SVGの中身 </svg> sctionだけの場合はclass、svgを使用するものはidになっています。 以下、各デモとそのスタイルです。 HTML/C
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
Custom Field GUI Utility 3.2 - WordPress プラグイン | かたつむりくんのWWW
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. Custom Field GUI Utility 3.2 は、WordPress 3.3以降用です。3.4でも使えると思います。 このページは、Custom FIeld GUI Utility 3.2 のドキュメントです。過去のバージョンのドキュメントは、以下のページにあります。 ver 2.x ver 3.0x 〜 3.1x Custom Field GUI Utility とは このプラグインは、WordPress のカスタムフィールドを、色々な数種類のフォーム要素として使えるようにするプラグインです。 当プラグインの元となっているプラグイン「Custom Field GUI」は、「投稿」の編集画面にカスタムフィールドを入力するフォームを生成するもので
Tween － Windows用Twitterクライアント [Tween] ベータ 公開－きりの日記
English page is here まとめサイト 最新情報は、mozこと@syo68k様がまとめてくださった「Tween まとめサイト」をご覧ください。 （moz様、ありがとうございます！） ＜以下、内容が古くなっております。＞ Twitterクライアントを作ってみました。 現在バージョン0.1.9.0（2008/12/25） 動作環境 .Net Framework2.0以降が導入されているWindows。 必須：Microsoft .NET Framework 2.0 Service Pack 1 (x86)のダウンロードページ 特徴 ヘビーユーザーにも満足してもらえるクライアント、という位置づけです。 API使ってないので、API制限には引っかかりません。（デフォルト90秒ごと） でも、APIを使わずHTMLを解析しているので、Twitterの仕様変更時は使えなくなります。（ぇ
![Tween － Windows用Twitterクライアント [Tween] ベータ 公開－きりの日記](https://cdn-ak-scissors.b.st-hatena.com/image/square/1172a50c7ec379bef444114d58b633285f43c34a/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F4154fa81b5cdd3be85e429a83962571215543498%2Fbackend%3Dimagemagick%3Bheight%3D1200%3Bversion%3D1%3Bwidth%3D1200%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252FK%252FKiri_Feather%252F20071206%252F20071206162730.jpg)
あなたのフォームは、ユーザーが簡単に利用できますか？ もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 フォームは入力前、入力後の分かりやすさが大切 最近のフォームで見かける問題 1つ目：ラベルとフィールドを上から順番に配置した場合 2つ目：ラベルをフィールドの内側に配置した場合 3つ目：ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと
最近のWeb制作に役立つ、CSSの便利ツール総まとめ
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
div要素はひとつだけ、CSS Flexboxを使用してテキストの左右に水平線を引くスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルで、テキストと水平線はレスポンシブ対応で、カラーやサイズや左右のマージンも簡単に変更できます。 div要素ひとつだけで実装する テキスト付きの区切り線 まずは、最終のデモをご覧ください。 テキストの左右に水平線を引いた区切り線は、div要素ひとつだけで実装されています。モダンブラウザはもちろん、EdgeでもIE11でも大丈夫です。 実装のポイント div要素ひとつだけ、spanなど余分な要素は必要なし。 divに限らずブロック要素、h1で見出しの装飾としても使えます。 画像やSVGなども必要なし。 水平線は、カラー・サイズ・マージンの変更ができる。 フォントのサイズを大きくしても自動で調整される。 水平線はレスポンシブ対応。 背景が画像でも水
男の趣肴ホームページ
<body background="otoko/icon/star3.gif" onload="StsScroll(); suraido()"> <!--webbot bot="Include" U-Include="otoko_index-ad.htm" TAG="BODY" startspan --> <script language="JavaScript"> <!-- clearTimeout("suraido()"); num=1; function suraido(){ if(num==1){ document.photo.src="otoko/make/picture/udon_10.jpg"; num=2; }else if(num==2){ document.photo.src="otoko/make/picture/miso_13.jpg"; num=3; }else
ブログ検索において、RSSは必ずしも記事全文を配信していないので、クローラーが記事のURLにアクセスし記事の本文を取得するケースが多いようです。 「gooブログ検索」「ブログレンジャー」開発者が語るブログ検索技術Yahoo!検索 スタッフブログ Yahoo!ブログ検索より細部改善のお知らせ上記の記事ではどちらも本文を抽出してくる、とあっさり書かれていますが100%に近い精度を実現するとなるとそう簡単ではないはず。 ちょっと調べてみたら以下のような取り組みが論文として読めました。英語圏の文献は、検索語が悪かったのかいまいち。「blog entry extract body text etc…」 NRI 技術創発 ブログ記事の自動分類により消費者意識の側面を捉える試み（PDF）なんでもRSS! HTML文書からのRSS Feed 自動生成 南野朋之 奥村学：人工知能学会研究会資料 SIG-SW
窓の杜 - 【NEWS】ファジーな円グラフで感想や気分を表現する「べつやくメソッドクリエーター」
手書き風のデザインで文字入りの円グラフを手軽に作成できる“べつやくメソッド”支援ソフト「べつやくメソッドクリエーター」v1.0.0が、4日に公開された。Windows 2000/XPに対応するフリーソフトで、現在作者のホームページからダウンロードできる。なお、動作には.NET Framework 2.0が必要。 “べつやくメソッド”とは、感想やインスピレーションなどを1つの円グラフで表現する一種のプレゼンテーション技法。複数の要素を印象の強い順に大きく表示することで、文章で説明するよりも端的に内容を伝えられるのが特徴だ。@niftyの企画コーナー“デイリーポータルZ”にて、べつやく れい氏が提唱し、これを紹介したImpress Watchのエイプリルフール企画記事において、同氏の名を冠して命名された。ビジネスのプレゼンテーションよりは、ブログにちょっとした感想を掲載する場合になどに適してい
レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説
CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を紹介します。 Use cases for CSS comparison functions by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 比較関数の使用例: 流動的なサイジングとポジショニング 比較関数の使用例: 装飾要素 比較関数の使用例: 流体ヒーローの高さ 比較関数の使用例: ローディングのバー 比較関数の使用例: コンテンツの区切り線 比
要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか？ flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できます。さらに、区切り線をグラデーションや破線にするのも簡単です。 CSS flexboxでレスポンシブ対応の区切り線を実装する巧妙で素晴らしいテクニックを紹介します。 Flexbox Dynamic Line Separator by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 区切り線の実装 なぜ区切り線が小さい四角になるのか 区切り線の太さ グラデーションの区切り線 破線の区切り線 これを行う別の方法 終わりに はじめに UIをデザインしているときに
HTML Living Standard の5月2日付けの更新で <select> 要素の子要素として <hr> を含めることができるようになりました。 Proposal: Allow adding separator rows to <select> boxes using <hr> · Issue #3410 · whatwg/html Allow <hr> to be used inside <select> as a separator by annevk · Pull Request #9124 · whatwg/html 4.4.2 The hr element 4.10.7 The select element <select> 要素の中をグループ化する方法としては、従来から <optgroup> 要素が存在しますが、これは label 属性による可視ラベルの設定が必須なため
iPhone 用 Web ページおよびアプリケーションの作り方 - iPhone Development Guidelines を読む Apple 公式 iPhone ウェブ開発ページ Apple が iPhone 用ウェブ開発ページを公開しました。（追記：Apple から日本語訳も出ました。） Apple Developer Connection -iPhone Dev Center（英語ページ・旧称 Web Development for iPhone） WWDC 2007 で明らかになったのは1、iPhone では API の公開や SDK の提供はなく、iPhone 用にアプリケーションを開発するには、ウェブアプリケーションとして提供するしかないということです。（追記：その後、2008年に SDK が提供されることになりました。） WWDC 2007 のセッション内容には、“Dev
はやわかり reStructuredText
本マークアップ記法の完全な詳細は reStructuredText のページに示されています。このテキストは、覚書としての性格の文書です。 "(詳細)" というリンクを辿ると reStructuredText 仕様書を参照できます。 ただし、相対リンクとなっていますので、リンク切れの場合は、 原版の "Quick reStructuredText" から参照してください。 目次 インライン マークアップ バックスラッシュによるエスケープ 章立ての構造 段落 記号つきリスト 番号つきリスト 定義リスト フィールドリスト オプションリスト 整形済みブロック ラインブロック 引用 Doctestブロック 表 区切り線 明示的マークアップ 脚注 出典 リンクターゲット 外部ターゲット 内部ターゲット 間接ターゲット 暗黙ターゲット ディレクティブ 代入参照とその定義 コメント 助けを得たい場合は
長方形ではないヘッダやコンテンツが最近増えてきました。その一つとしてヘッダの下、コンテンツを区切るラインを斜めにすることで、簡単にデザインの印象を変えることができます。一見シンプルに見えますが、実装するには慎重を要します。 ラインを斜めに実装するCSSやSVGのテクニックをコードのシンプルさ、コンテンツの生成、対応ブラウザ、パフォーマンスの面から実装に適した方法を詳しく紹介します。 Ultimate Guide to Non-Rectangular Headers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 斜めのラインをCSSやSVGで作成する方法 斜めのラインをCSSのボーダーで作成 斜めのラインをCSSのグラデーションで作成 斜めのラインをCSSのシェイプで作成 斜めのラインをSVGの背景で作成 斜めのラインをSVGの
![[CSS]ヘッダやコンテンツを区切るラインを斜めに実装するCSSやSVGのテクニック総まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/073c1ed9139e9dac94415303caed23cb2c34be93/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017020301.png)
コンテンツの区切りに使用する線、デザインのアクセントに使えるラインやボーダーをCSSで素敵にデザインするスタイルシートのテクニックを紹介します。 borderプロパティを使ったシンプルなものから、グラデーションや疑似要素やアニメーションを使ったアイデアが素晴らしいものまで、コピペで簡単に利用できます。
![[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d81709305545d43bf246e62ef8caf6aa8f3b70da/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016120101.png)
:before, :after, :last-child, :nth-child, :not など疑似classを使った小技、レスポンシブ用のレイアウトやフォントのサイズ指定など、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 前回紹介した時は12個でしたが、アップデートされ、20個まで増えています。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区切りにする 5. ネガティブな「:nth-child」を使用してアイテムを選択 6. SVGファイ
itchynyさんのブログ記事を読んで、人のカラースキームの配色戦略を見るのはとても楽しい！と思ったので、自分も書いてみることにしました。 暗青系の落ち着いた配色でまとめています。 全体のコントラストを控えめにする感じ方は人によって様々ですが、真っ黒の背景に真っ白の文字では、個人的には目がチカチカして疲れてしまいます。 このため、Icebergではコントラストを落として、チカチカを防いでいます。背景は真っ黒ではなく、やや明るくした色を使用。前景は真っ白ではなく、やや暗くした色を使用しています。 背景には、うるさくならない程度に彩度を落とした色を敷いて、カラースキーム全体の雰囲気を出しています。 色数を絞るカラースキームを作る際にやってしまいがちなのが、色を使いすぎてしまうこと。 Vimでは、色を設定できる対象（＝ハイライトグループ）がたくさん用意されています。 これだけ充実していると、「使
CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Cases For Pseudo Elements by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 疑似要素で、親子のホバーエフェクト 一覧のリスト 疑似要素で、クリック可能領域のサイズを広くする 疑似要素を使用したオーバーレイ 疑似要素で、シャドウエフェクト :afterと:beforeのどちらを使うべきか ファイル拡張子を元にリンクのスタイル設定 疑似要
ToDo管理ツールとして「Remember The Milk」のようなオンラインサービスが人気だ。しかし「ToDoをオンラインに置きたくない」場合もあるだろう。PC上で動く無料のToDo管理ソフト「CASTPAD」「gljakal's ToDo」「MyLifeOrganized」を紹介する。 ToDo管理ツールとして「Remember The Milk」や「check*pad」のようなオンラインのサービスが人気だ（11月29日の記事参照）。オンラインサービスは、会社・自宅・携帯から同じToDoを参照できる、使っているPCが突然故障してもToDoデータに影響がないなどのメリットがある。 反面、常に1台のPCを使っている場合や、ネットに常時接続していない環境、ToDoの機密性が高いためオンラインに置きたくない場合などもあるだろう。 そんなときは、ローカルPC上で動くソフトウェアを使うのがお勧め
ことえりのキー操作を調べているうちに、ことえり以外のキー操作も気になったので。 まずはとても参考になるキーボードショートカットの紹介ページ Mac OS X のキーボードショートカット キーボードショートカット - ［Mac OSの使い方］All About Mac OS 用のキーボードショートカット | Bridge 1 Software（膨大な量！！） Mac OS X Leopard: 200+ Productivity Booster Keyboard Shortcuts 『Best OS X 10.5 Hints』コンテストに入賞したMac OSX 10.5 LeopardのTips - sta la sta 隠された10の便利なショートカット | Macの手書き説明書 Macショートカット - まとめうぃき Mac OS X 備忘録 Dan Rodney - Mac OS X
当ブログで何故か一番アクセス数がある、User Agent Switcher の携帯用のXML(2007年11月) で配布してる、 UserAgent切替できるFirefox拡張『User Agent Switcher 』用のuseragentswitcher.xmlが、だいぶ古くなってきたので見直してみました。 下記のzipをダウンロードして解凍してください。 useragentswitcher.xml.zip (22KB) 丁度、iPadの確認が欲しかったのでw おまけで個人的趣味でゲーム機も追加してます。 User Agent SwitcherへXMLの導入方法 事前準備） ・User Agent Switcher をFirefoxにインストールする（要Firefox再起動） ・useragentswitcher.xmlをダウンロードしてローカルに保存しておく Firefoxのメニュ
CSS GridやFlexboxでレイアウトを確認しながらコードを生成、box-shadowによる繊細なシャドウを見ながらコードを生成、さまざまな区切り線、border-radiusやclip-pathによるさまざまな形、UI用の美しいグラデーションやデュオトーン、グラスモーフィズム、ニューモーフィズム、CSSアニメーションなど、面倒なCSSのコードを簡単に生成できる便利ツールを紹介します。
<body background="otoko/icon/star3.gif" onload="StsScroll(); suraido()"> <!--webbot bot="Include" U-Include="otoko_index-ad.htm" TAG="BODY" startspan --> <script language="JavaScript"> <!-- clearTimeout("suraido()"); num=1; function suraido(){ if(num==1){ document.photo.src="otoko/make/picture/udon_10.jpg"; num=2; }else if(num==2){ document.photo.src="otoko/make/picture/miso_13.jpg"; num=3; }else
The <hr>-Contest Results - Download your fresh <hr>-line now! | Graphics | Smashing Magazine
We have encouraged our readers to participate in a contest by designing beautiful and creative horizontal lines. It was necessary, since this design-element was slowly disappearing and was often neglected in web design. But it is going to change now. We have received 1290 images and source-files from 384 designers across the globe. The result is an impressive collection of horizontal lines that de
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
白黒ベースのサイトを作りたい時に役立ちそうなWeb素材やWebデザイン例などのまとめ
転ばぬ先のWordワザ これだけは覚えておきたいWordテクニックまとめ : ITライフハック
プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips
awesome-css-tutorials-2014-spring.html
これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ
GW後にWordの使い手になる！ これは覚えておきたい珠玉のWordの小技集【知っ得まとめ】 : ITライフハック
[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ
[CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック
ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察 | コリス
CSSもこれで簡単に！テキストの左右に水平線を引くスタイルシートの新テクニック
zuzara.com » ブログの記事本文を抽出するスクリプトをつくってみた
CSSで区切り線を実装するのは、flexboxが簡単で便利！ レスポンシブ対応の区切り線を実装するテクニック
HTML で `<select>` 要素を `<hr>` でセパレートできるようになった
iPhone 用 Web ページの作り方 - iPhone Development Guidelines
[CSS]ヘッダやコンテンツを区切るラインを斜めに実装するCSSやSVGのテクニック総まとめ
[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ
知っておくと便利！CSSの小技・テクニックのまとめ -CSS Protips | コリス
自作Vimカラースキーム「Iceberg」の配色戦略 - ここぽんのーと
CSSの疑似要素:beforeと:afterでUI要素を実装するテクニックのまとめ
ITmedia Biz.ID：「オンラインでToDo管理」が不便なら――“PC上で使う”ToDo管理ソフト
MacBookで知っていると便利なショートカット操作 - ザリガニが見ていた...。
User Agent Switcher用XML : 携帯＋スマートフォン(＋おまけ)対応版 – 我流天性 がらくた屋
Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました
男の趣肴ホームページ(main)男の趣肴ホームページ(main)