ぐぐたく

ぐぐたく

マガジン

  • Webデザイン実装例

  • 業務改善ツール

    ICT による業務効率改善・働き方改革のかけらを集める→実際の業務での提案に役立てる

最近の記事

VTuber と喧嘩みたいになったの納得いかないのでやりとりを並べて整理する

※ この記事では X (x.com) を Twitter、ポストをツイートと呼びます。 ※ 原文まま と記載している部分は、ツイートなどの原文を一言一句変更せずに引用しています。 ※ 原文とは異なる と記載している部分は、ツイートなどの原文から VTuber の名前や企画名などを記号等に置き換えたり、意図が伝わりやすいように語順を並べ替えたりして引用しています。 この記事の動機タイトルの通り、Twitter でのツイートを発端に VTuber と喧嘩、いわゆるレスバのような

    • HTML と CSS だけで複数絵文字の羅列を 1 行に収める

      まず結果を見たい人向けソースコードとサンプル (HTML 編集が可能なブログサービスでの利用を想定しているため, CSS ではなく HTML の style 属性を使用している.) 作りたいもの (要件)- 複数の絵文字を連打したい. - デスクトップでもモバイルでも 1 行で表示したい. (変に改行させたくない.) 実装解説まず <p> (<div> でも良い) の中に複数の絵文字を連打する. このとき絵文字の種類ごとに <span> で囲む. <p> <span>

      • お家のネットワーク環境とインターネットについてある程度知ってみよう

        はじめにネットワークやインターネットに興味を持ってもらいたいという思いと, 家のネットワークにトラブルが起きたときにある程度どこに問題がありそうかを推測する手がかりになれば良いと思い作成しています. そのため説明を省略している部分や一部正確ではない表現を用いている箇所があると思いますがより正確で詳細な説明はプロが書いた書籍をご購入いただきたいと思います. この記事はあくまでもある程度ざっくりと家のネットワークについて知ってもらうためのものです (あと書いてる人間もネットワー

        • HTML と CSS だけで要素のアスペクト比を固定する

          まず結果を見たい人向けソースコードとサンプル 作りたいもの (要件) - 要素のアスペクト比を指定したい (具体的な px 値を使わずに). 実装解説 HTML は非常にシンプル. ポイントは, アスペクト比を固定した要素 (この HTML では id が ratio_16-9 の <div> 要素) に小要素は 1 つのみ入れること. <div id="ratio_16-9"> {なにか要素一つ (例: YouTube 動画埋め込み)}</div> まず <di

        VTuber と喧嘩みたいになったの納得いかないのでやりとりを並べて整理する

        マガジン

        • Webデザイン実装例
          4本
        • 業務改善ツール
          1本

        記事

          HTML と CSS だけで見出しにアイコンを付ける

          まず結果を見たい人向けソースコードとサンプル 作りたいもの (要件) - <h1> とか <h2> とかの左に画像でアイコンを挿入したい. - アイコンがない見出しも使うことがある (全ての見出しにアイコンを付けるわけではない) のでそのへんは柔軟にしたい. 実装解説HTML にはアイコンあり見出しとアイコンなし見出しを用意した. ポイントは, アイコンありの際には見出し文のところを直打ちではなく <span> 等で包み, <h1> の小要素とするところ. 要件の 2 番

          HTML と CSS だけで見出しにアイコンを付ける

          HTML と CSS だけでヘッダにぶら下げ目次を作る

          まず結果を見たい人向けソースコードとサンプル 作りたいもの (要件)- ページの上部に常駐するヘッダに各ページへのリンクを含む目次を作りたい. - 目次はカテゴリごとに分類して, 子ページへのリンクを一覧にしたい. - カテゴリにマウスカーソルをホバーするか, タップすると子ページの一覧がぶら下がって出てくる. 実装解説HTML は非常にシンプル. <header> <!-- ヘッダそのもの. --> <ul> <!-- 目次. --> <li> <!-- カテ

          HTML と CSS だけでヘッダにぶら下げ目次を作る

          コンピュータへの認識を改めることで多くの大学生は無駄な "作業" から開放される

          このご時世, 全くあるいはほんの少ししかコンピュータに触れずに大学生活を無事終えることは非常に難しいだろう. 星のカービィスーパーデラックスのセーブデータを一度も消さずにクリアするより難しいだろう. もはや不可能である. そんな中で大学生を苦しめるものの 1 つが "しょーーーーーーもない作業" の時間である.たとえば "レポートの Word ファイルを USB メモリにコピーして友達のコンピュータに挿してコピーする." だとか, "スマホで撮った写真をメールに添付して自分

          コンピュータへの認識を改めることで多くの大学生は無駄な "作業" から開放される

          GAS でファイルリストを自動生成

          【この記事は Qiita から note に移行しました】 きっかけ学校で導入している iPad のアプリガイドラインをいくつか作って配布しているんですが, これまでは配布ページにわざわざ HTML でタイトルとバージョンと URL を手入力で掲載していました. しかしある時, なんとかこれを自動できないかとふと思ったわけです. GAS でできるで- ガイドライン (PDF) を Google ドライブの特定のフォルダにアップロードしておく - スクリプトの Web アプ

          GAS でファイルリストを自動生成

          GAS 入門 - DriveApp クラスリファレンス

          【この記事は Qiita から note に移行しました】 Google Apps Script の DriveApp クラスを解説. GAS 入門向け. ファイル/フォルダを取得まずは操作する対象、つまりファイルやフォルダを取得しましょう. ○ ID でファイル/フォルダを取得 DriveApp.getFileById(id);DriveApp.getFolderById(id); id の部分にはファイルの ID を指定します. ファイルの ID は、そのファ

          GAS 入門 - DriveApp クラスリファレンス

          ひとつの GAS アプリケーションで実行者をかえたい

          【この記事は Qiita から note に移行しました】 [2019/05/24 ContentService を使った正しい GET 通信に書き直しました.] [2019/05/24 お問い合わせは Twitter か メール が確実です.] --- Qiita Advent Calendar 初参加です。よろしくお願いします。 Twitter: @TakumaNitori | @YutaNakamizo --- 「自分として実行」と「Web アプリケーションに

          ひとつの GAS アプリケーションで実行者をかえたい

          #1 Google Apps Script で面倒な作業を減らそう - はじめる

          Google Apps Script (通称 GAS / ガス) とは?Google Apps Script (以下 GAS) は, Google が提供する各種アプリケーション "Google Apps" (たとえば Gmail, Google ドライブ) の操作に特化したスクリプトおよびその開発環境です. GAS は Google サーバ上で実行されるサーバサイドスクリプトの一種です. 記述には JavaScript が用いられます (ただし ES6 には未対応・対応準備

          #1 Google Apps Script で面倒な作業を減らそう - はじめる