はてなブログの動く記事リンク作ったよ！【ブログカスタマイズ】
この記事には広告を含む場合があります。 記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。 アイコンが動くとかわいいね アイコンが動くとかわいいよね？ かわいいよね？？かわいいよね！？！？ かわいいWEBフォント「FontAwesome」 今回使っているのはFontAwesomeっていうWEBフォントなの！ fontawesome.io 「FontAwesomeって何？」とか「WEBフォントってなんぞ？」って質問はGoogle先生にして……… みんなかわいくなりたいからこの記事読んでるんでしょ！！！！！ そんな質問、その化粧品の主成分と製造元どこ？って聞いてるようなもんだからね！！！ そんなのどうでもいいじゃん！！かわいくなれれば！！！！！☆☆☆ それじゃあ手順を説明していくね！☆ミ 1.headに魔法の言葉を書くよ☆ミ まずははてなブログの管理画面
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
Hypnotize
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
jQuery+skrollrでスクロールしてSVGの色を変化させる
Posted: 2016.06.16 / Category: javascript / Tag: jQuery jQueryとskrollrというプラグインを使用して、スクロール量に応じてSVGの色を変化させてみます。 背景色の変更 SVGの前に、一番単純なbodyの色を変化させてみます。 jQueryとskrollrを読み込んで、skrollr.initを実行します。 JavaScript <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js'></script>
AdSense広告を好きな位置に移動させるjQueryコード備忘録 - DREAMARK
先日レクタングルを表示させる記事を書いて、その後追記をしていたのですが、あの方法だとスマホで見た時に縦に2つ並んでしまいAdSenseのポリシーに触れてしまう。と言うことで、レスポンシブデザインで、スマホ表示の時に広告を移動させるコードを追記しました。 今回の記事に関しては、その方法の応用と備忘録です。活用出来る方法として紹介するわけではないので、参考にする方や今回載せているコードをコピペする方は前回同様慎重かつ自己責任にてお願いします。 ※口調がいつもと違うのは備忘録なのでご了承ください（笑） ちなみにですが、AdSense以外でも使える方法なので、特定の要素を移動させたい人には参考になるかもです。他のコードでも出来ると思うのですが、この方法でもできるという程度のものですが。 前回の記事のおさらいと解消法 更に慎重な解消方法 今回のコードに合わせたHTMLとCSS 今回のコードを応用して
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
とほほのＷＷＷ入門
はじめに ご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (
ブログの文章を蛍光ペンでマーキングしたように表示する方法 - いつもマイナーチェンジ！
先日、スマホ版レイアウトを調整したのですが、いろいろ調べている中で、文章を蛍光ペンでマーキングしたように表示できる方法を見つけました。 今までは、文章内で強調したい部分は、フォントカラーを赤にしていたのですが、なんか冷たい感じがしていたのです。 なんとなくイメージ的に、事務的な文章に見えるんですよね。 その見た目をちょっと変えるだけで、印象が結構違いますので、そのやり方をご紹介します。 どんな感じで表示されるか 例えば、こんな感じで表示されます。 今までは、単に赤字にしていただけなので、こんな感じです。 どうですか？ 見た目的に、ちょっとだけ暖かい感じになったと思いませんか？ 機械で書いていながらも、手書き感があるのです。 ちょっとした違いなのですけれども、僕は結構気に入りました。 この表示にするには、細かくは２種類の方法があります。 方法① 既存タグ「strong」のプロパティを変える
【見出し・タイトル・文字】装飾・マーカー・表・アンダーライン・囲み・画像・・・ - 愛 LOVE MVNO！
【おススメサイト全部公開！】ブログ中の文字の装飾（カスタマイズ）サイト紹介 見出しや文字装飾など、記事に施される様々なアレンジ。 有るのと無いのでは、全然イメージが違うけれども、HTMLやCSS等の基礎知識は持ち合わせていない・・・ そんな方にオススメのサイトをご紹介します。 見出し・タイトル（初級） ブログの見出しやタイトルの文字装飾を扱うサイトの殆どが、本格的なCSSでの装飾を基本としています。 しかしCSSはある程度知識がなければ、実際には使えません。モバイルサイト用にもカスタマイズが必要だったり、見出しの形式を変える場合には、CSSをいじった上に、見出しを特定のHTMLで挟んだり・・・ そんな時に便利なのがこちらのサイト plaza.rakuten.co.jp 好きなタグをHTML編集モードの記事欄にコピペするだけ。 標準は＜h3＞タグですが、数字部分を入れ替えれば＜h2＞や＜h4
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
Webフロントエンド表示速度、最速化手法まとめ - Qiita
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
１年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強方法】 - LITERALLY
Desk | Flickr デザインスキルを身につけてから、世界がずいぶん広がった。自分一人の力で仕事が出来るようになったし、発信したいものがあれば好きなようにWebページを作れば良いし、プレゼンのスライドも何倍も印象的に作れるようになった。デザインで学んだことは生活していれば至るところで活きてくるので投資効果はかなり大きいはず。 今回は、Webデザインの知識が一切なかった僕が、会社や飲食店からWebデザインの仕事を請けるようになるまでの１年間に実行した8のステップ（デザインの勉強4＋Webデザインの勉強4）をまとめてみる。ここで書くのは目安として、HTML・CSSを使ったレスポンシブデザインのウェブサイトを作るあたりまで想定してもらえると良い。 いちおう自己紹介を簡単に 独学でデザインの勉強を始めたのは2年前の2012年後半。とは言っても雑誌のレイアウトデザイン（グラフィック・デザイン）
HTML5 Conference 2013 講演資料まとめ #html5j
※本サイトではアフィリエイト広告を利用しています。記事内および商品リンクにはプロモーションが含まれる場合があります。 こんにちは、星影（@unsoluble_sugar）です。 11月30日に開催された「HTML5 Conference 2013」の発表スライドや動画などの講演資料をまとめました。 HTML5 Conference 2013 ※リンクミスや追加情報などありましたら、コメントまたは@unsoluble_sugarあてにお知らせいただけるとありがたいです 基調講演 次世代Web、深まる。広がる。 関連記事村井純教授。IT戦略は前倒しで実現される。7年先の夢を語ろう！ HTML5 Conference 2013招待講演 Webのモバイル対応には、Webが社会に定着する上での真の問題や課題が隠されている。HTML5 Conference 2013基調講演 2000人のイベント開催に
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022必看头条：北京昌平单车限行（全面分析11月已更新）
HTML/CSSも吐き出す超お手軽な世界地図素材作成サービス「Pixel Map」
HTMLクイックリファレンス
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
HTML5とCSS3の実用的なテクニックが丁寧に丁寧に解説されたウェブ制作に真剣に取り組みたい人にオススメの本 -HTML/CSS デザインの教科書