【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ
よくサービスのプランの比較に使用される料金テーブルです。人気のプランを目立たせるために中央のデータだけ大きさを変えて飛び出させています。真ん中の飛び出しているセルはposition:absoluteで実現しています。tableの幅は絶対値で固定しているのでレスポンシブ対応させる場合は横スクロールさせる必要があります。 <table> <tr> <th>無料プラン</th> <th class="popular"><span class="inner"><span class="no1">人気No.1</span>初級プラン</span></th> <th>上級プラン</th> </tr> <tr> <td>¥0</td> <td class="popular">¥5,000</td> <td>¥8,000</td> </tr> <tr> <td><a href="#">申し込み</a></
【Javascript】リアルタイムプレビュー付き簡易htmlエディタ - Qiita
必要最低限の機能しか実装してないけどちょっと工夫すれば そこそこ実用的なものが作れるかと思います。そして楽！ クリックでデモページのzipファイルダウンロード Win,MacのChromeでのみ動作確認済みです 10/17 リンク間違ってました…ごめんなさい ソースコード <html> <head> <title>qiita_js003</title> <meta charset="utf-8"> <meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=2.0"> <style type="text/css"> *{ font-family: Meiryo; text-align: center; margin: 0; padding: 0; } #liveeditor{ margin: 10px
What you can do with project plans in Sheets - Google Workspace Learning Center
Need a quick way to divide work, assign tasks, track due dates, and receive status updates on a project? Track, update, and collaborate on project tasks with your team in a shared spreadsheet using Google Sheets. What you'll need 10 minutes Google Workspace account—Don't have one? Start your 14-day trial today.
【Redmine】ツールバーボタンを作ろう
Redmine内で文字のスタイルや表現を豊かにしてくれるツールバーボタン、使ってますか？ 全社Redmineの最重要プラグインの一つ、ツールバーボタンを拡張する『jsToolbar Buttons Extension』プラグインについてご紹介します。 これを使って"赤文字"、"青文字"、"Webページ呼び出し"、"テキスト折り畳み"、"ファイルサーバへのリンク"ボタンを作成しています。 発表: 2016-03-05（土）RxTStudy #14 「Redmineの未来を考える - 機能・運用・コミュニティ」＠大阪 https://rxtstudy.doorkeeper.jp/events/36338 前作: ある工場のRedmine +(Plus) (2015/11) http://www.slideshare.net/netazone/redmine-plusRead less
Slack API attachmentsチートシート - Qiita
attachmentsとは Slackのメッセージを装飾するもの。 通知系のBotで投稿するメッセージをリッチなものにするのに有効だったりします。 次の画像は、attachmentなしと、attachmentありの比較です。 attachmentなし attachmentあり パラメータ fallback 解説 添付に対するプレーンテキストでの要約。 ドキュメントによると、フォーマットされたテキストを表示しないクライアントで表示されるとあるが、未だ表示されるクライアント、シーンに出くわしたことはない。 fallbackという名の通り、念のためattachments内容の要約テキストを指定しておくとよいかと。 指定例 color 解説 attachmentsの色を指定する。 プリセットの3種類があり、それ以外にもカラーコードで指定することも可能。 プリセット good warning dan
画像の上に文字列を表示する方法 – いつか誰かの役に立つかもしれないweb制作屋の備忘録
CSSのpositionプロパティを使用して画像の上に文字列を重ねて表示する方法を示します。おまけとしてアニメーション機能を使用して文字列をスクロールさせます。重ねることにより文字の内容や位置の変更にも早く対応できて良いですね。 1.画像の上に文字列を表示する CSSの設定は、画像は「position:relative;」にして、文字列は「position: absolute;」とします。文字列はtop、bottom、left、right等を使用して位置を調整します。 サンプルでは写真の下の方に文字列を表示します。文字列のバックグランドに半透明の黒い帯を表示させます。 HTMLのサンプルソース <div class="photo"> <img src="image.jpg" /> <p class="text">きれいな風景を見て、ちょっと一息</p> </div> CSSのサンプルソース
cssで先頭から３つをnth-childで取得する：nth-childまとめ - それマグで！
テーブルのtd の先頭から３つを取得するCSS3 nth-childセレクタを作れたら嬉しいデスって話で盛り上がった。 td の先頭から３つに要素を適用したい <table> <tr> <td>1番目 <! -- ⇐背景色指定したい --> <td>2番目 <! -- ⇐背景色指定したい --> <td>3番目 <! -- ⇐背景色指定したい --> <td>4番目 <td>5番目 </tr> </table> 直ぐ思い浮かぶ回答 td:nth-child(1),td:nth-child(2),td:nth-child(3){ background-color: red; } 要素セレクタを並べて掛けば良い？？なんならjQueryでaddClassする？ 妥協・・・・したくない！ 負けた気がするよね？ なんか負けた気がする、nth-child理解できてないんじゃね？ 調べましょう MDNと
PythonとSeleniumを使用したドロップダウンメニューの取得して値をセットする - Qiita
この記事はPython3.6.0とSelenium3.4.0(WebDriverはGoogleChrome)を使用しております。 ドロップダウンメニューの取得とセット方法で苦労しましたのでメモを残します。 WebElementからSelectタグが扱える様にする <select name=”color”> <option value=”red”>赤</option> <option value=”blue”>青</option> <option value=”green”>緑</option> </select> # Selectタグが扱えるエレメントに変化させる為の関数を呼び出す from selenium.webdriver.support.ui import Select # 普通にエレメントを取得する color_element = browser.find_element_by_
MonacaでQRコードリーダを作ってみた – BarcodeScannerプラグイン編
こんにちは、浦本です。 Monacaチームではユーザ様のご要望に応じて日々、機能追加を行っています。 先週のデバッガ＆フレームワークの新バージョンリリースでは、 PhoneGapのプラグインであるBarcodeScannerプラグインも搭載しました。 そこで今回は、このプラグインを用いて前回の記事で作成したQRコードリーダアプリと同様のアプリを作成してみたいと思います。 IDEを開いた様子 今回作成するアプリのスクリーンショット アプリ作成手順 Monacaにログイン後、ダッシュボードから新規プロジェクトを作成してください。その際、テンプレートとして「最小限のプロジェクト」を選択してください。 こちらからzepto.min.jsを入手し、それを「www/js」フォルダに配置してください。 以下のHTML、JS、CSSファイルを記述すればアプリ完成です！ 【www/index.html】 メ
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する
長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。 デモはこちら HTML <div class="grad-wrap"> <span class="grad-trigger">続きを読む</span> <div class="grad-item"> <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p> </div> </div> トリガーとなるボタン.grad-triggerと高さを変化させる.grad-itemをgrad-wrapで囲います。 CSS .grad-wrap { position: relative; } .grad-wrap + .grad-wrap { margin-top: 40px; } .grad-trigger { /*ボタンのスタイルはご自由にどうぞ*/ } .grad-item { posit
![[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e45aef30f59b2788e85409f3cf151e1c2b520743/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F08%2Ftemplate.jpg)
ホームページビルダーを無料でお探しなら＞ホームページ作成ツール19個
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる 【発表】最新のHP作成方法はこちらへ ホームページビルダーを無料でお探しのあなた。 ホームページビルダーといえば、これ↓ 「ジャストシステムのホームページビルダー」なら、こちらですぐにダウンロードできます。 しかし、焦らずちょっと待ってください。 web制作歴14年目の僕は、ジャストシステムのホームページビルダーをおすすめしません。 なぜなら、このJustSystemホームページビルダーには以下のようなデメリットがあるからです。 ダウンロードしてからインストールするのが面倒 レンタルサーバーも必要。そ
ローディング作成☆
Loading GIF or, so called loader gif is an animation that indicates a loading process on a web-site or an application. Being an critically important part of web-site and application design and usability, mostly the animations are used to show that something is loading on the background (e.g. AJAX applications). The animation objects are usually used in GIF format which is very popular due to it's
How to Code HTML5 Video Background in Email
Capabilities Litmus is an all-in-one email marketing solution that helps you optimize and personalize every email to maximize your ROI and create exceptional brand experiences for every subscriber. Why Litmus Email Monitoring Email Design Email Building Email Personalization Email Testing Spam Testing Email Analytics Email Collaboration and Review Technology Integrations AI & Emerging Email Techno
array_mergeとarray+arrayの挙動の違いを検証してみました - Simple, Slowly
array_mergeとarray+arrayの挙動の違いの理解が曖昧だったので検証してみました。 例1 基本的な配列の場合 <?php $array1 = array(1, 3); $array2 = array(2, 4); $result1 = array_merge($array1, $array2); $result2 = $array1 + $array2; print_r($result1); print_r($result2); ?> Array ( [0] => 1 [1] => 3 [2] => 2 [3] => 4 ) Array ( [0] => 1 [1] => 3 ) 結果 array_merge キーが同じでも完全にマージされている。 array1 + array2 両方の配列に同じキーが存在する場合は前方の配列が残り、 後方の配列は無視されている。 例2 連
サムネイルの一覧表示 - ギャラリー型 - ホームページのレイアウト
ここでは画面全体にサムネイルなどの画像を大量に表示するレイアウトについて見ていきます。個々の画像はバラバラの大きさでも構いませんが、見た目を重視するのであれば画像のサイズを統一するか、画像の大きさはバラバラであってもその画像を入れる枠を作り、枠のサイズを統一しておくといいかと思います。 全体の構成としては下記のようになります。 画像を格納するための領域を<div>要素で定義し、必要な数だけ追加していきます。 全体をヘッダー、コンテンツ領域、フッターの3つの分けるところまでは、『基本構成』を参照して下さい。下記のようになります。 body{ margin:0; padding:0; background-color:#dcdcdc; } #wrapper{ margin:0; padding:0; background-color:#ffffff; } #header{ margin:0;
Twitter REST API：ダイレクトメッセージ関連｜Twitter関連｜Web関連特集｜PHP & JavaScript Room
direct_messages.xml<?xml version="1.0" encoding="UTF-8"?> <direct-messages type="array"> <direct_message> <id>1698907401</id> <sender_id>7948862</sender_id> <text>今日終わったら速攻呑みに行こー！</text> <recipient_id>55984769</recipient_id> <created_at>Tue Sep 28 05:06:10 +0000 2010</created_at> <sender_screen_name>cocoism</sender_screen_name> <recipient_screen_name>pjroomer</recipient_screen_name> <sender> <id>7
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
codaxis.com is available for purchase - Sedo.com
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
