html・Script・CSS の豆知識

【趣味ではじめるWebサイト】 Opalを使ってJavaScriptにデータを受け渡すとき思いついたやりかた

こんにちは！ RubyのコードをJavaScriptに変換してくれるGem「Opal」について、引き続きいろいろ遊ばせてもらっています。 今回は、データの受け渡し方をもう一工夫できないかなあという模索をしている記事です。 自分で作ったRubyオブジェクトをJavaScriptに渡すには JSONでデータを渡すという選択肢 自分で作ったクラスオブジェクトをJSON化できたら一番美しい 自分で作ったRubyオブジェクトをJavaScriptに渡すには ドキュメントを読んでると、Opalが対応しているものは、いい感じにJavaScriptに変換してくれるようです。 opalrb.com 自分が作った…

Luxeritas ルクセリタスの画像を一括で角丸にするCSS

このサイトはWordpressのテーマ「Luxeritas ルクセリタス」を使用しています。 記事内の画像を一括で角丸にするCSS（カスケーディング スタイル シート）をGoogl...

【趣味で作るWebサイト制作】CSSとフレームワークについて調べました。

おはよーございます。 Webサイト制作の入り口のそのまた入り口ぐらいでストップしていましたが、制作を再開するために下ごしらえとして、今まで使ってた技術要素を棚卸しして、自分にあったつくりかたを再構築しているところです。今回はそのなかでCSSについて調べてみました。 CSSの役割 Webサイトの見た目を作っていくところで重要な役割を果たします。サイトを見にくてくれる人の環境としてはいまやスマホがダントツではないでしょうか。とはいえタブレットやPCで見る方もいらっしゃるので、それぞれの端末に合わせた最適なデザインを作るのにCSSは欠かせない存在です。きっとそう。 CSSフレームワークとは いま作っ…

働く形が変わった～フリーランスエンジニア向けの在宅リモート求人が面白い

「働く」という形が全世界で、随分変わり通勤せずに、在宅からのリモートワークが増加しています。システムエンジニアやWebデザイナー向けに在宅リモートワークの求人に特化したエージェントを紹介します。多種多様なライフスタイルにも適応できるスキルは強みです！

リンクを表示するとスタンプが押されるCSSアニメーション

今回は、よい押すのが心地よいリンク、というのを考えてみました。それが、画面に表示すると、スタンプが押されるアニメーションです。まぁ、実際に押すかは別問題ですが…笑枠の中にマウスをポイントしてみてください。 HTML<figure cl

[Cocoon] 引用ブロックをすっきりさせた

引用ブロックのデザインをすっきりさせました。前後のデザインの比較もとはこんな感じでこうしました。引用符を枠線の外に出すことで、ちょっとすっきりしてませんか？CSSコードはこちら/** * 引用をすっきりさせた * */.entry-cont

楽天GOLDにオリジナルの買い物かごを設置する方法

楽天GOLDにオリジナルの買い物かごを設置したい方向け。楽天GOLDに作成した特集ページなどに買い物かごを設置することで購入経路が増え、売上UPの効果が見込めます。それでは詳しく解説していきます。デザインの一例としてサンプルデモもご用意しま

Yahooショッピングのカートを外部化する方法

Yahooショッピングのトリプルページや外部サイトにYahooショッピングのカートを設置したい方向け。カートを外部化して設置することで購入経路が増え、売上UPの効果が見込めます。それでは詳しく解説していきます。Android版PayPayモ

楽天PCページに使えるスクロール追従ナビゲーションの作り方

お客様にもっと楽天ショップ内を回遊してもらいたい。そんな時に選択肢に挙がるのがスクロールに追従するナビゲーションです。常にページ上に固定表示されるため別店舗への離脱を減らし、自店舗の別ページに誘導する効果が見込めます。本記事ではRMSでも利

【HTMLだけ】フォームの送信をクリック後に任意の位置に移動する方法

お問い合わせなどのフォームで使えるテクニック。フォームの送信をクリック後にページ内の任意の位置に移動することができます。例えば、必須項目未入力で送信をクリックした場合、フォームの頭に移動させる。ということもできます。それでは「必須項目未入力

コピーするだけ！CSSジェネレーター7選！

CSSをなかなか使いこなせない。サンプルを見ても特にレイアウト関係がいまいち理解できないし、たとえ理解したとしてもすぐに忘れてしまう。また、レイアウトがブラウザや画面の大きさなど...

mixhost で SSH 接続をする方法。選んだターミナルソフトは RLogin

最近、WordPress の記事を書きはじめ、せっかくだから SSH（Secure Shell） 接続することにした。大昔の憶も掘り起こしたくて。リハビリか。 当方のレンタルサー...

コピペOK！CSSで作る押したくなるボタン達10＋【CodePenより】

最近はすごいですね、CSSで動くボタンを使おうと思ったら、Googleで "CSS ボタン ジェネレーター" って検索して、簡単にコピペできちゃう。でも、面白いアイディアを知りた...

How to implement smartphone horizontal scrolling UI with CSS

The recent increase in smartphone pages is flickable horizontal scrolling.It is a convenient UI that can display the lis

はてなブログのテンプレート「Minimalism」をカスタマイズした

概要 なぜ「Minimalism」？ pro関係ないけど変えた とりあえずテンプレ適用 before after 「Minimalism」をカスタマイズ（公式記事参考に） レスポンシブデザインに設定する トップページを一覧形式にする ブログ名が全角（日本語）の場合 ナビゲーションメニューを設置する after シェアボタンを設置する after ヘッダーを好きな色に設定する after 見出しデザインについて after 「Minimalism」をカスタマイズ（独自） 画像を小さくする before after コードのシンタックスハイライト変更 パンくずリストの表示 after カテゴリの階…

はてなブログのテンプレート「Minimalism」をカスタマイズした②

概要 safariで見た時にフォントが違う before after ブログタイトル部分の縦の余白を小さくしたい before after 行間を全体的に調整する before after 画像にいい感じの枠をつけたい after twitterのシェアボタンでタイトルしか連携されない after まとめ 概要 www.moyashidaisuke.com 前回の残りをやっていきます。 safariで見た時にフォントが違う フォントの指定が雑だからでした。 before body { font-family: "メイリオ", Meiryo; } after テンプレート「Minimalism」…

【はてなブログ】Minimalismで更新日を表示する（トップページのエラー対策付き

概要 たまに過去記事を修正したり追加したりした時に、更新日が表示されないのはもったいな〜という事で、カスタマイズして表示するようにしました。 こんな感じです。 概要 やり方 フッタ デザインCSS 所感 やり方 www.tomomore.com ほとんどこのままです。 トップページで以下のエラーが出てたので（エラーが出るだけで動作上は問題無さそう）、微修正しています。 エラー hatenablog.js?version=4cbff299be1219037c65e826e20075ea9027b5e7&env=production:19 Uncaught TypeError: Cannot re…

はてなブログのシェアボタンをいい感じにカスタマイズ

概要 はてなブログのテーマ「Minimalism」のソーシャルボタン（シェアボタン）ですが、目立たないかなぁ、、と思ったので（シンプルでかっこいいのですが）を色付きのもので目立つようにしてみました。 あわせて、はてブとFacebookはシェア数がのカウントも見えるようになりました。（Twitterは仕様変更でできなくなったらしい） これでみんなシェアしてくれるとうれしいな！ 概要 before after やり方 アイコン読み込み ソーシャルボタン配置 デザイン→カスタマイズ→記事→記事上 デザイン→カスタマイズ→記事→記事下 css まとめ before after やり方 www.noti…

17分で簡単にホームページを作る【実例公開】

たった17分でホームページを作ることができる方法を実例つきで解説します。ペライチはHTML、CSSを学んだことがない方でも自分のホームページを持つことができます。ホームページ作りに挫折した方、手早くホームページを公開したい方におすすめです。

【Gulp】browser-syncのLiveReloadが動かないときの直し方

Gulpのbrowser-syncのLiveReloadがうまく動かないということはありませんか？browser-syncの記述は正しいにも関わらずLiveReload機能が働かないのはHTMLが原因かもしれません。browser-sync

【Yahoo!ショッピング】好きな色をリンク色に指定する

Yahooショッピングは一括でテキストリンクの文字色を変更できますが、好きな箇所のリンク色を自由に変更できたらいいと思いませんか？今回紹介するのは好きな箇所のリンク色を変更できる方法です。リンク色を変更するための事前準備Yahooトリプルに

Your account has been flagged.って何？GitHubでBANされたときの回復方法

GitHubの画面に突然「Your account has been flagged.」というアラートが表示された！至急対処したいけど、どうしたらいいかわからない。そんな問題の対処法を紹介します。至急対処したい方、きちんと対処すればすぐに復

【楽天市場】ページ下部固定バナーを設置する

楽天市場のPCページ、商品・カテゴリページの下部にバナーを固定設置する方法をデモを交え解説します。ページ下部バナーは常に目に留まるところに表示されるため、セールやキャンペーンを効果的にお客様に訴求することができます。HTMLとCSSのみで設

毎月同じ日に表示／非表示を切替えるJavaScript

セールなどのイベント日だけ表示させたい画像やバナーはありませんか？JavaScriptを使えば毎月同じ日だけバナーを表示することができます。楽天市場の「5と0のつく日」や「毎月1日のワンダフルデー」、Yahoo!ショッピングの「5のつく日」

【コピペでできる】楽天市場の帯バナー

楽天スーパーセールやポイントアップキャンペーンのとき、お店の賑わい感を出すことができるバナーといえば何でしょうか？特に販促効果が高いバナーといえば上下に伸びる帯バナーです。本記事では楽天市場の商品ページ、カテゴリページに設置できる帯バナーの

PayPayモールはiframeが使えない

今回はPayPayモール出店にともなうiframeタグの扱いについて紹介。Yahoo!ショッピングは多くの制約がありますが、PayPayモールはそれ以上です。Yahoo!ショッピングでiframeタグを使っていたショップならPayPayモー

【Cocoon】値の型が正しくありませんの解決法

CocoonユーザーGoogleサーチコンソールで「値の型が正しくありません」というエラーが発生してしまった。どうすればいい？という問題を解決します。エラーにより、貴サイトのページまたは機能が検索結果に表示されなくなる可能性があります。値の

コピペでOK！楽天市場の検索窓デザイン

楽天GOLDページにオリジナルの検索窓を設置したい。検索窓を自由にカスタマイズしたい。という悩みを解決します。デフォルトの検索窓は必要最低限の装飾しかしておらず、正直使いづらいです。また、検索窓をデザインしてカスタマイズするにはHTML、C

楽天のスマホ商品ページにオリジナルのお気に入りボタンを設置する

楽天のスマホ商品ページにはデフォルトで商品のお気に入りボタンが設置されています。 商品をお気に入りに登録してもらうことで商品の割引、ポイントアップ情報などが通知されるため、購入機会を増やすことができます。それではお気に入りボタンを好きなとこ

CSSのみでモーダルウィンドウを作成

JavaScriptを使わずにモーダルウィンドウを実装できますか？CSSだけでモーダルウィンドウは実装できます！jQueryなどのJavaScriptを使って作成することが多いモーダルウィンドウですが、CSSのみでも作成することが可能です。

Chromeの検証ツールを使ってhtmlを攻略しよう！【html css】

こんにちは、Twirusです。 前回、疑似要素で外部アイコンが使えるようになりました。 ですが投稿日時の要素だけじゃなく他の要素にもアイコン使いたい！さらにはブログをカスタマイズしたい！オリジナルテーマを作りたい！となると「要素」と「クラス」を知る必要があります。そんな時はChromeの検証ツールを使うとすぐ分かります！ htmlに触れよう！ 検証ツールでhtmlを見る！ CSSで指定する時の注意１ CSSで指定する時の注意２ おまけ 終わりに htmlに触れよう！ とりあえず更新日時が「.date」ってのは分かったけど、あっちは？こっちは？ってなります。ではhtmlを見てみましょう！その前に…

外部アイコン「Font Awesome」を使える様にする！【はてなブログ html css】

こんにちは、Twirusです。 前回は投稿日時にアイコン付けるカスタマイズ でしたがHatena様によるHatenaBlogの為のアイコンを拝借する、いわば内部アイコンでした。今回はアイコンを提供してます！よろしくね！というサービスのアイコンを拝借する、いわば外部アイコン。無料で使えるFree版と有料のPro版があり、はてなブログの為の必要最小限の内部アイコンとは違いいい感じのアイコンもあるけど良く分からないのまであって困っちゃう！という記事です。「Font Awesome」様、ありがとうございます。 私の環境は【 ブラウザ：Chrome、エディタ：Brackets 】です。今回エディタは使わ…

記事の投稿日時にアイコンを付けるカスタマイズ【html css】

こんにちは、Twirusです。 今回は投稿日時にアイコン付いてるけど、どうやるんだろ？時計アイコン付いてるけど他のアイコンに変えてみたい！でもどうやんの？という記事です。 私の環境は【 ブラウザ：Chrome、エディタ：Brackets 】です。今回エディタは使わなくても大丈夫です。 ※CSS初心者が初心者なりの知識をひねり出して記事を書いています。何が起きるか分からないので「 {}デザインcss 」のバックアップをして自己責任でお願いします。 目次 アイコンの呼び出し方 要素とは 疑似要素とは とにかく呼び出す！ CSSの優先順位 好きなアイコンを付けよう！ コード解説 アイコンのコードを調…

〈初心者必見〉iPadで吹き出しっぽいCSSをデザインしてみた！

どうも、バリバリ初心者ブロガーのキオレオピンでございます。 今回は吹き出しを使って会話っぽくすることに取り組んでみたので、そちらの設定方法などを書いてみたいと思います。 こーんな感じ！ // 設定するにあたって 設定の仕方 iPhone・iPadでの画像設定方法 まとめ 設定するにあたって 初心者ブロガーにとっては特に、ネタを考えることから構成を考え、書き終えるまでが本当に大変ですよね😅 私も日々葛藤しながらもこの記事を書いているのであります。笑 ブログを始めて1ヶ月半経ち、現時点で30記事ほど生産したのですが、私はここらへんで「デザイン」にもこだわった方が見て下さるユーザーの満足度が上がると…

CSSを勉強してテーマを作る！

こんにちはTwirusです。 初めてブログをやってみて、お～！テーマってのがあるのか！テーマを提供してる方がいるのか！ここにプログラムを書き込むとカスタマイズ出来るのか！便利便利！やってみよう！ なんてな事でテーマを適用して聞いたことはあるけど良く分からないCSSをいじって手探りでカスタマイズしていたんですが、楽しくなってきたのでテーマ作りに挑戦しようと思いました。難しかったら諦める！そんな軽い気持ちで。 この記事の環境はブラウザはChrome、エディター(編集ツール)はBracketsです。cssを編集してみたいな！という方の参考になれば幸いです。よろしくお願いします。 とにかく検索！ その…

https://ecmemo.net/horizontal_scroll

記事の情報が取得されるまで、しばらくお待ちください。

https://ecmemo.net/yahoo_header_width100

記事の情報が取得されるまで、しばらくお待ちください。

https://ecmemo.net/rakuten_sp_urawaza

記事の情報が取得されるまで、しばらくお待ちください。

https://ecmemo.net/urawaza_rakuten_category

記事の情報が取得されるまで、しばらくお待ちください。

https://ecmemo.net/javascript_sale_cdt

記事の情報が取得されるまで、しばらくお待ちください。

https://ecmemo.net/price_automate

記事の情報が取得されるまで、しばらくお待ちください。

https://ecmemo.net/js_math

記事の情報が取得されるまで、しばらくお待ちください。

https://ecmemo.net/jquery_smooth_scroll

記事の情報が取得されるまで、しばらくお待ちください。

http://www.pahoo.org/e-soul/webtech/js01/./program/isjs.html

記事の情報が取得されるまで、しばらくお待ちください。

http://www.pahoo.org/e-soul/webtech/js01/js01-02-01.shtm

記事の情報が取得されるまで、しばらくお待ちください。

http://mt4sys.seesaa.net/article/flexslider.html

記事の情報が取得されるまで、しばらくお待ちください。

http://www.pahoo.org/e-soul/webtech/js01/../e-soul/webtech/js01/program/gmap.html

記事の情報が取得されるまで、しばらくお待ちください。

http://www.pahoo.org/e-soul/webtech/js01/js01-04-01.shtm

記事の情報が取得されるまで、しばらくお待ちください。

http://www.pahoo.org/e-soul/webtech/js01/../e-soul/webtech/js01/program/wikisearchjs.html

記事の情報が取得されるまで、しばらくお待ちください。

http://www.pahoo.org/e-soul/webtech/js01/../e-soul/webtech/js01/program/birthgame.html

記事の情報が取得されるまで、しばらくお待ちください。