f@ctor

今さら聞けないHTML　2020年03月29日

今さら聞けないHTML　2020年03月29日
目次

Bootstrapの画面分割

Bootstrapの基本

“`html.

“`

containerの中にrow、rowの中にcolを入れていく。
div class=”col-サイズ-割合”
サイズ表：

| xs | sm | md | lg |
|:—-:|:——-:|:——–:|:—–:|
|~767px|768~911px|912~1119px|1120px~|
|スマホ |タブレット | PC |PC大画面|

割合：
画面を12分割し、割合を決めることで画面を分けることが簡単にできる。

例1：
col-lg-4
col-lg-4
col-lg-4
これらは横並びに３列均等に分割できる。

元記事を表示

WSLのディレクトリにあるhtmlをブラウザで開く

意外と分からなかったので、メモ。

“`bash:terminal
explorer.exe foo.html
“`
explorer.exeを使用すればhtmlファイルを開くことが出来る。

“`bash:.bashrc
export BROWSER=”explorer.exe”
“`
開けなければ、.bashrcに設定する。

“`bash:.bashrc
alias start=”explorer.exe”
“`
楽に開けるようにエイリアスを.bashrcに設定する。

“`bash:terminal
start foo.html
“`
startコマンドでhtmlを開けるようになる。

##参考
[Is there a way to open a file in a browser from WSL?](https://www.reddit.com/r/bashonubuntuonwindows/comments/8teo9i/is_there_a_way_to_open_a_file_in_a_browser_from/)

元記事を表示

指定したエリアだけを印刷する処理

# こんな場面で使えます。
　例えば、ユーザーに何らかのアンケートに回答をしてもらうサイトで
**ユーザーが自分の回答結果の部分だけを印刷したい場合**などに使えます。
普通の印刷では余計な箇所も入ってくるので、必要なエリアだけを印刷できるようにします。
※実際の挙動が確認できるwebアプリのURLを一番下に載せてますので、そちらもご確認ください。
![11printImg1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533713/69200c0f-8c51-2c4c-d8fc-3a4af6868b15.jpeg)

# 実装の流れ
　１：印刷ボタンを作成
　２：プリントしたいエリアの取得の指定
　３：２のエリア全体のコピーを作成
　４：3以外を非表示にする処理を作成
　５：印刷ダイアログの呼び出し➡︎印刷する
　６：３で作成した印刷用エリアを削除 ・ ４で非表示にした要素を表示する

# 実装スタート
## １：印刷ボタンを作成

“`html:print.html

元記事を表示

100日後にエンジニアになるキミ – 8日目 – HTML – HTMLの基礎3

本日もHTMLの続きです。

前回はHEAD要素で用いられるタグについてやりましたので
今回はBODY要素で用いられるタグについて説明します。

# bodyタグ

`コンテンツ`

HTML の `` 要素は
HTML 文書のコンテンツを示す要素です。

`` 要素は文書中に一つだけ配置できます。

``要素を書くのに``タグを用います。

その中に加えられる要素がコンテンツそのものになります。

“`

見出しなど


“`

``要素はその構成から以下のような部分に
分けることができます。

![body.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379626/dd751ea9-83b0-c3c1-b500-af4c2c1562ea.png)

ヘッダー部
サイトの上部に配置される部分。
メニューやリンクなどを配置することが多い。

コンテンツ部：
コンテン

元記事を表示

画像を右クリック→「TinyPNGで圧縮」を実現する

# 完成形

![pnq.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151137/de585d18-128a-5d43-046e-59b9973f9c8e.gif)

# 圧縮用のコマンドをインストール

タイトルでは分かりやすいよう「[TinyPNG](https://tinypng.com/)」と書きましたが、実際にはTinyPNGが使っている「[pngquant](https://pngquant.org/)」というコンプレッサーを使います。

**インストール**

“`
$ sudo apt install pngquant
“`

**使い方**

下記オプションで圧縮＆上書きします

“`
$ pngquant –ext .png –force filename.png
“`

アルファチャンネルありのPNGでも綺麗！

|Original (239.8kB)|Compressed (51.9kB)|
|—|—|
|![ghost_origin.png](https

元記事を表示

ヘッダーを途中から固定させたい！

##概要

ポートフォリオサイト作成時、
スクロールしてヘッダーを途中から固定させたいと思い実装していたのですが、
なかなか上手くいかなかったので備忘録としてまとめます。

おかしなところあったらご指摘ください・・・

##条件
ビューはHamlで記載
jQuery導入済み

##Html

スクロールしてtop-visualを過ぎた後にheaderが固定されるイメージです。

“` index.html.haml
.top
.top-visual
.top-visual__movie-area
= image_tag “top-image”
.header
.header__line
.header__nav-bar
.header__container
.header__title
My portfolio
.header__nav-area
%ul.header__nav-lists
%li.head

元記事を表示

Bootstrap縛りで制作するポートフォリオ #1

今回は、この時期にあるといいポートフォリを制作していきます。その際、普通に使うのでは面白くないので、[Bootstrap]()を導入して実装するという縛りで実装していきます。

本来ポートフォリオにはフレームワークなどをどんどん取り入れてくのは良くないと個人的には思います。というのも自身のコードでないとその実力ははかりえないので。。。ということで今回はポートフォリオの簡単な作成の流れとBootstrapの簡単な使い方を紹介することを意図しています。

#はじめに
まずは、簡単なレイアウトを決めていきます
このポートフォリオは、誰も依頼したわけでも〜な機能を必要ともされていません。それ故に、自分で決めなければいけません。ではどこで判断基準になるのでしょうか？　

#UXが全て
実際にそのサイトをみてどの様に印象を持たせるかが、このポートフォリオで一番大切な点です。
~の機能がないとかは判断されませんが、ある程度の機能があった方がその評価は高くなります。

#レスポンシブデザインは行なっているか
今の時代、サイトにアクセスするユーザの大半がスマートフォンからのアクセスです。つまりそのサ

元記事を表示

PHPでポートフォリオ作成：カレンダー

# 記事の概要
作った背景、工夫したところ、機能をまとめました。

下にコードを記載しました。

# 背景

一般的なカレンダー（家の壁にかかっているものを想像してほしいです）を作成したときに、自分のスケジュールを書き込めると、カレンダーとしての価値がアップするのでないかなと思い作成にいたりました。

エクセルのようなレイアウトで日付とスケジュールを同時に表示するようなカレンダーを作成します。

工夫としては、当たり前ですが見た目を分かりやすく、使用者が使いやすいようにシンプルにしました。

# 目的
・PHPを用いて簡単なアプリケーションを作る
・見やすくて使いやすいアプリを作る
・カレンダー機能+スケジュール機能で単純なカレンダーに価値をつける

# スペック
言語
PHP 7.4.2
データーベース
MariaDB 10.4.11
開発環境
Apache　2.4.41

ビジュアルスタジオコード使用

# 主な機能

・今月の日付の表示機能
・来月、前月のカレンダーへのリンク
リンクをクリックすると、来月もしくわ前月のカレンダーに飛びます

・スケジュールの表示機能
カレンダー

元記事を表示

ブログをはじめるならGitHub Pagesがおすすめ

ブログをやるなら`GitHub Pages`か`GitLab Pages`がおすすめです。

私は、少し前にGitLabでブログをやっていましたが、その後、GitHubに移行したというか、戻りました。経緯としては`GitHub -> GitLab -> GitHub`という流れです。

[syui.github.io](https://syui.github.io)

割と長くGitHub PagesやGitLab Pagesでブログをやってきたので、今回は、両者の違いをまとめてみます。

– GitLabはプライベートリポジトリが無制限で、HTMLソースを公開しなくていい

– Web Serverは、GitHubのほうが安定していて速い

– GitLabのほうがドキュメントが充実しており、公式テンプレートがわかりやすい

– どちらもCIを回せるけど、GitLabはGitLab CIを回して、public/にビルドするという形態と採用するため、CIが成功しないとページが公開、更新されない。ユーザーが`.gitlab-ci.yml`を書く必要がある

– GitHub Pagesは

元記事を表示

初心者によるプログラミング学習ログ 275日目

#100日チャレンジの275日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
275日目は、

100日後にエンジニアになるキミ – 7日目 – HTML – HTMLの基礎2

HTMLの基礎の続きです

## タグについて

前回はHTMLの構成要素についてやりました。
今回はタグについてのお話です。

HTML要素を表現するのにHTMLのタグを用います。

HTMLのタグはかなり沢山の種類がありますが
主要な部分を覚えれば
全てを覚えなくてもHTMLファイルを作ることができます。

まずは主要なタグを抑えていきましょう。

## HTMLタグ

``
``

htmlタグはHTML文書の冒頭に記述し
HTML文書であることを示すために使います。

``は
この文書がHTML5で作成されたものであることを宣言するために
文書の先頭（``タグよりも上）に記述するDOCTYPE宣言です。

``のタグ直下には
`タグ` と `タグ` がそれぞれ一つづつ必要です。

htmlタグでは , lang属性で言語を指定することができ
日本語の場合はlang=”ja” , 英語はlang=”en”を指定します。

“`
<

元記事を表示

Googleカスタム検索（サイト内検索）の結果ページから別タブに開かない方法

###別タブで開くバージョン

scriptを読み込んだら検索結果を表示するところに下記を挿入する。

“`

“`

###別タブで開かないバージョン

`data-linkTarget=”_self”`を追加する。

“`

“`

公式ドキュメントの一覧では`linkTarget`としか書いてないのですが、別の場所にちゃっかりプレフィックス`data-`をつけてねと書いてあります。ちゃんと読まないとだめですね。

公式ドキュメント：https://developers.google.com/custom-search/docs/element

元記事を表示

ファイルを DATA URI に変換するフォーム

# ファイルを DATA URI に変換するフォーム

“`html




DATA URI 変換