html・Script・CSS の豆知識

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

OcO

Oco's KAKI-PPANASHI

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

プリード君のブログ村

プリード君

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

OcO

Oco's KAKI-PPANASHI

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

だるま

自分でやる

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

ちいラボ

ちいラボ - 大津のほっこりスマホ・パソコン教室

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

ちいラボ

ちいラボ - 大津のほっこりスマホ・パソコン教室

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

藤原のパタリロ

キャッカンシ

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

藤原のパタリロ

キャッカンシ

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

藤原のパタリロ

キャッカンシ

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

里崎 樹

ネットショップ語り

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

moyashidaisuke

もやぶろ

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

moyashidaisuke

もやぶろ

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

moyashidaisuke

もやぶろ

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

moyashidaisuke

もやぶろ

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

Twirus

とにかくサボテン！

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

Twirus

とにかくサボテン！

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

Twirus

とにかくサボテン！

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

キオレオピンぶろぐ

キオレオピンぶろぐ

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

Twirus

とにかくサボテン！

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

里崎 樹

ネットショップ語り

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

パパぱふぅ

ぱふぅ家のホームページ

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

パパぱふぅ

ぱふぅ家のホームページ

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

Gold fish

FXはシストレで！

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

パパぱふぅ

ぱふぅ家のホームページ

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

パパぱふぅ

ぱふぅ家のホームページ

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

パパぱふぅ

ぱふぅ家のホームページ

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

パパぱふぅ

ぱふぅ家のホームページ