JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
「CGM」とは？ | マーケティング用語集 | シナジーマーケティング株式会社
CGMとは、Consumer Generated Media（コンシューマー ジェネレイテッド メディア）の略で、掲示板やクチコミサイトなど、一般ユーザーが参加してコンテンツができていくメディアのこと。 CGMを大きく分類すると、クチコミサイト（価格コム、食べログなど）、ナレッジコミュニティ（OKWave、Yahoo!知恵袋など）、ソーシャルネットワーキングサービス（Facebook、X（旧Twitter）など）、動画共有サービス（Youtube、ニコニコ動画など）、キュレーションサービス（NAVERまとめ、Togetterなど）、イラストコミュニティー（Pixiv）、ブログポータル（アメーバブログなど）、BBSポータル（2ちゃんねるなど）など。 現在、クチコミをマーケティングに利用する動きが流行している背景にはこういったCGMサイトの普及が影響しているほか、消費者が企業の広告以外の第3者
一つの要素にCSSだけでどれだけ枠線を引けるかチャレンジ | SHIROMAG
要素に枠線を引く方法はいくつかありますが、今回は異なるプロパティでどれだけ枠線を引けるか挑戦してみました。 疑似要素はなし。 html <div class="box"></div> css .box { width: 250px; height: 250px; background-color: #f0f0f0; border: solid #ddd 4px; outline: solid #aaa 4px; background-image: linear-gradient(#999, #999 8px,transparent 8px), linear-gradient(-90deg,#999, #999 8px,transparent 8px), linear-gradient(90deg,#999, #999 8px,transparent 8px), linear-gradien
CSSの適用方法｜CSSの基本｜CSS HappyLife ZERO
CSSの書き方が分かっても、実際に適用させなければ意味がないのでその適用方法です。 CSSを適用する方法は以下の5つがあります。 style属性を用いて、各要素に直接指定する head要素の範囲内に、style要素によって指定する head要素の範囲内で、link要素によって外部ファイルを読み込む head要素の範囲内で、@importによって外部ファイルを読み込む xml-stylesheet処理命令で外部ファイルを読み込む この中で一番頻繁に使用する方法が3番の「head要素の範囲内で、link要素によって外部ファイルを読み込む」になります。 4番は3番とほぼ同じですが、3番で事足りるのでhead要素内で読み込む場合には、あまり使う機会は無いと思います。 1番と2番は、(X)HTMLファイルに直接スタイルを適用させる方法のため、推奨されません。 特に1番に関しては、要素に直接スタイルを
はてなフォトライフの画像を貼り付けるときに、フォトライフ記法でaltとtitleを指定できるようにしました（はてな記法モード、Markdownモード） - はてなブログ開発ブログ
はてなブログでは、はてなフォトライフに投稿した画像を表示するはてな記法（fotolife記法）を拡張し、画像（img要素）のtitle属性とalt属性を指定できるようにしました。 編集サイドバーの「写真を投稿」などを使ってはてなフォトライフにアップロードした画像を、はてな記法モードもしくはMarkdownモードで記事編集画面に貼り付ける際に、よりアクセシビリティを考慮したマークアップを実現することができます。どうぞご利用ください。 ＊見たままモードでは、はてな記法ではなくHTMLでそのまま貼り付けるため、HTML編集タブから書き換えることができます。 フォトライフ記法と、titleおよびaltを指定する方法について はてな記法モードおよびMarkdownモードでは、編集サイドバーから「写真を投稿」したときに、次のようなfotolife記法で画像が貼り付けられます。 [f:id:hatena
字下げする！CSSでインデントする方法【初心者向け】現役Webデザイナーが解説
初心者向けにCSSでインデントする方法について解説しています。サイト内の文章を字下げしたい時に役立つので、覚えておくと良いでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 今回はCSSでインデントする方法を紹介します。 Webサイトの文章を字下げしたいという時に使えるので、覚えておきましょう。 1文字目をインデントする方法、2行目以降の最初の文字をインデントする
【CSS】2行目以降を1文字下げる［text-indent］の使い方。
箇条書きや注意書きの文章を書く場合に、文章の先頭に「・」や「※」などの記号を記述することがよくあると思います。 しかし、2行目以降がその記号の下に回り込んでしまうことが気になっている方も多いのではないでしょうか。 手作業で地道に改行を入れたり、記号を画像で背景設定したり、あるいは強制的にリスト化してマークをつけたりと、あの手この手で誤摩化しているケースはよくあります。 でも「やっぱりテキストで綺麗に表示させたい！」というときに、以下の方法が最適です。 まずはサンプルをご覧ください。 ※text-indentプロパティの便利な使い方。：サンプルページ どうでしょう？ 見事なまでに文章の先頭が綺麗に揃っていますね。 設定の仕方は以下の通りです。 HTML HTMLでの記述。 <p class="indent-1">※text-indentプロパティの便利な使い方。<br> 文章の段落などの2行
HTML TAG index
ページ全般タグ 基本要素、タイトル、背景色、背景画像、マージン、範囲指定、META情報、罫線 ... テキスト・フォントタグ 見出し、段落、改行、文字サイズ、文字の装飾、強調、略語、引用、整形済み ... リンクタグ 別ページへのリンク、ページ内のリンク、表示先の指定、メール送信用のリンク ... リストタグ 箇条書きのリスト、番号付きのリスト、定義型リスト、マーカーの変更 ... イメージタグ 画像の表示、代替テキスト、画像に並ぶテキスト、イメージマップ ... テーブルタグ 表の作成、表のタイトル、行と列のグループ化、セルの背景色、表に並ぶテキスト ... フレームタグ フレームの基本、分割のレイアウト、フレームの境界線、インラインフレーム ... フォームタグ フォームの作成、フォーム部品、送信形式、部品のラベル、部品のグループ化 ... 埋め込みタグ プラグインデータの埋め込み、J
はてなブログで「写真の真横に文章を書く」方法 - Banguardサイト
読みやすい記事は、文章力だけでなく全体のビジュアル構成力も高いと思います。 単純な文字の羅列より画像が添付されている方が、イメージが湧きやすいですね。そうすると、必然的にブログに画像を貼ることが多くなります。 はじめて写真を貼付けて困ったのが、「写真の説明を入れようとすると、写真の最下部から文書がはじまる」ことです。 ところがいろいろ調べてみたら、いとも簡単に解決できることがわかりました。 写真の説明を写真の真横最上部からはじめる 普通に写真を貼付して文章を書くと、写真の最下部からの文章スタートになります。 サンプル１ 写真の右下に文章があります。 これだと、何だか不格好ですよね。 そんな時は、写真の文字列をちょいちょいといじるのです。 写真の位置を指定させる まず、「はてな記法モード」で書き始めましょう。すべてはそれからです。 写真の位置を指定させるには、添付した写真の文字列「[f:id
はてなブログで画像のサイズを変更する方法(Markdown環境) - conf t
Markdownでブログを書いているんですが、画像サイズの変更方法が最近になってわかったので 共有します。 画像ははてなブログの右メニューの「写真を投稿」からアップロードしています。 「写真を投稿」からアップロードした写真をダブルクリックすると、 本文に以下のようなコードで画像が挿入されます。 [f:id:xxxx:2015yyyyyyy:plain] ↓サイズ指定をしない場合 以下のように、plainの後ろに、コロンで区切ってw300とつけてあげれば、 幅が300pixelになります。 [f:id:xxxx:2015yyyyyyy:plain:w300] ↓w300をつけた場合 それにしてもこういう情報が公式のヘルプ(はてなブログ ヘルプ)に載っていないなーって調べてたんですが ドラッグで拡大縮小。見たまま編集で画像の表示サイズを簡単に変更できるようにしました - はてなブログ開発ブログ
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - SHIROMAG
2016年10月2日17：53に追記： コード修正したのでそれ以前にコードを貼り付けたかたは貼り直しお願いします。お手数おかけいたします。 2019年12月23日17：20に追記： デザイン、CSSを微調整しました。 CSSとChrome拡張を使って会話形式の記事を書く 今回は、はてなブログで簡単に会話形式の記事を作る方法を紹介します。 吹き出しと画像を使って会話形式にする方法は他の記事でも紹介されているのですが、すごく面倒なのです。 「会話形式の記事書くの面倒」「シロマどうにかしろ」という意見があったので、楽に実装できる方法を頑張って作りました。 最初の設定は少し面倒です。ただ、一度設定してしまえば、後はめちゃ楽ちんになると思います。 見た目はこんな感じ↓↓ 先生、今日は吹き出しを簡単に実装する方法を紹介します。 運動と瞑想の習慣がない者の末路はいつも悲惨だ。恐ろしい恐ろしい。 ・・・
ブログアイコン（favicon）を高精細ディスプレイに対応するなど、見やすく表示されるようにしました - はてなブログ開発ブログ
はてなブログでは、ブログを閲覧しているときにWebブラウザのタブなどに表示されるブログアイコン（favicon）を見やすくしました。より大きな画像を配置することで、高精細ディスプレイ（AppleのRetinaなど）でも明瞭に表示されるようになりました。 また、設定された画像が正方形でないときには、画像の中央を内接する最大の正方形にトリミングして配置するようにしました。 いままでのブログアイコン 新しいブログアイコン ブログアイコンを設定するには Webページのダッシュボード（PC、スマートフォンともに）では、設定画面の基本設定ページからブログアイコンを設定できます。 ダッシュボードの設定画面でブログアイコンを設定できる iPhone・iPadアプリでは、歯車アイコンで「設定」を開き「基本設定」をタップしてください。 ブログアイコンのサイズなど 新しいブログアイコン（favicon）は、最大
全標準フォント一覧 / もうパンツはかない
標準で入ってると思われるフォントのリストです。日本語・英語以外の言語用のフォントも混じってます(ただしきちんと英数字が含まれるもののみ)。 フォントのキャプチャ画像の下に、CSSでフォント指定をしています。インストールされていればそのフォントで表示されるはずですが、ブラウザや設定によっては指定が効かないフォントもあります。斜体以外の文字の太さ・幅のバリエーションも拾いだしてみました。ページデザインの参考にどうぞ。 各枠右上の三角印をクリックするとCSSを表示し、×印のクリックで閉じます。また右側のピンク色の枠へドラッグして取り置きすることができます。取り置きを捨てたり並べ替えたりもできます。(IE9以前とスマホ・タブレットでは取り置きできません) なお、Mac用で枠の右端が赤いものは、必要に応じてダウンロードできるフォントです。(言語を日本語としてmacOSをインストールした場合は下のフォ
Helveticaばかり使っていませんか？ヘルベチカとその周辺フォントまとめ
Helvetica周辺の書体〜ヘルベチカ代替フォント この記事の一番上の画像を見てください。ヘルベチカでロゴを組んでみました。 このようにヘルベチカを利用したロゴは多い。 ニュートラルな雰囲気で、世界一人気があるかもしれない書体Helvetica。 ちなみにHelveticaはヘルベチカと読みます。Windowsで似た書体はArial。 というわけで以下の画像のようなフォントです。 Helveticaのウェイト展開 ヘルベチカは豊富なウェイト展開（太さ）のフォントです。しかしMacOSのデフォルトの場合、すべてのバリエーションは含まれておらず抜粋です。これはヒラギノや游ゴシックにも言えることです。ヘルベチカは太さのバリエーションの他にコンデンスド（幅が狭い）、エクステンデッド(幅が広い）も含まれています。たぶんOSデフォルトの場合、上記のロゴの半分も作れないかもしれません。またHelvet
Google Fonts + Japanese • Google Fonts + 日本語
Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
whotwi グラフィカルTwitter分析
入社2ヶ月でいきなりオウンドメディアを立ち上げるって!？／【漫画】大企業のオウンドメディア「0→1」その試行錯誤すべて見せます！第1話 | マンガonセミナー
Site is undergoing maintenance
はてなブログ ヘルプ
