サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
www.e-webseisaku.com
皆さん、こんにちは。サツキです。 今回は、SVGアニメーションの話をしようと思います。 「SVGアニメーション」と聞いて難しいのでは?と思った方もおられるかもしれませんが、今回はCSSのみを使用した簡単に実装できるSVGアニメーションをご紹介しようと思います。 この先、SVGの利用はますます増えていくことになるかと思いますのでSVGアニメーションの経験の無い方はこの記事を読んで是非一度作成してみてください。 そもそもSVGとは? SVG(Scalable Vector Graphics)とは、XMLをベースにしたベクターデータで構成された画像形式の一種です。 WEBサイトでよく利用される「PNG」や「JPG」といった画像形式はドット(点)の集まりで構成されるビットマップデータなのですが、このビットマップデータには画像の拡大・縮小などの編集の際に画質が落ちてしまう特徴があります。 一方、ベク
webサイトを制作していざ公開!という時に、「OGP」の設定をし忘れていることはありませんか? この「OGP」の設定、webページやブログの記事をSNS上でシェアしたい、シェアされたい方にとってはとても重要な設定事項です。 「Open Graph Protocol」の略。 FacebookやTwitterなどのSNSでwebページやブログの記事がシェアされた時、またLINEなどのメッセージ機能でページのURLを送信した時に、そのページのタイトル、URL、概要、画像を表示させる仕組みのことです。 OGPを設定するメリットは? OGPを設定することによって、ページや記事の内容を分かりやすくユーザーに伝えることができます。 例えば、SNSを見ている際、タイムラインに誰かがシェアしたページや記事が流れてくることがあります。 その時にページの概要が書かれていたり、関連する画像が一緒に表示されていたら
こんにちは ホネ吉です。今回はコーディングを行う上で便利なJSをご紹介します。 WordpressなどのCMSで記事にアイキャッチを設定する場合、システム構築者は縦長、横長などどんな画像にも対応できるようにコーディングする必要があります。 「object-fit」プロパティは画像を中央位置でトリミングしたり、画像を指定の枠内に縦横比を維持したまま納めたりと便利なプロパティなのですが、残念なことにIE/Edgeに対応していません。 今回紹介する「object fit images」は導入することでIE・Edgeでも「object fit」プロパティを使用可能になるとても有難いプラグインです。 導入方法 1.ファイルの読み込み Github 上記のGithubからobject-fit-imagesのファイルをダウンロードします。(ファイルパス:dist/ofi.min.js) ダウンロードした
こんにちは。 今日の記事は、私ちーかわが担当します。 ついこの間、スマホをiphoneからandroidに機種変したんですが、最近はスマホもタブレットもサイズがありすぎてデザインする側も大変な時代になってきたなと思う今日この頃です。 ってことで、今更ながらレスポンシブデザインとリキッドデザインについて一悶着あったので私なりにまとめてみようかと思います。 そもそもレスポンシブデザインって何だ? 最近のサイトは、大体がこの手法で制作されているのではと思います。 そもそもレスポンシブとは、googleではこのように定義されていました。 ユーザーのデバイス(パソコン、タブレット、モバイル、非視覚的ブラウザ)に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて(つまり「レスポンシブ」に)レンダリングを変えることができます。 引用:https://developers.
鳥獣戯画からインスパイアを受けたAdobeの新フォント 今気になっているフォントがあります。 Adobeが先月28日に発表したばかりの、まだまだ新しいフォントです。 江戸時代の瓦版印刷に見える運筆の特徴も取り入れ、それに丸みを加えた 「かわいくも妖(あや)しい」がコンセプトの【貂明朝(てんみんちょう)】。 鳥獣戯画などに描かれた愛らしい小動物の姿にもインスパイアされたというこのフォントは 日本の伝統美術の要素を取り入れ背景が暗い場合でも視認性が高く、書籍の装丁などの見出しに最適としているそうです。 隠し文字も妖しカワイイ! 貂明朝の「貂」(てん)はイタチ科の哺乳動物の意味を持ちます。 貂明朝の中にはSVGイタチ科の哺乳動物「貂」(てん)の姿をしたグリフも隠されています。 貂明朝には、最新の常用漢字・人名用漢字を含む約6500文字、イタリック体を含むフルセットの欧文グリフ約2100文字、かな
今回はWEBサイトに簡単に実装できるアニメーションのプラグインやライブラリについて紹介します。 WEBサイトにおいてアニメーションはほぼ不可欠の要素となっています。 ローディング画面やスライドショーなど少しの動きを加えるだけでユーザの目を引くことができます。 Animate.css 公式サイト・デモページ Animate.cssは外部CSSを読み込ませ、動かしたい要素にクラス名をつけるだけで実装できるCSSライブラリです。 一部のアニメーションにはjQueryが必要になりますが動きも豊富で実装も簡単なためおすすめです。 Wait!Animate 公式サイト・デモページ Wait AnimateはWEBサイト上でアニメーションを生成することのできるサービスです。 動きを確認しながら生成でき、CSSにコピーして要素にクラス名を付けるだけなので新しくCSSやJSを読み込む必要もありません。 Ma
SEO対策を行い、Googleの検索結果では1ページ目に表示されているのに、アクセス数があまり増えないと思うことは ありませんか? 検索結果の1ページ目に表示されれば、アクセス数が増えると期待した方も多くいると思います。 再度順位をよく確認してみてください。 あなたのサイトは、検索結果の1ページ目のどこの位置(順位)に表示されていますか? もし、1番目(1位)に表示されているのであれば、対策しているキーワードなどを見直す必要があるでしょう。 残念ながら、10番目(10位)に表示されているのであれば、1番目を目指してさらに対策を施してみる必要がありそうです。 なぜかというと、検索結果の1ページ目に表示されていても、表示されている位置が1番目と10番目では、クリックされる確率が大きく変わるからです。 「Internet Marketing Ninjas」より、2017年度のGoogle検索結果
私達はこれまで皆様から多くのご質問・ご相談を頂いております。 一言で「ホームページの作成」といっても、 皆様から頂く『目的』や『ご要望』などご相談内容にはそれぞれ様々な違いがありました。 私達はお客様のホームページに対する『目的』や『ご要望』を細かくヒアリングさせて頂きながら 「プロとしての意見」や「アドバイス」をさせて頂いております。 その結果、お客様がご相談前にイメージされていた案と違うホームページをご提案させて頂く場合もございます。 しかし、最終的には非常に多くのお客様にご満足頂き、制作後のホームページ運用のご相談や、 また多くのお客様のご紹介を頂いております。 本当に有難いことに、制作後も引き続き継続して、多くのお客様と「良いお付き合い」をさせて頂いております。 2018年05月10日 更新 2018年05月10日[その他,ホームページ制作全般] サイトを途中まで制作していたのです
NEWS新着情報 2022/12/22 スタッフコラム「効率的に余白が設定できる!XDのスタック機能とパディング機能」を更新しました 2022/11/25 スタッフコラム「Gitとは一体なに?」を更新しました 2022/11/07 スタッフコラム「クッキーレスで何が起きるの?Webマーケティングに与える影響を解説します!」を更新しました 2022/10/12 スタッフコラム「サイトにひと工夫がほしい!フォントの探し方」を更新しました SERVICEサービス一覧 ホームページ 制作WEB DESIGN ひと味違うホームページの作成とは? WEB制作.comは、多種多様なお客様のニーズに お応えし、検索エンジンに評価される ホームページを制作します。
このページを最初にブックマークしてみませんか?
『ホームページ制作・作成なら大阪のweb制作.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く