HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか!」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc
はじめに AI Academyを開発・運営しています、株式会社エーアイアカデミー代表の谷です。 近年機械学習等で人気のPythonですが、Pythonで出来ることは機械学習以外にも多くあります。 そこで、初学者の方は**機械学習以外でPythonで何が出来るのか?**また、**何から手をつけて行けば目的を達成できるのか?**など疑問を持つかと思います。 この記事が多くの方々のお役に立てれば幸いです。 AI Academy Bootcamp 6ヶ月35,000円にてチャットで質問し放題の環境で、機械学習やデータ分析が学べるサービスを提供しております。 数十名在籍しているデータサイエンティストや機械学習エンジニアに質問し放題の環境でデータ分析、統計、機械学習、SQL等が学べます。AI人材に必要なスキルを効率よく体系的に身に付けたい方は是非ご検討ください! https://aiacademy.j
商品の画像を複数枚用意することで、商品を360度ぐるぐる回転できる画像ビューワーを簡単に実装できるスクリプトを紹介します。 操作はかなり快適で、単体で動作するスクリプトです。 JS Cloudimage 360 View JS Cloudimage 360 View -GitHub JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewのデモ JS Cloudimage 360 Viewの使い方 JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewは商品の画像を複数枚用意することで、バーチャルツアーを提供できるシンプルでインタラクティブなJavaScriptライブラリです。 サポートブラウザは、IE9, 10, 11を含む、すべてのモダンブラウザです。 商品はユーザーが360度回転させることができ、拡大に
対応方法について 基本的には WebP 画像を作成後、 img タグに直接 .webp のファイル名で記述すれば対応できるのですが、 <img src="xxx.webp"> WebP に対応していないブラウザもあるため(特に Safari)、従来画像と共存させる必要があります。 共存させることを前提とした場合、今の時点での対応方法については大きく2種類が考えられます。 1,picture タグを使う 2,htaccess で制御する 結論から言うと、htaccess での対応が良さそうですが、それぞれの対応について解説していきます。 1,picture タグを使う場合 picture タグで対応する場合、下記のように記述することで対応することができます。 <picture> <!-- WebP用画像 --> <source srcset="xxx.webp" type="image/we
売上や気温の変化など、数字を表現したい場合に大活躍するのがグラフです。ただの数字を並べた表と比べると一目で上がっているのか・下がっているのかなどが理解できるため、できる限り多くの場面で利用したいところですが、グラフを用意するのは面倒なものです。「QuickChart.io」はそうした場面で活躍するサービスで、適切なURLを設定するだけで自由自在にグラフの画像を生成できるということで、実際に利用してみました。 Open Source Image Charts Replacement | QuickChart https://quickchart.io/ 利用には特に事前登録などは不要で、「https://quickchart.io/chart?c=(グラフの情報)」にアクセスするだけで入力した情報通りのグラフ画像が生成されます。画像であるため、imgタグのソースとして直接指定することも可能で
日付の差分日数(例:開始日「2014/04/01」、終了日「2014/04/30」なら所有日数「30」)を求めるJavaScriptのサンプルです。 HTMLサンプル 開始日付:<input id="txt1DateDifferenceSample" type="text" name="txt1DateDifferenceSample" value="2014/04/01"/> 終了日付:<input id="txt2DateDifferenceSample" type="text" name="txt2DateDifferenceSample" value="2014/04/30"/> 開始~終了までの所要日数:<input id="txt3DateDifferenceSample" type="text" name="txt3DateDifferenceSample" />
3日坊主の代表選手(どこの?)と自負する私。 ここまで、何度もブログをやろうとして、何度も挑戦して、何度も挫折している私。 そんな私ですが、実は昨年末からブログを毎日更新し続けています。 たわいもない内容ですが、、、、 とにかく毎日やるという決めて頑張っています。 「そろそろ」1ヶ月が経とうとしていますが、 「そろそろ」というのは、私的な感覚であって、 実際には「まだまだ」であります。 長いな、、、1ヶ月。 私のブログ制作でよく困るのが「自分の画像」や「スタッフの画像」なんですよね。 うちの場合、年頃の女性が多くて、出演NGがかかっていますし、 自分の画像については、事務所に一人しかいないので自分で撮影するのが面倒・・・・・ あーーリモートワークの弊害・・・・。 そんな時に役に立つのが、「オリジナルキャラクター」 実に使い勝手が良い。 文句言わず働いてくれる。 うちの場合、LINEスタンプ
楽天で新規出店�者の方や既に出店している方も絶対に押さえておかなければならない設定がありますので、今日はそれをご紹介したいと思います。 設定自体は数時間で終わりますので、あなたがどれをやってないか確認しながら進めてくださいね。 こんにちは。 BOSS@mappiです。 日本最大のECモールといえば楽天市場です。 日本でネット通販をする際は「楽天」「amazon」「Yahooショッピング」「独自ドメイン」の4つに複数出店して売上をあげていくわけですが、今日はその中でも最も売上がとれる楽天市場の攻略の話です。 このBLOGでも楽天のSEOについて何度も書いてきましたがそういうテクニックの前に絶対に押さえておかなければならない設定があります。 弊社には毎日、多くの問い合わせがあるのですがその6割が楽天の問い合わせです。 問い合わせをしてきた方と話していると今回説明する設定を入れてない方が非常に多
新着ニュース 2018/2/1 コムニコが語る SNSマーケティングで結果を出すための運用術 2018/1/30 人気SNSの国内&世界のユーザー数まとめ(Facebook、Twitter、Instagram、LINE) 2018/1/15 SNSのポテンシャルを本当に引き出せていますか? 2017/12/7 Twitterアナリティクスを使って分析・解析方法を徹底解説! 2017/12/6 SNSマーケティング担当者がおさえるべきFacebook、Twitter、Instagramの使い分け 2017/11/20 Facebookインサイトを使ってFacebookページを分析・解析する方法 2017/10/28 <無料ダウンロード付き!>SNSアカウント運営の便利アイテム、コンテンツカレンダーの作り方! 2017/10/11 Instagramを分析する方法まとめ。ビジネスプロフィールの
ビューポートを使った単位(vw, vhなど)は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか? サイトのナビゲーションやページコントロールはどうでしょうか? それらは計算に含まれますか? スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ(vh)の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ(vh)の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
送信フォームの入力文字数をチェックし、指定した文字数に対し、不足していたり、超過していたりした場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、不足の場合は、「○○文字不足しています。」と表示させ、超過の場合は、「○○文字オーバーしています。」と表示させるサンプル。 実装例 コメント(6文字以上20文字以内) 実装例の動作について 何も入力せずに、送信ボタンを押すと、 「入力内容に不備があります。」というアラートが出現。 「コメント(6文字以上20文字以内)」の下に、「6文字不足しています。」と表示。 2文字入力し、送信ボタンを押すと、 「入力内容に不備があります。」というアラートが出現。 「コメント(6文字以上20文字以内)」の下に、「4文字不足しています。」と表示。 22文字入力し、送信ボタンを押すと、 「入力内容に不備があります。」というアラートが出現。 「コメ
無料で利用できるパンフレット(シングル、二つ折り、三つ折)用テンプレートがあったのメモ。 ファイル形式はPSD、AI、InDesignといろいろと混じっていますが、どれもプロフェッショナルデザインでありながら商用利用可能なものですので、いろいろな場面で利用できると思います。 また、詳しいチュートリアルがついたテンプレートもあるので、パンフレットを作ったことがないという方にも、非常に参考になります。 また、パンフレットと銘打っていますが、カタログやポートフォリオといった貴重なテンプレートもありますので、ぜひご活用ください。 ビジネスで使える三つ折パンフのPSDテンプレートBrochure Template PSD 1 MORE INFO 会社案内なで使える三つ折パンフのPSDテンプレートFuturistic Sound Flyer MORE INFO シンプルなリーフレットのPSDテンプレー
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
A slider needs a single stage, a layer and one frame for each slide. Use regular links to control the slider. The different layerJS elements are defined by the lj-type attribute. lj-default-frame will indicate which frame is shown initally in the layer. The example shows 2 frames in the layer, repesenting 2 slides. The controls are normal HTML links that reference a specific frame (e.g. #frame1) o
WordPressのプラグイン「Beaver Builder- WordPressページビルダー」が個人的に熱いWordPressはブログツールとして発展してきた経緯もあり、長文を書くのは大変得意です。 しかし、記事をレイアウトしようとすると、途端に難易度が上がります。 コンテンツを2カラムに分けて画像を配置したり、各画像にアニメーションを適用するなどといったことをデフォルトの投稿画面で実施しようとすると、非常に難しいんですよね。 テキストモードでHTMLが書ける人なら良いかもしれませんが、そんな高度なことは制作者ぐらいしか出来ません。 じゃあconcrete5で良いじゃないか!と言われると、ブログもよく書いていたりすると、WordPressからなかなか逃れられない。 そこで最近気に入って使っているのが【Beaver Builder – WordPressページビルダー】というプラグインで
こんにちは。うっかりチカッパです。 前回ご紹介したAdobe Brackets。おすすめしたい機能がとても多くて一度では紹介しきれませんでした…。 その中のひとつがショートカット! Bracketsのショートカットは必要なものだけ搭載されていると言われていますが、既存で十分なほど機能が備わっています。 また、新しいエディタに乗り換えた時に一番戸惑うところはショートカットと機能の違いです。 私は今までSublime Text派だったので、「これBracketsにもあるのかな…」とさぐりさぐり使っていたのですが、案外共通の機能やショートカットが多く、乗り換え後もすぐに親しめました。 また、ショートカットをカスタマイズすることができますので、今まで慣れ親しんだショートカットをBracketsでも使用することができます。 では、まずは私がよく使用しているショートカットからご紹介します。 覚えると便
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く