Icons | Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
【CSS】画像のサイズ・縦横比・トリミング指定方法（初心者向け）
「画像のサイズ変更」「画像の縦横比を維持したままの指定方法」「画像のトリミング」の3点を中心に初心者のかた向けに解説。 3点の基礎知識に加えて、理解しやすく、すぐ実践的に使用できるようになる為、各方法をサンプルコード付きで解説。 実際に手を動かして学ぶことができますので、初心者の方も安心して読み進める事ができます。
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
Font Awesome4.7 フォント一覧
Font Awesomeバージョンアップに関して アイコンフォントのFontAwesomeのバージョンが2018年2月から4.7から5.0.6にアップグレードしました。最新バージョンでは、旧バージョンの各フォントのクラス名、unicodeに互換がないため、旧バージョンで利用したサイトでのメンテナンス用に4.7のフォント一覧を作成しました。 HTMLでの利用 公式サイトでは、iタグを利用していますが、spanなど他の要素でも利用ができます。利用する場合は、下記のコードのアイコンクラス名の部分を変更してください。 <!-- 下記のアイコンクラス名を変更 --> <i class="fa アイコンクラス名" aria-hidden="true"></i> <!-- 利用例 --> <i class="fa fa-address-book-o" aria-hidden="true"></i> CS
Xserverでアップロードできるファイルの容量の上限を変更する方法 | HAZIMARU
Xserverでは1ファイルのアップロード上限が30MBに制限されてしまっているので、これ以上の容量のあるファイルをアップロードすることができません。1ファイルが30MB以上のものをアップロードする機会はほとんどないと思いますが、ファイルのアップロード上限の変更方法をご紹介します。 まずはXserverのサーバーパネルにログインしてください。 Xserver サーバーパネル https://www.xserver.ne.jp/login_server.php ログインしたら、PHPの項目の「php.ini設定」を押します。 他のサーバーサービスではこういう項目がなく、自分でファイルに記述を加えなければいけないっていう場合もあるようです。 ドメイン選択画面に変わったら、ファイルのアップロード上限を変更したいドメインを選択します。 php.ini設定という画面が表示されます。画面が表示されたら
CSSで実装するボタンのホバーエフェクトまとめ|tamatuf
CSSで作成したボタンにカーソルをマウスオーバーした際に、色が変わる、大きさが変わるなど様々な効果を付けるホバーエフェクトのサンプルをまとめてみました。 色を変える ホバーするとボタンの背景色が変わるエフェクトです。 SAMPLE <a href="#">SAMPLE</a> a { color: #fff; font-size: 16px; font-weight: bold; background: #333; padding: 18px 30px; border-radius: 6px; transition: .3s; } a:hover { background: #13c3ac; } transitionを設定することで、色の変化にわずかにじんわりとした動きをつけています。 透過する ホバーすると、ボタン全体が透過するエフェクトです。 SAMPLE <a href="#">SA
SSIで効率管理
ウェブサイト内には、ヘッダ・サイドバー・フッタなど全ページ共通のパーツがあることが多いでしょう。そのような共通部分を全てのページに記述するのは非効率的です。なぜなら、共通部分を更新したい場合には、全てのページを同時に更新しなければならないからです。ページ数が多ければ多いほど作業量も増え、更新漏れが発生しやすくなってしまうでしょう。 ■共通部分だけを独立したファイルに分けておいて、動的に合成できると便利 そのようなサイト内の共通部分は独立したファイルに分離しておき、ウェブサーバ側で動的に合成できれば、共通部分の管理や更新作業が楽になります。共通部分を更新したい場合には、その独立した1ファイルを修正するだけで全ページの表示が更新されるからです。 例えば、サイト内の全ページに共通する部分を下記のような3つのファイルに分離しておきます。これらの3ファイルを、上図のように各ページのHTMLに合成しま
楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips
このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。 Font Awesome, the iconic font designed for Bootstrap ※ なお、本エントリーはバージョン4.0.3をもとに書いているため、バージョンアップによって、掲載しているコードも変わっている可能性があります。利用前に、使うバージョンとそのスタイルを確認してから使うことをオススメします。 Font Awesome とは？Font Awesome は サイト上で使われるようなさまざまなアイコンを Webフォント として利用できるようにしたものです。フォントとして利用できるため、サイズや色などすべて CSS で調整して利用することができ
YouTube以外で動画をホームページに埋め込む方法｜ムービーアップロード | MK2-BLOG～西宮のWEBデザイナー日記
動画はYouTubeでホームページに埋め込むのが一番手っ取り早いですが、全体に公開したくない動画や会員専用サイトのみで使いたい動画の場合、YouTubeでアップすることが難しいと思います。 YouTubeには「全体に公開」「非公開」「限定公開」の3種類があり、会員専用サイトにのみ公開したい動画を作成する場合、 限定公開でいいと思っていました。 （非公開はGoogleアカウントを持っている人がダメだったりと制限があります） いかし調べていると、そのアドレスはYouTube内で検索されないだけで、何かでリンクURLがもれた場合は、誰でも見れてしまうからです。 つまり、動画のアドレスがもれると誰でも見られてしまうという話。 これではダメなので、結局直接サーバーにアップしてそれを見てもらおうと考えました。 今回はそんな限定公開したい動画を埋め込む場合、色々困ったので備忘録としてメモしておきます。
Webウェブデザインレッスン
Webデザインレッスントップページ このサイト「Webデザインレッスン」は、Webサイトを作成するための基本的な知識と、より良いサイトにするためのヒントやコツを紹介しています。実際のサイト作成に役立つように、できる限り多くの例を紹介しています。 各セクションの説明 このサイトは大きく分けて次の3つのセクションからなっています。 はじめに Webサイトを作成する前に知っておいてもらいたいこと、用意するものや作成についての基本的な流れを紹介しています。 HTMLとXHTML Webサイト作成において最も基本となるHTMLとXHTMLについて紹介しています。入門講座や資料などがあります。 CSS Webサイトのビジュアル面に影響を与え、華を添えるCSSについて紹介しています。入門講座、資料があります。 このサイトを作ることになったキッカケ このサイトを作成したのは、友人、知人から 「ホームページ
Webサイトの利用規約（無料テンプレート・商用利用可）
Webサイトの利用規約 kiyaku.jp へようこそ。 当サイトでは、Webサイト用の「利用規約」「プライバシーポリシー」等のひな型（雛形・テンプレート）を掲載しています。 ひな型（雛形・テンプレート）のご利用は無料です。 個人・法人を問わず、どなたでも自由にご利用いただけます（商用利用可）。 ご利用の際は、ご利用の際の注意事項をご確認ください。
HTML/CSSの編集をするのにお勧めなエディタ Adobe Brackets | 空中庭園
今日はHTMLを作成、編集していくうえでほぼ必ず必要になるエディタについて紹介したいと思います。 今回、5種類ほどのエディタ、またはHTML・CSSの作成・編集ソフトを話題にしたいと思います 用途としては汎用エディタ、或いはHTMLのコーディングの括りについてなので、物書きの方など他の分野で特殊な用途で利用する場合はまた良いものがあるかもしれません。 メモ張 サクラエディタ Emurasoft EmEditor Adobe Brackets Adobe Dreamweaver CC ・メモ帳 あまり常用として利用されている方はいないと思いますがWindowsで標準で利用できるエディタといえばメモ帳ですね。 非常にシンプルが故に機能が乏しく、ちょっと複雑な記述をするのには向いていないため、やはり有料・無料のエディタを利用させてもらう必要があります ・サクラエディタ 次に使いやすいエディタとし
Instagramブログパーツ「RSS.stagram」がSnapWidgetよりもおすすめな理由 | Sumirexxx
Instagramの写真をブログTOP画面に乗せるのがお気に入りです。 気が付けば、結構昔からこのスタイル。一時期、表示するのに時間がかかると思ってやめていたのですが、やっぱりなんか物足りなくなっていつからか復活しています。 スマホ表示にはInstagramの写真を載せていないのですが、PC表示ではいつもこんな感じになっています。 つい昨日Instagramの表示を左側縦1列に変更しました。 （アイキャッチとかぶって少々見にくいのでまた変更するかもしれませんが…。） 今まではこの表示に「SnapWidget」という海外のツールを使って作っていました。 こちらが本家サイト↓ SnapWidget | Instagram Widget 結構使い勝手がよかったんですが、最近どうも無料だとうまく取得できなくなってしまいました。（私だけかもしれません） ↑ページが削除されていました。（2019.8.
リニューアルされたSnapWidgetの使い方、インスタのユーザーやタグ検索をサイトに表示する。 | 9ineBB
SnapWidget の使い方 手軽にインスタグラムのタグ検索やタイムラインをウェブサイトに表示することが出来るWEBサービスの「SnapWidget」の使い方です。最近リニューアルあるして、サイトのイメージがガラッと変わりました。 また、ウィジェットの作り方も変わっています。 SnapWidget https://snapwidget.com/ 無料と有料、広告有り無し SnapWidget には無料のFREEと有料のPROが存在します。有料には2プランあり、月5ドルのと7ドルのがあります、PRO版は広告非掲載であったりいろいろ機能に違いがあります。 無料版では画像をクリックした先のページはインスタグラムでは無くSnapWidgetのページ大きく画像が表示されますが広告が表示されますので、企業サイトやイメージを大切にしているようなサイトには向いていませんね、個人的なブログ等で利用する方に
CSSで作ったドロップダウンメニューのドロップの動きいろいろ
CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使ってページのトップへ戻るボタンを設置！なめらかな動きを実装しよう | チェピレア
rgba変換ジェネレーター
数値文字参照変換｜コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited
ol,li,リストで括弧付の数字を作る方法 | Webお役立ちネタ帳
http://stagramaker.com/