【コピペ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></
もう迷わない、「@font-familyはこれでOK！」を色々考えてみた。 | unitopi - ユニトピ -
Macだから、Windowsだから、Androidだから… 端末それぞれの表示状態を気にしながらフォントを考えるのって大変ですよね。 とりあえずコレにしておけばいいや、というコピペ用テンプレが皆さん存在するのではないでしょうか？ 基本 font-family: sans-serif; sans-serif、つまりゴシック体であることを指定しています。 ただしそれ以上の指定ではないので、ブラウザ標準のものが使われます。WindowsであればメイリオとかMSゴシック系、Macであればヒラギノ角ゴシック系となります。 Windowsのことを考えると明瞭が由来でもあるメイリオがアンチエイリアスがかかって見やすいです。 しかし、Macの場合はヒラギノを優先させたいですよね。。 Macだと、多くのブラウザで日本語表記のフォント指定は無視されます。 つまり、“メイリオ”は読み込まれず、“Meiryo”と
画像に文字を描画する - 見上げれば、空
コマンドラインの ImageMagick を使って画像の上に文字を描画する方法。 # input.jpg の上から Arial 12pt 赤色で 「sample」という文字を # 画像の下部に描画して output.jpg という名前で保存する $ convert -font Arial-Normal -pointsize 12 -gravity south -annotate 0 "sample" -fill red input.jpg output.jpg # south の位置から x 方向に -100px 、 y 方向 100px だけ移動させる # ただしこのとき y は下から上が正方向 $ convert -font Arial-Normal -pointsize 12 -gravity south -annotate 0x0-100+100 "sample" -fill re
指定した画像に文字を描く | ImageMagick コマンドリファレンス
convert -font [fontfile] -pointsize [fontsize] -annotate [degree]x[italic]+[x1]+[y1] label:'[text]' [in] [out] [fontfile] … フォントファイルのパス（パス） [fontsize] … フォントのサイズ（単位：ポイント） [degree] … フォントの回転（時計回り） [italic] … フォントの斜体 [x1] … 文字を描写する位置のX軸 [y1] … 文字を描写する位置のY軸 [in] … 入力するファイル名（パス） [out] … 出力するファイル名（パス） 指定したフォントと指定したフォントサイズで、画像の中に文字を描く事ができます。 日本語などのマルチバイトも使う事ができますが、フォントはUTF-8で統一するとトラブルが減ります。 文字の直接入力ではなく、
ImageMagick 画像中に文字を入れる - Qiita
ImageMagickにて、画像中の指定位置に文字列を書き込む方法を記述する。その際、フォント名を指定する。 使用バージョン ImageMagick 6.9.1-4 Q16 コマンド例 convert -size 640x400 -depth 8 gray:circle_640x400.raw -fill #101010 +antialias -font "Meiryo-&-Meiryo-Italic-&-Meiryo-UI-&-Meiryo-UI-Italic" -gravity South -annotate +0+32 "グレーの円" -depth 8 gray:circle_640x400_text.raw 位置指定 -gravityオプションを使用する。 画像上側を北(North)、下側を南(South)、左側を西(West)、右側を東(East)として、この組み合わせで指定する
メールの添付ファイルをデコードして保存する
<?php // 個別設定///////////////// // メールボックスの設定----- $host = 'メールサーバ名'; $user = 'ユーザーID'; $pass = 'パスワード'; //////////////////////////// $max_byte = '80000'; $attach_type = "gif|jpe?g|png|bmp|octet-stream|x-pmd|x-mld|x-mid|x-smd|x-smaf|x-mpeg"; // 保存するファイル $kinshi_type = ".+\.exe$|.+\.zip$"; // 保存しないファイル $hozonDir= './log/'; $logfile = './log/mail.log'; //=================== ネット上のコンピューター(サーバ)に接続 =====
Google Fontsを利用して、Angular6で作ったサイトのフォントを変えてみる | DevelopersIO
どうも！大阪オフィスの西村祐二です。 今回はGoogle Fontsで提供されているwebフォントを使って、Angular6で作ったサイトのフォントを変更してみたいと思います。 https://fonts.google.com/ ちなみに、Google FontsはGoogle が提供している Web Fonts のサイトです。無料で利用することができます。 日本語のフォントも利用可能 数は少ないですが、日本語フォントも利用できます。もちろん無料です。 https://googlefonts.github.io/japanese/ Angular6で作ったサイトの日本語フォントをかえてみる 環境 Angular CLI: 6.0.8 Node: 9.6.1 OS: darwin x64 Angular: 6.0.4 利用フォント フォントが変更されているか確認しやすいように、「ニコモジ N
PHPで予め許可したタグと属性以外を除去できるライブラリ「kses」:phpspot開発日誌
CSS3のでのボックス要素デザインを圧倒的に簡単化できる「CSS3 Click Chart... 次の記事 ≫：アプリやWEBサイトに使えそうなフリーな244個のアイコンセット kses - PHP HTML/XHTML filter | Download kses - PHP HTML/XHTML filter software for free at SourceForge.net PHPで予め許可したタグと属性以外を除去できるライブラリ「kses」。 外部からの入力値は基本的にhtmlspecialcharsでタグを無効化するのが通常の考え方ですが、掲示板なんかで特定のタグを許可したいという場合があります。 PHPにはstrip_tagsというようなタグを除去しつつ、特定のタグのみを残すという関数が標準であったりしますが、これだと属性までは制御しきれません。 更には、<a href=
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ
ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの、かっこいいですね。 解除して散っていくのも！ 実際のデモは、こちらからどうぞ。 Chrome, Safariでご覧ください。 デモページ これをベースにいろいろなアイデアが膨らんできますね。 参考までに、実装もご紹介。 HTML オーバーレイでステイになるのは、チェックボックスを使用しています。 <!-- start header --> <header id="head"> <div class="container"> <
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
Illustratorでプラグインを使わずに、角を丸くする｜DTP Transit
Illustratorで文字の角を丸めるとき、［角を丸くする］効果を利用すると、次のように意図しない形状になってしまうことがあります。 これを避けるために、有料のプラグイン、Xtream Pathの［スマートラウンド］を使う方法をご紹介してきましたが、Illustratorだけで実現する方法をご紹介します。 なお、この方法は、本日のセミナー（「クリ☆ステVol.6」）終了後、参加者の方から教わったものです。お名前を失念してしまいましたが、ありがとうございます（※追記あり）。 実現方法 実現方法は、［パスのオフセット］効果の二度がけ。 一旦、負の値でかけてから、同じ数値で正の値でかけます。 なお、この際、両方とも正の値を設定する効果に［角の形状］を「ラウンド」にしておくのがポイント。 正直、なぜ、これで丸くなるのかよくわからないのですが、結果オーライで。 ただし、細かいところをいうと、"墨だ
無料で商用利用可能な日本語フォント「ぬかみそフォント」
NINTENDO64の周辺機器である「64DD」で動作する「ランドネットディスク」にあるブラウザやメールソフト上で使われていたフォントっぽい感じに作られている日本語フォントが「ぬかみそフォント」です。 ぬかみそフォントbeta08 - HatenaDiary id:Narr http://d.hatena.ne.jp/Narr/20110619 ダウンロードは下記サイトから可能。 ぬかみそフォント http://www.h7.dion.ne.jp/~beta-rev/virtualboy/download/download.html 上記ページ内の「ランドネットディスク物真似CSS 2011年06月19日版」をクリックしてダウンロードできるZIPファイル内の「omake」フォルダーにフォントファイルが入っており、「非営利目的および営利目的での使用が可能です」など各種使用許諾の条件なども書か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Japanese Font Packages – iPhoneやiPad、iPod touchの日本語フォントを変更するBytaFont用のパッケージ | Will feel Tips
わかばマークのMacの備忘録 : 絵文字フォント「Webdings」「Wingdings」
プログラミング用フォントをまとめてみました（Source Code Pro/Ricty/Consolasなどなど）
Flat UI - Free Bootstrap Framework and Theme
見出しやロゴにぴったり！漢字も揃ってるちょっと太めのフリーの日本語フォント -ぼくたちのゴシック